Html 图像到画布 / HTML5 转换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3022037/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image to Canvas / HTML5 Conversion
提问by ina
Are there software/services for automated conversion of a typical image format (png, bmp, jpg/gif even) to Canvas / HTML5?
是否有用于将典型图像格式（png、bmp、jpg/gif 甚至）自动转换为 Canvas/HTML5 的软件/服务？
回答by Abhinay
Here is a tool that will generate JavaScript code to draw the image on canvas: http://lab.abhinayrathore.com/img2canvas/
这是一个将生成 JavaScript 代码以在画布上绘制图像的工具：http: //lab.abhinayrathore.com/img2canvas/
回答by mkluwe
You don't need no conversion, just use the image (either new by url or any one in the DOM) by
您不需要任何转换，只需使用图像（新的 url 或 DOM 中的任何一个）
canvas.drawImage(image, dx, dy)
canvas.drawImage(image, dx, dy, dw, dh)
canvas.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
(taken from here).
（取自这里）。
See the tutorial on developer.mozilla.org.
回答by Dan H
You can use the site listed above, but here is the relevant code:
您可以使用上面列出的站点，但这里是相关代码：
function convertImage(canvas, callback) {
var image = new Image();
image.onload = function(){
callback(image);
}
image.src = canvas.toDataURL("image/png");
}
Also, I put together a working jsfiddle demo.
另外，我整理了一个有效的 jsfiddle demo。
回答by Savaratkar
w3school has the answer: http://www.w3schools.com/tags/canvas_drawimage.asp
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);
};
回答by Matti Haapam?ki
回答by Chetan Ghadiya
<!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>
