将数据URL中的图像绘制到画布上

Question

如何在Canvas中打开图像？这是我使用的

var strDataURI = oCanvas.toDataURL(); 

输出编码

是经编码的底座64的图像。我如何在画布上绘制此图像？

我想使用strDataURI并创建图像？它是否可行？
如果没有，那么可能会有什么解决方案将图像加载到画布上？

Answer 1

如果有一个数据的网址，你可以（在页面中或纯粹的JS）创建图像通过将图片的src设置为您的数据网址。例如：

var img = new Image; 
img.src = strDataURI; 

HTML5画布语境的drawImage() method可复制全部或图像（或帆布，或视频）的一部分到画布上。

您可以使用它像这样：

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; 

编辑：我以前在这个空间建议，可能没有必要使用onload处理程序时数据URI参与。根据this question的实验测试，这样做并不安全。上面的序列 - 创建图像，设置onload使用新图像，然后然后设置src - 对于某些浏览器确实使用结果是必需的。

Answer 2

在JavaScript中，使用帆布ID选择的jQuery：

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> 

Answer 3

也许这个小提琴会帮助ThumbGen - jsFiddle它使用File API和Canvas动态生成图像缩略图。

(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); 

Answer 4

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); 
}