将数据URL中的图像绘制到canvas上
我如何在Canvas中打开图像？ 这是编码
我正在使用
var strDataURI = oCanvas.toDataURL(); 输出是编码的基础64图像。 我如何在canvas上绘制这个图像？
我想使用strDataURI并创build图像？ 这是否可行？
如果不是那么可能是什么可能是在图像加载在canvas上的解决scheme？
给定一个数据URL，你可以通过设置图像的src到你的数据URL来创build一个图像（在页面上或纯粹在JS中）。 例如：
var img = new Image; img.src = strDataURI;
HTML5 Canvas Context的drawImage()方法允许您将全部或部分图像（或canvas或video）复制到canvas上。
你可以像这样使用它：
var myCanvas = document.getElementById('my_canvas_id'); var ctx = myCanvas.getContext('2d'); var img = new Image; img.onload = function(){ ctx.drawImage(img,0,0); // Or at whatever offset you like }; img.src = strDataURI;
编辑 ：我以前在这个空间build议，可能不需要在涉及数据URI时使用onload处理程序。 根据这个问题的实验testing， 这样做是不安全的。 上面的序列 – 创build图像，设置onload使用新的图像， 然后设置src – 是必要的一些浏览器，以确保使用结果。
function drawDataURIOnCanvas(strDataURI, canvas) { "use strict"; var img = new window.Image(); img.addEventListener("load", function () { canvas.getContext("2d").drawImage(img, 0, 0); }); img.setAttribute("src", strDataURI); }
也许这个小提琴会帮助ThumbGen – jsFiddle它使用File API和Canvasdynamic生成图像的缩略图。
(function (doc) { var oError = null; var oFileIn = doc.getElementById('fileIn'); var oFileReader = new FileReader(); var oImage = new Image(); oFileIn.addEventListener('change', function () { var oFile = this.files[0]; var oLogInfo = doc.getElementById('logInfo'); var rFltr = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i try { if (rFltr.test(oFile.type)) { oFileReader.readAsDataURL(oFile); oLogInfo.setAttribute('class', 'message info'); throw 'Preview for ' + oFile.name; } else { oLogInfo.setAttribute('class', 'message error'); throw oFile.name + ' is not a valid image'; } } catch (err) { if (oError) { oLogInfo.removeChild(oError); oError = null; $('#logInfo').fadeOut(); $('#imgThumb').fadeOut(); } oError = doc.createTextNode(err); oLogInfo.appendChild(oError); $('#logInfo').fadeIn(); } }, false); oFileReader.addEventListener('load', function (e) { oImage.src = e.target.result; }, false); oImage.addEventListener('load', function () { if (oCanvas) { oCanvas = null; oContext = null; $('#imgThumb').fadeOut(); } var oCanvas = doc.getElementById('imgThumb'); var oContext = oCanvas.getContext('2d'); var nWidth = (this.width > 500) ? this.width / 4 : this.width; var nHeight = (this.height > 500) ? this.height / 4 : this.height; oCanvas.setAttribute('width', nWidth); oCanvas.setAttribute('height', nHeight); oContext.drawImage(this, 0, 0, nWidth, nHeight); $('#imgThumb').fadeIn(); }, false); })(document);
在JavaScript中，使用jQuery的canvasIDselect：
var Canvas2 = $("#canvas2")[0]; var Context2 = Canvas2.getContext("2d"); var image = new Image(); image.src = "images/eye.jpg"; Context2.drawImage(image, 0, 0);
HTML5：
<canvas id="canvas2"></canvas>
