এইচটিএমএল 5 ক্যানভাসে একটি এসভিজি ফাইল অঙ্কন

Question

এইচটিএমএল 5 ক্যানভাসে কোনও এসভিজি ফাইল আঁকার কোনও ডিফল্ট উপায় আছে? গুগল ক্রোম এসভিজিকে একটি চিত্র হিসাবে লোড করা সমর্থন করে (এবং কেবল ব্যবহার করে drawImage) তবে বিকাশকারী কনসোল এটি সতর্ক করে resource interpreted as image but transferred with MIME type image/svg+xml।

আমি জানি যে এসভিজিকে ক্যানভাস কমান্ডে রূপান্তর করা (যেমন এই প্রশ্নের মতো ) সম্ভব হবে তবে আমি আশা করছি যে এটির প্রয়োজন নেই। আমি পুরানো ব্রাউজারগুলির বিষয়ে চিন্তা করি না (সুতরাং যদি ফায়ারফক্স 4 এবং আই 9 কিছু সমর্থন করে, তবে এটি যথেষ্ট ভাল)।

Comments

এই প্রশ্নের উত্তর একটি লাইভ ডেমো স্ট্যাকওভারফ্লো.com

— ড্রউ লেসুইউর

Answer 1

সম্পাদনা 16 ডিসেম্বর, 2019

পাথ 2 ডি এখন সমস্ত বড় ব্রাউজার দ্বারা সমর্থিত

সম্পাদনা নভেম্বর 5, 2014

আপনি এখন ctx.drawImageএইচটিএমএলআইমেজ উপাদানগুলি আঁকতে ব্যবহার করতে পারেন যার কয়েকটিতে .svg উত্স রয়েছে তবে সমস্ত ব্রাউজার নেই । ক্রোম, আইই ১১ এবং সাফারি কাজ করে, ফায়ারফক্স কিছু বাগের সাথে কাজ করে (তবে রাতের বেলা সেগুলি স্থির করে নিয়েছে)।

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";

লাইভ উদাহরণ এখানে । আপনার ক্যানভাসে একটি সবুজ স্কোয়ার দেখা উচিত। পৃষ্ঠার দ্বিতীয় সবুজ বর্গক্ষেত্র একই<svg> রেফারেন্সের জন্য ডিওমে sertedোকানো উপাদান।

এসভিজি (স্ট্রিং) পাথ আঁকতে আপনি নতুন প্যাথ 2 ডি অবজেক্টগুলিও ব্যবহার করতে পারেন। অন্য কথায়, আপনি লিখতে পারেন:

var path = new Path2D('M 100,100 h 50 v 50 h 50');
ctx.stroke(path);

এখানে এর লাইভ উদাহরণ।

---

পুরাতন উত্তর উত্তর:

নেটিভ কিছুই নেই যা আপনাকে ক্যানভাসে স্থানীয়ভাবে এসভিজি পাথ ব্যবহার করতে দেয়। আপনার নিজের জন্য নিজেকে রূপান্তর করতে হবে বা একটি গ্রন্থাগার ব্যবহার করতে হবে।

আমি ক্যানভিজে সন্ধান করার পরামর্শ দেব:

http://code.google.com/p/canvg/

http://canvg.googlecode.com/svn/trunk/examples/index.htm

Comments

কেন এটি প্রয়োজন? এসভিজি ন্যায়বিচারের সাথে একটি ক্যানভাসে পুরোপুরি আঁকবে বলে মনে হচ্ছে drawImage। তবে আমি এখনও সেই সতর্কতা পেয়েছি। এটা কোথা থেকে এসেছে?

— শুশ করুন

সাইমন, আপনি যা বলছেন তা সঠিক নয়। এবং দ্বিতীয়ত, এটি ক্রোমের একটি নিশ্চিত বাগ।

— ম্যাথিয়াস লাইককেগার্ড লরেঞ্জেন

উইকিমিডিয়া আপনাকে এসভিজি ব্যবহার করে পছন্দ করে না বলে মনে হয়। আমি পাওয়া প্রথম উপলব্ধ এসভিজি হিসাবে আমি স্ন্যাপসভিগ.আইও / এসেটস / আইমেজস / লগো.এসভিগিতে সন্ধান করেছি। এফএফ-এ কাজ করেছেন। jsfiddle.net/Na6X5/331

— টমাস

এটি করার জন্য আপনি ডেটা ইউআরআইও

— সুইভেল

