CORS 제한없이 캔버스에 HTML 삽입

Question

MDN's method을 사용하여 HTML 요소의 데이터를 추가 한 캔바스에서 이미지 데이터를 가져 오려고합니다. 나는 HTML 데이터를 삽입 한 후, 난 더 이상 (크롬)하지만 캔버스 '이미지 데이터에 액세스 할 수 없습니다 :

//This function is a direct copy of https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas#JavaScript 
 
onload = function() { 
 
    var canvas = document.getElementById('canvas'); 
 
    var ctx = canvas.getContext('2d'); 
 

 
    var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' + 
 
     '<foreignObject width="100%" height="100%">' + 
 
     '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:14px">' + 
 
     'example' + 
 
     '</div>' + 
 
     '</foreignObject>' + 
 
     '</svg>'; 
 

 
    var DOMURL = window.URL || window.webkitURL || window; 
 

 
    var img = new Image(); 
 
    var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'}); 
 
    var url = DOMURL.createObjectURL(svg); 
 

 
    img.onload = function() { 
 
    ctx.drawImage(img, 0, 0); 
 
    DOMURL.revokeObjectURL(url); 
 
    getData(ctx); 
 
    }; 
 

 
    img.src = url; 
 
}; 
 

 
//the part where it goes wrong: 
 
function getData(ctx) { 
 
    try { 
 
    ctx.getImageData(0,0,100,100); 
 
    } catch(e) { 
 
    alert(e); 
 
    } 
 
}

<canvas id="canvas"></canvas>

내 질문 : 그것은 가능하다 HTML 데이터를 삽입, 여전히 이미지 데이터에 액세스 할 수 있습니까?

Answer 1

조금 더 살펴보면 정확히 동일한 비트의 HTML을 삽입 한 후 data: 개의 URI가 여전히 이미지 데이터에 대한 액세스를 허용한다는 것을 알았습니다. data: URI가 blob 초보다 느리지 만 여기에가는 것이 가장 좋은 방법 인 것 같습니다. 다음 작업을 수행하는 다른 방법은

onload = function() { 
 
    var canvas = document.getElementById('canvas'); 
 
    var ctx = canvas.getContext('2d'); 
 

 
    var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' + 
 
     '<foreignObject width="100%" height="100%">' + 
 
     '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:14px">' + 
 
     'example' + 
 
     '</div>' + 
 
     '</foreignObject>' + 
 
     '</svg>'; 
 
    var DOMURL = window.URL || window.webkitURL || window; 
 
    var img = new Image(); 
 
    var url = 'data:image/svg+xml;base64,' + btoa(data); 
 

 
    img.onload = function() { 
 
    ctx.drawImage(img, 0, 0); 
 
    DOMURL.revokeObjectURL(url); 
 
    getData(ctx); 
 
    }; 
 
    img.src = url; 
 
}; 
 

 
function getData(ctx) { 
 
    try { 
 
    ctx.getImageData(0,0,100,100); 
 
    alert('Finished without errors'); 
 
    } catch(e) { 
 
    alert(e); 
 
    } 
 
}

<canvas id="canvas"></canvas>

Answer 2

아니요, 캔버스가 SVG에 더러워 지므로 context.getImageData은 더 이상 허용되지 않습니다. 이는 도메인 간 보안 문제로 인해 필요하게되었습니다.

(때로는 만족스럽지 않음) 해결 방법은 서버에서 html을 바운스하고 헤드리스 브라우저 (나는 PhantomJS 권장)를 사용하여 html을 이미지로 변환하는 것입니다. 그런 다음 해당 이미지를 클라이언트에 다시 제공하십시오. html-as-image는 크로스 도메인이 아니기 때문에 캔버스에 얼룩이 묻지 않으며 context.getImageData을 사용할 수 있습니다.