외부로드 이미지에서 HTML 5 캔버스 getImageData

보안상의 이유로 직시 할 수 없다는 것을 알고 있습니다. 그러나 이미지가 비슷한 방식으로 사용되도록 이미지 호스팅 웹 사이트가 있다고 들었습니다 (Google Picasa?). 나는 틀릴 수도 있지만, 이것이 사실인지 알고 싶으면 그런 이미지에서 어떻게 이미지 데이터를 얻을 수 있습니까?외부로드 이미지에서 HTML 5 캔버스 getImageData

미리 감사드립니다.

출처

2013-06-01 user2442648

예, 캔버스에서 사용할 수있는 이미지를 제공 공공 호스트는 'getImageData

보관 그 중 하나가 있습니다 : http://www.dropbox.com

, 당신은 context.crossOrigin 사용해야합니다 그 이미지를 사용하려면 = '익명'플래그 이미지를로드 할 때 "잡았다"는 IE는 여전히 당신을하지 않도록 IE 브라우저는 여전히 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";

하나 이러한 이미지를 getImageData와 함께 사용하십시오.

Chrome 및 Mozilla는 getImageData 액세스를 허용합니다. 예를 들어

...

이 바이올린 것이다 크롬이나 모질라에서 볼 때 성공,하지만 여전히 IE에 실패합니다

<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

여기

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

코드입니다 'HTMLImageElement'의'naturalHeight'를 대신 사용하는 것이 낫지 않을까요? –

외부로드 이미지에서 HTML 5 캔버스 getImageData

답변

관련 문제