দ্রষ্টব্য: দীর্ঘদিন ধরে থাকা ফায়ারফক্স বাগের কারণে, দুঃখের বিষয়, এমন যেসব ব্লগগুলির প্রস্থ এবং উচ্চতা ট্যাগের অভাব রয়েছে সেগুলি ক্যানভাসে মোটেও রেন্ডার করতে পারে না। এছাড়াও, প্রস্থ এবং উচ্চতা অবশ্যই শতাংশে থাকতে হবে না।

— হেটোরু হ্যানসু

Answer 2

দুঃখিত, @ ম্যাটিস জবাব সম্পর্কে মন্তব্য করার মতো যথেষ্ট খ্যাতি আমার নেই, তবে যদি এসভিজি এর চিত্রটি বেস 64 এও থাকে তবে এটি আউটপুটে আঁকা হবে।

ডেমো:

var svg = document.querySelector('svg');
var img = document.querySelector('img');
var canvas = document.querySelector('canvas');

// get svg data
var xml = new XMLSerializer().serializeToString(svg);

// make it base64
var svg64 = btoa(xml);
var b64Start = 'data:image/svg+xml;base64,';

// prepend a "header"
var image64 = b64Start + svg64;

// set it as the source of the img element
img.onload = function() {
    // draw the image onto the canvas
    canvas.getContext('2d').drawImage(img, 0, 0);
}
img.src = image64;

svg, img, canvas {
  display: block;
}

SVG

<svg height="40">
  <rect width="40" height="40" style="fill:rgb(255,0,255);" />
  <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAEX0lEQVQ4jUWUyW6cVRCFv7r3/kO3u912nNgZgESAAgGBCJgFgxhW7FkgxAbxMLwBEmIRITbsQAgxCEUiSIBAYIY4g1EmYjuDp457+Lv7n+4tFjbwAHVOnVPnlLz75ht67OhhZg/M0p6d5tD9C8SNBBs5XBJhI4uNLC4SREA0UI9yJr2c4e6QO+v3WF27w+rmNrv9Pm7hxDyHFg5yYGEOYxytuRY2SYiSCIwgRgBQIxgjEAKuZWg6R9S0SCS4qKLZElY3HC5tp7QPtmlMN7HOETUTXBJjrEGsAfgPFECsQbBIbDGJZUYgGE8ugQyPm+o0STtTuGZMnKZEjRjjLIgAirEOEQEBDQFBEFFEBWLFtVJmpENRl6hUuFanTRAlbTeZarcx0R6YNZagAdD/t5N9+QgCYAw2jrAhpjM3zaSY4OJGTDrVwEYOYw2qioigoviq5MqF31m9fg1V5fCx+zn11CLNVnufRhBrsVFE1Ihpthu4KDYYwz5YQIxFBG7duMZnH31IqHL6wwnGCLFd4pez3/DaG2/x4GNPgBhEZG/GGlxkMVFkiNMYay3Inqxed4eP33uf7Y0uu90xWkGolFAru7sZn5w5w921m3u+su8vinEO02hEWLN/ANnL2rkvv2an2yd4SCKLM0JVBsCgAYZZzrnPP0eDRzXgfaCuPHXwuEYjRgmIBlQVVLl8/hKI4fRzz3L6uWe5+PMvnHz6aa4uX+D4yYe5vXaLH86eoyoLjLF476l9oKo9pi5HWONRX8E+YznOef7Vl1h86QWurlwjbc+QpikPPfoIcZLS39pmMikp8pzae6q6oqgriqrGqS+xeLScoMYSVJlfOMTl5RXW1+5w5fJVnFGWf1/mxEMnWPppiclkTLM5RdJoUBYFZVlQ5DnZMMMV167gixKLoXXsKGqnOHnqOJ/+/CfZ+XUiZ0jTmFv5mAvf/YjEliQ2vPD8Ir6qqEcZkzt38cMRo5WruFvfL9FqpyRxQhj0qLOax5I2S08+Tu/lFiGUGOPormxwuyfMnjrGrJa88uIixeYWl776lmrzNjmw8vcG8sU7ixpHMXFsCUVg9tABjEvRgzP82j7AhbyiX5Qcv2+Bvy7dYGZ1k7efeQB/Y4PBqGBtdYvb3SFzLcfqToZc/OB1zYeBSpUwLBlvjZidmWaSB1yaYOfn6LqI/r0hyU6P+cRSlhXjbEI2zvnt7y79oqQ3qeg4g6vKjCIXehtDmi6m0UnxVnCRkPUHVNt9qkLJxgXOCYNOg34v48raPaamU2o89/KKsQ9sTSpc0JK7NwdcX8s43Ek5cnSOLC/Z2R6Rj0ra0w2W1/t0xyWn51uk2Ri1QtSO6OU5d7OSi72cQeWxKG7p/Dp//JXTy6C1Pcbc6DMpPRtjTxChEznWhwVZUCKrjCrPoPDczHLmnLBdBgZlRRWUEBR3ZKrme5TlrTGlV440Y1IrXM9qQGi6mkG5V6uza7tUIeCDElTZ1L26elX+fcH/ACJBPYTJ4X8tAAAAAElFTkSuQmCC" height="20px" width="20px" x="10" y="10"></image>
