Canvas.toDataURL() IE10

Question

को छोड़कर सभी ब्राउज़रों में काम कर रहा है। मैं एक ऐसी परियोजना पर काम कर रहा हूं जो एक छवि को स्वचालित रूप से फसल करने के लिए कैनवास का उपयोग करता है, फिर अपना डेटा यूआरएल वापस कर देता है। यह बाहरी सर्वर से छवियों का उपयोग करता है, जिसमें उपयुक्त सीओआरएस हेडर होते हैं ताकि छवियों को क्रॉस-उत्पत्ति के बावजूद फसल के बाद डेटा यूआरआई में परिवर्तित किया जा सके।

कोड आईई 10 को छोड़कर सभी ब्राउज़रों में पूरी तरह से (और सुरक्षा त्रुटियों के बिना!) काम करता है, जिसमें यह 'SCRIPT5022: SecurityError' फेंकता है जब canvas.toDataURL() को कॉल किया जाता है।

क्या यह आईई में एक बग है या मुझे अपने कोड में इडियट एक्सप्लोरर में काम करने के लिए अलग-अलग करने की ज़रूरत है? धन्यवाद। -स्कॉट

संपादित करें यहां (अधिकांश) कोड है जिसे मैं कैनवास बनाने और खींचने के लिए उपयोग कर रहा हूं;

var canvas = document.createElement('canvas'); 
var ctx = canvas.getContext('2d'); 
var img = new Image(); 
img.src = imageServerURL + '?id=' + imageIdToGet; // imageServerURL points to a different domain but the server has headers allowing requests from my domain 
/* 
    code here that defines the cropping area, in variables like ulX, lrY, etc. 
*/ 
ctx.beginPath(); 
ctx.moveTo(ulX, ulY); 
ctx.lineTo(urX, urY); 
ctx.lineTo(lrX, lrY); 
ctx.lineTo(llX, llY); 
ctx.closePath(); 
ctx.clip(); 
ctx.drawImage(img, 0, 0); 
var url = canvas.toDataURL(); // This succeeds in all other browsers but throws a SecurityError in IE 

Answer 1

मुझे विश्वास नहीं है कि आईई 10 में छवियों के लिए कोर समर्थन है। This MDN article इसे वापस देखता है।

लेख राज्यों के रूप में:

आप अपने कैनवास में CORS अनुमोदन के बिना छवियों का उपयोग कर सकते हैं, ऐसा करने से कैनवास taints। एक बार कैनवास को दबाने के बाद, आप अब कैनवास से डेटा वापस खींच नहीं सकते हैं। उदाहरण के लिए, अब आप canvas toBlob(), toDataURL(), या getImageData() विधियों का उपयोग नहीं कर सकते हैं; ऐसा करने से सुरक्षा त्रुटि फेंक जाएगी।

तो, ऐसा लगता है कि आपको ऐसा करने की कोशिश करने से पहले प्रश्न में कोड को होस्ट करने वाले व्यक्ति के रूप में उसी मूल/डोमेन से छवि को प्रॉक्सी करना होगा, कम से कम IE10 और Opera के लिए।

उन ब्राउज़रों से निपटने के लिए जिनके पास छवियों के लिए सीओआरएस समर्थन नहीं है, आपको छवि सर्वर-पक्ष को प्रॉक्सी करना होगा। आप छवि के स्रोत को अपने स्थानीय सर्वर पर ज्ञात एंडपॉइंट पर भेजकर और क्वेरी पैरामीटर के रूप में छवि के स्रोत यूआरएल में गुजरकर इसे आसानी से कर सकते हैं।

उदाहरण के लिए:

var sourceImageUrl = "https://www.google.com/images/srpr/logo4w.png", 
    localProxyEndpoint = "/imageproxy", 
    image = new Image(); 

image.src = localProxyEndpoint + "?source=" + encodeURIComponent(sourceImageUrl); 

अब, सर्वर साइड, तो आप इस GET अनुरोध, संभाल लेंगे URI से source पैरामीटर का मान बंद चीर, स्रोत से छवि हड़पने, और इसे वापस आपकी प्रतिक्रिया में

Answer 2

दुर्भाग्यवश, आईई 10 अभी भी एकमात्र लोकप्रिय ब्राउज़र बना हुआ है जो सीओआरएस हेडर सही ढंग से सेट होने पर भी कैनवास के लिए खींची गई छवि के लिए सीओआरएस का समर्थन नहीं करता है। लेकिन वहाँ भी सर्वर साइड पर छवि को प्रॉक्सी के बिना कि XMLHttpRequest के माध्यम से के लिए समाधान नहीं है:

var xhr = new XMLHttpRequest(); 
xhr.onload = function() { 
    var url = URL.createObjectURL(this.response); 
    img.src = url; 

    // here you can use img for drawing to canvas and handling 

    // don't forget to free memory up when you're done (you can do this as soon as image is drawn to canvas) 
    URL.revokeObjectURL(url); 
}; 
xhr.open('GET', url, true); 
xhr.responseType = 'blob'; 
xhr.send();