HTML5 ক্যানভাসে বেস 64 পিএনজি ডেটা

আমি বেস 64 এ এনকোড করা একটি পিএনজি চিত্র ক্যানভাস উপাদানটিতে লোড করতে চাই। আমার এই কোডটি রয়েছে:

<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 এ পরিণত করেছি।

— টোম নেসরোভনাল
সূত্র

উত্তর:

172

এটির চেহারা অনুসারে আপনাকে অবশ্যই অঙ্কনটি পাস করতে হবে এটির মতো একটি চিত্র অবজেক্ট

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>

স্নিপেট প্রসারিত করুন

আমি ক্রোমে এটি চেষ্টা করেছি এবং এটি ঠিকঠাক কাজ করে।

— জেরিফ
সূত্র

উত্তম উত্তর, তবে আপনি কি নিশ্চিত যে এটি প্রতিবার কাজ করে? আমি সেটিংস স্থাপনের সাথে সাথেই একটি চিত্র আঁকতে বগী পেয়েছি srcকারণ onloadচিত্রটি লোড হওয়া শেষ হয়েছে তা নিশ্চিত করার জন্য আপনার কলব্যাক ব্যবহার করার কথা । আমার পরীক্ষার 50% ব্যর্থ হয়েছে কারণ চিত্রটি লোড করা শেষ করে নি।

— স্কট রিপ্পি

কি দারুন! অতীত থেকে বিস্ফোরণ :). আপনি বেশ সঠিক। আপনি যদি চিত্রের এসআরসি সেট করার ঠিক পরে ছবি আঁকেন তবে আপনি সম্ভবত সমস্যাগুলির মধ্যে চলে যাবেন এবং আপনার অবস্থার উপর নির্ভর করে আপনি সম্ভবত রেন্ডার করার চেষ্টা করার আগে চিত্রটি আসলে লোড হয়েছে কিনা তা নিশ্চিত করার জন্য আপনি সম্ভবত লোড ব্যবহার করতে চান এটা ক্যানভাসে। উপরের কোডটি কেবল উদাহরণের আরও একটি উদাহরণ ছিল যা চিত্রের চিত্রের জন্য আসলে একটি চিত্রের বিষয়বস্তুর প্রয়োজন হয় এবং এটি কীভাবে এটি পাস করতে হয়।

— জেরিফ

ঠিক যেমন একটি নোট, যদি আপনি বেশ কয়েকটি ক্যানভাসগুলি লুপ করছেন তবে আপনি এটিতে এটি পরিবর্তন করতে পারেন ctx.drawImage(this,0,0);যাতে এটি নিশ্চিত করে যে চিত্রের পরিবর্তনশীলটি সঠিক চিত্রটিকে বোঝায়। দুর্দান্ত উত্তর যদিও!

— অলস

অ্যানলোড লোড ইভেন্টটি এসআরসি-র আগে সেট করা উচিত। কখনও কখনও এসআরসি তাত্ক্ষণিকভাবে লোড করা যায় এবং কখনই

— ওভারলোড

তবে, data:image/দৈর্ঘ্য বড় হলে আমরা পাব414 (Request-URI Too Long

— সারাথ

জেরিফের উত্তর একটি ত্রুটি বাদে ঠিক আছে।

অ্যানলোড লোড ইভেন্টটি এসআরসি-র আগে সেট করা উচিত। কখনও কখনও এসআরসি তাত্ক্ষণিকভাবে লোড করা যায় এবং কখনই ওভারলোড ইভেন্টটি ফায়ার করা যায় না।

(Totty.js পছন্দ করে।)

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";

— জন
সূত্র

বিটিডব্লিউ: আমি জেরিফের উত্তর সম্পাদনা করেছি, তবে কেউ তা প্রত্যাখ্যান করেছে। এটি জেরিফ হতে পারে না, কারণ তার প্রোফাইল হিসাবে জানা গেছে যে তিনি সর্বশেষে ২০১৪ সালে লগইন করেছিলেন।

— জন

"কখনও কখনও এসআরসি তাত্ক্ষণিকভাবে লোড করা যায় এবং কখনই লোড ইভেন্টটি চালিত করে না" " আমি মনে করি এটির উপস্থিতি প্রায় কখনও বিরল, তবে এর onloadআগে সেট করার অভ্যাস না রাখার কোনও কারণ নেই src... আমি এটি অভ্যাস হিসাবে তৈরি করি।

— Marke

@markE এটি বিরল নয়। এটি সমস্ত সময় ঘটবে যখন ব্রাউজারটি চিত্রটি ক্যাশে করে, উদাহরণস্বরূপ একটি ব্রাউজার পুনরায় লোডে। এটি একটি সি ইঞ্জিনে ঘটেছিল একটি সি ++ প্রোগ্রামে।

— স্টেফান রেইন