HTML5 कैनवास के लिए बेस 64 पीएनजी डेटा

मैं आधारभूत रूप से एन्कोडेड PNG छवि को कैनवास तत्व पर लोड करना चाहता हूं। मेरे पास यह कोड है:

<html>
<head>
</head>
<body>
<canvas id="c"></canvas>
<script type="text/javascript">

var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

data =  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC";

ctx.drawImage(data, 0, 0);

</script>
</body>
</html>

Chrome 8 में मुझे त्रुटि मिली: Uncaught TypeError: Type error

और फ़ायरफ़ॉक्स के फ़ायरबग में यह है: "ऑब्जेक्ट का प्रकार असंगत है जिस प्रकार के पैरामीटर को ऑब्जेक्ट से जुड़ा हुआ है" कोड: "17"

उस बेस 64 में 5x5px काला पीएनजी वर्ग है जिसे मैंने जीआईएमपी में बनाया है और इसे जीएनयू / लिनक्स के प्रोग्राम बेस 64 में बेस 64 में बदल दिया है।

— टॉमस नेस्रोवनल
स्रोत

जवाबों:

170

इसके द्वारा आप वास्तव में एक छवि वस्तु की तरह drawImage पारित करने की आवश्यकता है

var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

var image = new Image();
image.onload = function() {
  ctx.drawImage(image, 0, 0);
};
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC";

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

स्निपेट का विस्तार करें

मैंने इसे क्रोम में आज़माया है और यह ठीक काम करता है।

— Jerryf
स्रोत

अच्छा जवाब, लेकिन क्या आपको यकीन है कि यह हर बार काम करता है? मुझे यह पता चला कि छवि सेट करने के तुरंत बाद एक छवि बनाना संभव है src, क्योंकि आपको onloadयह सुनिश्चित करने के लिए कॉलबैक का उपयोग करना है कि छवि लोड हो रही है। मेरे 50% परीक्षण विफल रहे क्योंकि छवि ने लोडिंग समाप्त नहीं की थी।

— स्कॉट रिपे

वाह! अतीत से विस्फोट :)। तुम काफी सही हो। यदि आप ड्रॉइमेज को कॉल कर रहे हैं, तो आपके द्वारा छवि के src को सेट करने के ठीक बाद, जो आपको समस्याओं में चलेगा और आपकी स्थिति के आधार पर आप संभवतः यह सुनिश्चित करने के लिए ऑनलोड का उपयोग करना चाहेंगे कि रेंडर करने के प्रयास से पहले छवि वास्तव में भरी हुई है। यह कैनवास के लिए। उपरोक्त कोड सिर्फ एक उदाहरण था जो दिखा रहा था कि ड्राइमेज को वास्तव में एक इमेज ऑब्जेक्ट की आवश्यकता होती है और इसे कैसे पास करना है।

— जेरीफ सेप

एक नोट के रूप में, यदि आप कई कैनवस पर लूप कर रहे हैं, तो आप इसे बदलना चाह सकते हैं ctx.drawImage(this,0,0);ताकि यह सुनिश्चित हो सके कि इमेज वेरिएबल सही इमेज को संदर्भित करता है। हालांकि महान जवाब!

— डॉरमहाउस नोव

Onload घटना को src से पहले सेट किया जाना चाहिए। कभी-कभी src को तुरंत लोड किया जा सकता है और कभी भी onload इवेंट को फायर नहीं किया जा सकता है

— Totty.js

लेकिन, अगर data:image/लंबाई बड़ी है , तो हमें मिलेगा414 (Request-URI Too Long

— सरथ

जेरीफ का जवाब ठीक है, एक दोष के अलावा।

Onload घटना को src से पहले सेट किया जाना चाहिए। कभी-कभी src को तुरंत लोड किया जा सकता है और कभी भी ऑनलोड घटना को फायर नहीं किया जा सकता है।

(टोटी की तरह। जज ने बताया।)

var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

var image = new Image();
image.onload = function() {
    ctx.drawImage(image, 0, 0);
};
image.src = "data:image/  png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC";

— जॉन
स्रोत

Btw: मैंने जेरीफ के जवाब को संपादित किया, लेकिन किसी ने इसे अस्वीकार कर दिया। यह जेरीफ नहीं हो सकता था, जैसा कि उसकी प्रोफाइल कहती है कि वह आखिरी बार 2014 में लॉग इन हुआ था।

— जॉन

"कभी-कभी src को तुरंत लोड किया जा सकता है और कभी भी ऑनलोड घटना को फायर नहीं किया जा सकता है।" मुझे लगता है कि इस की घटना लगभग कभी नहीं होने के लिए अत्यंत दुर्लभ है, लेकिन इसका कोई कारण नहीं है कि इसे onloadपहले से सेट करने की आदत नहीं है src... मुझे ऐसा करने की आदत है।

— मार्क

@मार्क यह दुर्लभ नहीं है। यह हर समय होगा जब ब्राउज़र छवि को कैश करता है, उदाहरण के लिए ब्राउज़र रीलोड पर। यह एक IE इंजन में c ++ प्रोग्राम में हुआ।

— स्टीफन रीन