7
कैनवास/एचटीएमएल 5 में एक सामान्य छवि प्रारूप (पीएनजी, बीएमपी, जेपीजी/जीआईएफ) के स्वचालित रूपांतरण के लिए सॉफ्टवेयर/सेवाएं हैं?कैनवास/एचटीएमएल 5 रूपांतरण
A
उत्तर
9
आप कोई रूपांतरण की जरूरत नहीं है, बस छवि (या तो यूआरएल या डोम में किसी भी एक के बाद नया) द्वारा
canvas.drawImage(image, dx, dy)
canvas.drawImage(image, dx, dy, dw, dh)
canvas.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
(here से लिया गया) का उपयोग करें।
developer.mozilla.org पर ट्यूटोरियल देखें।
12
यहाँ एक उपकरण है जो कैनवास पर छवि आकर्षित करने के लिए जावा स्क्रिप्ट कोड उत्पन्न होगा है: http://lab.abhinayrathore.com/img2canvas/
+2
वास्तव में ओपी के प्रश्न का उत्तर देने के लिए धन्यवाद। इस पृष्ठ पर अन्य उत्तर अप्रासंगिक हैं। –
+1
यह टूल नौकरी करता है, लेकिन यह वास्तव में भी अक्षम है। यह प्रत्येक पिक्सेल के लिए एक fillRect करता है और निरंतर लाइनों या बक्से को बहुत कम सर्किल या अन्य आकारों को नहीं पहचानता है। –
1
आप ऊपर सूचीबद्ध साइट का उपयोग कर सकते हैं, लेकिन यहां प्रासंगिक कोड है:
function convertImage(canvas, callback) {
var image = new Image();
image.onload = function(){
callback(image);
}
image.src = canvas.toDataURL("image/png");
}
इसके अलावा, मैं एक working jsfiddle demo एक साथ रखो।
+1
यह एक कैनवास को एक छवि में परिवर्तित करता है, लेकिन सवाल एक छवि को कैनवास में परिवर्तित करना था। –
0
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// draw cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = '#0000ff';
context.stroke();
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
</script>
</body>
</html>
1
w3school जवाब है: http://www.w3schools.com/tags/canvas_drawimage.asp
window.onload = function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
};
एस/कैनवास/संदर्भ –
क्या हुआ अगर आप कैनवास का उपयोग कर छवि के पिक्सेल डेटा में हेरफेर करना चाहते हैं? – ina