</svg>
<hr/><br/>

IMAGE
<img/>
<hr/><br/>
   
CANVAS
<canvas></canvas>
<hr/><br/>

Comments

হরফ একই জিনিস, তারা এসভিজিতে

— স্পিনহক্সিক্সএক্স

আপনি imgট্যাগগুলির মধ্যে পুনরাবৃত্তি করতে সক্ষম হতে পারেন svg, এবং কেবল আলাদাভাবে পরে ক্যানভাসে চিত্রগুলি আঁকতে পারবেন।

— ভাগ্যডায়োন্ড

Answer 3

আপনি svgক্যানভাসে সহজেই এর মাধ্যমে অঙ্কন করতে পারেন :

1. বেস 64৪ ফর্ম্যাটে একটি চিত্রকে এসভিগির উত্স নির্ধারণ করা
2. একটি ক্যানভাসে চিত্র অঙ্কন করা হচ্ছে

দ্রষ্টব্য: পদ্ধতির একমাত্র অপূর্ণতা এটি যে এমবেড থাকা চিত্রগুলি আঁকতে পারে না svg। (ডেমো দেখুন)

প্রদর্শন:

(নোট করুন যে এমবেড করা চিত্রটি কেবলমাত্র এতে দৃশ্যমান svg)

var svg = document.querySelector('svg');
var img = document.querySelector('img');
var canvas = document.querySelector('canvas');

// get svg data
var xml = new XMLSerializer().serializeToString(svg);

// make it base64
var svg64 = btoa(xml);
var b64Start = 'data:image/svg+xml;base64,';

// prepend a "header"
var image64 = b64Start + svg64;

// set it as the source of the img element
img.src = image64;

// draw the image onto the canvas
canvas.getContext('2d').drawImage(img, 0, 0);

svg, img, canvas {
  display: block;
}

SVG

<svg height="40">
  <rect width="40" height="40" style="fill:rgb(255,0,255);" />
  <image xlink:href="https://en.gravatar.com/userimage/16084558/1a38852cf33713b48da096c8dc72c338.png?size=20" height="20px" width="20px" x="10" y="10"></image>
</svg>
<hr/><br/>

IMAGE
<img/>
<hr/><br/>
   
CANVAS
<canvas></canvas>
<hr/><br/>

Comments

আপনার উল্লেখ করা সমস্যাটি সমাধান করার কোনও উপায় আছে কি? ছবিটি এসজিজে এমবেড করা হয়েছে।

— বিজয় বাসকারন

দুঃখিত, তবে এমবেড থাকা চিত্র সমস্যার সমাধান আমি পাইনি।

— ম্যাতিস

ঠিক আছে. ধন্যবাদ মাত্যস :)

— বিজয় বাসকারন

Answer 4

মজিলার ক্যানভাসে এসভিজি আঁকার একটি সহজ উপায় যা "ক্যানভাসে ডিওএম অবজেক্ট আঁকুন " বলে

Comments

@ সাইমন এর প্রথম পদ্ধতির মতো এটির একই হ্রাস রয়েছে: ফায়ারফক্স, ক্রোম ঠিক আছে তে কাজ করে না।

— আমেরিকান

আপনার লিঙ্কটি আর কাজ করে না। আমি এখনও মজিলা পথে আগ্রহী

— আলিরিজাক

Answer 5

সাইমন উপরে যেমনটি বলেছেন, আঁকার চিত্র ব্যবহার করে কাজ করা উচিত নয়। তবে, ক্যানভিগ লাইব্রেরি এবং:

var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);

এটি সাইমন উপরে প্রদত্ত লিঙ্কটি থেকে এসেছে, যার মধ্যে বেশ কয়েকটি অন্যান্য প্রস্তাবনা রয়েছে এবং এটি উল্লেখ করে যে আপনি লিঙ্ক করতে চান, বা canvg.js এবং rgbcolor.js ডাউনলোড করতে চান। এটি আপনাকে জাভাস্ক্রিপ্ট ফাংশনগুলির মধ্যে, ইউআরএল এর মাধ্যমে অথবা এসভিজি ট্যাগগুলির মধ্যে ইনলাইন এসভিজি কোড ব্যবহার করে কোনও এসভিজি হেরফের এবং লোড করতে দেয়।