HTML 5 canvas getImageData из загруженного извне изображения

Я знаю, что это невозможно сделать по причинам безопасности. Тем не менее, я слышал, что есть некоторые веб-сайты с изображениями, которые позволяют использовать их изображения аналогичным образом (Google Picasa?). Я мог бы ошибаться, но я хотел бы знать, правда ли это, и если да, то как я могу получить данные изображения из такого изображения.

Заранее спасибо.

Ответы на вопрос(1)

Решение Вопроса

Да, есть публичные хосты, которые обслуживают изображения, которые можно использовать в canvas ' 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/

Вот код:



 



    body{ background-color: ivory; }
    canvas{border:1px solid red;}



$(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
 Janus Troelsen12 янв. 2015 г., 23:54
Wouldn»т лучше использоватьnaturalHeight изHTMLImageElement вместо?

Ваш ответ на вопрос