context.getImageData() ऑपरेशन असुरक्षित है

Question

मैं HTML5 कैनवास के लिए एक सरल ग्रेस्केल फ़िल्टर का एहसास करना चाहता हूं, लेकिन मैं छवि डेटा को पिक्सल के रूप में नहीं ले सकता। मुझे एफएफ और क्रोम से सुरक्षा चेतावनी मिलती है। अंत में फ़िल्टर छवि ग्रे नहीं बनाता है।

JS FIDLE CODE

js:

var canvas = document.getElementById('canvas');  
var context = canvas.getContext('2d'); 

var image = new Image(); 
image.onload = function() { 
    if (image.width != canvas.width) 
    canvas.width = image.width; 
    if (image.height != canvas.height) 
    canvas.height = image.height; 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.drawImage(image, 0, 0, canvas.width, canvas.height); 
    var imageData = context.getImageData(0, 0, canvas.width, canvas.height); 
    filter(imageData); 
    context.putImageData(imageData, 0, 0); 
} 
image.src = "http://i0.gmx.net/images/302/17520302,pd=2,h=192,mxh=600,mxw=800,w=300.jpg"; 

function filter(imageData){ 
var d = imageData.data; 
    for (var i = 0; i < d.length; i += 4) { 
    var r = d[i]; 
    var g = d[i + 1]; 
    var b = d[i + 2]; 
    d[i] = d[i + 1] = d[i + 2] = (r+g+b)/3; 
    } 
return imageData; 
} 

Answer 1

यह एक सुरक्षा सुविधा है। W3 से:

getImageData(sx, sy, sw, sh) विधि चाहिए, कैनवास तत्व के मूल-साफ ध्वज गलत पर सेट है, तो एक SecurityError अपवाद

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

• तत्व के 2D प्रसंग के drawImage() विधि एक HTMLImageElement या एक HTMLVideoElement जिसका मूल एक ही दस्तावेज़ उद्देश्य यह है कि मालिक के रूप में नहीं है के साथ कहा जाता है कैनवास तत्व।

• तत्व की 2 डी संदर्भ की drawImage() विधि को HTMLCanvasElement के साथ बुलाया जाता है जिसका मूल-साफ़ ध्वज झूठा है।

• तत्व के 2D प्रसंग के फ़िलस्टाइल विशेषता एक CanvasPattern वस्तु एक HTMLImageElement से बनाया गया था कि करने के लिए सेट या है एक HTMLVideoElement जिसका मूल जब पैटर्न बनाया गया था दस्तावेज़ उद्देश्य यह है कि कैनवास तत्व का मालिक की तरह ही नहीं था ।

• तत्व का 2 डी संदर्भ की fillStyle विशेषता एक कैनवासपटल ऑब्जेक्ट पर सेट की गई है जो HTMLCanvasElement से बनाया गया था जिसका पैटर्न-निर्माण के दौरान मूल-साफ़ ध्वज झूठा था।

• तत्व के 2D प्रसंग के strokeStyle विशेषता एक CanvasPattern वस्तु एक HTMLImageElement से बनाया गया था कि करने के लिए सेट या है एक HTMLVideoElement जिसका मूल जब पैटर्न बनाया गया था दस्तावेज़ उद्देश्य यह है कि कैनवास तत्व का मालिक की तरह ही नहीं था ।

• तत्व का 2 डी संदर्भ का स्ट्रोक स्टाइल विशेषता एक कैनवासपटल ऑब्जेक्ट पर सेट की गई है जो HTMLCanvasElement से बनाया गया था जिसका पैटर्न-निर्माण के दौरान मूल-साफ़ ध्वज झूठा था।

• तत्व के 2D प्रसंग के fillText() या strokeText() पद्धतियों लागू और एक मूल है कि दस्तावेज़ उद्देश्य यह है कि कैनवास तत्व का मालिक के रूप में ही नहीं दे रहा है कि एक फ़ॉन्ट का उपयोग कर खत्म कर रहे हैं।

Source