来自外部加载的图像的HTML 5 canvas getImageData

我知道由于安全原因不可能直接进行此操作。但是，我听说有一些图像托管网站允许以类似方式使用图像（Google Picasa？）。我可能都错了，但我想知道这是否属实，如果是这样，我如何从这样的图像中获取图像数据。来自外部加载的图像的HTML 5 canvas getImageData

预先感谢您。

来源

2013-06-01 user2442648

是的，有服务于大众的图像主机可以在画布上使用getImageData

的Dropbox就是其中之一：http://www.dropbox.com

要使用这些图片，你必须使用context.crossOrigin =“匿名”标志加载图像时：

var image=document.createElement("img"); // Chrome bug prevents var image=new Image(); 
image.onload=function(){ 

     // in Chrome+Mozilla you can use context.getImageData 

     // but IE still throws the CORS security error 

} 
image.crossOrigin = "Anonymous"; 
image.src="www.CrossOriginSite.com/anyImage.png";

剩下的一个“疑难杂症”的是，IE浏览器仍然没有兑现crossOrigin标志，所以IE仍然不会让你与getImageData一起使用这些图像。

Chrome和Mozilla允许getImageData访问。

例如...

这捣鼓会成功在Chrome或Mozilla观察，但在IE浏览器仍然会失败：

http://jsfiddle.net/m1erickson/czmms/

这里是代码：

<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    var canvasCORS=document.getElementById("canvasCORS"); 
    var ctxCORS=canvasCORS.getContext("2d"); 
    var canvasAnonymous=document.getElementById("canvasAnonymous"); 
    var ctxAnonymous=canvasAnonymous.getContext("2d"); 

    // Using image WITHOUT crossOrigin=anonymous 
    // Fails in all browsers 
    var externalImage1=document.createElement("img"); // chrome bug prevents new Image(); 
    externalImage1.onload=function(){ 
     canvas.width=externalImage1.width; 
     canvas.height=externalImage1.height; 
     ctx.drawImage(externalImage1,0,0); 
     // use getImageData to replace blue with yellow 
     var imageData=recolorImage(externalImage1,0,0,255,255,255,0); 
     // put the altered data back on the canvas 
     // this will FAIL on a CORS violation 
     ctxCORS.putImageData(imageData,0,0);  
    } 
    externalImage1.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png"; 

    // Using image WITH crossOrigin=anonymous 
    // Succeeds in Chrome+Mozilla, Still fails in IE 
    var externalImage2=new Image(); 
    externalImage2.onload=function(){ 
     canvas.width=externalImage2.width; 
     canvas.height=externalImage2.height; 
     ctx.drawImage(externalImage2,0,0); 
     // use getImageData to replace blue with yellow 
     var imageData=recolorImage(externalImage2,0,0,255,255,255,0); 
     // put the altered data back on the canvas 
     // this will FAIL on a CORS violation 
     ctxAnonymous.putImageData(imageData,0,0);  
    } 
    externalImage2.crossOrigin = "Anonymous"; 
    externalImage2.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png"; 


    function recolorImage(img,oldRed,oldGreen,oldBlue,newRed,newGreen,newBlue){ 
     var c = document.createElement('canvas'); 
     var ctx=c.getContext("2d"); 
     var w = img.width; 
     var h = img.height; 
     c.width = w; 
     c.height = h; 

     // draw the image on the temporary canvas 
     ctx.drawImage(img, 0, 0, w, h); 

     // pull the entire image into an array of pixel data 
     var imageData = ctx.getImageData(0, 0, w, h); 

     // examine every pixel, 
     // change any old rgb to the new-rgb 
     for (var i=0;i<imageData.data.length;i+=4) 
      { 
       // is this pixel the old rgb? 
       if(imageData.data[i]==oldRed && 
       imageData.data[i+1]==oldGreen && 
       imageData.data[i+2]==oldBlue 
      ){ 
        // change to your new rgb 
        imageData.data[i]=newRed; 
        imageData.data[i+1]=newGreen; 
        imageData.data[i+2]=newBlue; 
       } 
      } 
     return(imageData); 
    } 


}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <p>Original external image</p> 
    <canvas id="canvas" width=140 height=140></canvas> 
    <p>.getImageData with .crossOrigin='anonymous' 
    <p>[Succeeds in Chrome+Mozilla, still fails in IE]</p> 
    <canvas id="canvasAnonymous" width=140 height=140></canvas> 
    <p>.getImageData without .crossOrigin='anonymous' 
    <p>[Fails on all browsers]</p> 
    <canvas id="canvasCORS" width=140 height=140></canvas> 
</body> 
</html>

来源

2013-06-01 14:50:52 markE

用'HTMLImageElement'的'naturalHeight'代替它会更好吗？ –

来自外部加载的图像的HTML 5 canvas getImageData

回答

相关问题