图像到画布 / HTML5 转换 [关闭]
Posted
技术标签:
【中文标题】图像到画布 / HTML5 转换 [关闭]【英文标题】：Image to Canvas / HTML5 Conversion [closed] 【发布时间】：2011-03-02 14:39:57 【问题描述】：是否有用于将典型图像格式（png、bmp、jpg/gif 甚至）自动转换为 Canvas/html5 的软件/服务？
【问题讨论】：
【参考方案1】：这是一个工具，它会生成 javascript 代码以在画布上绘制图像：http://lab.abhinayrathore.com/img2canvas/
【讨论】：
感谢您实际回答 OP 的问题。此页面上的其他答案无关紧要。 这个工具可以完成这项工作，但它也确实效率低下。它为每个像素做一个填充矩形，根本不识别连续的线或框，更不用说圆形或其他形状了。【参考方案2】：您不需要任何转换，只需使用图片（通过 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)
（取自here）。
请参阅developer.mozilla.org 上的教程。
【讨论】：
如果要使用canvas来操作图片的像素数据怎么办？【参考方案3】：您可以使用上面列出的网站，但这里是相关代码：
function convertImage(canvas, callback)
var image = new Image();
image.onload = function()
callback(image);
image.src = canvas.toDataURL("image/png");
另外，我整理了一个working jsfiddle demo。
【讨论】：
这会将画布转换为图像，但问题是将图像转换为画布。【参考方案4】：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);
;
【讨论】：
【参考方案5】： <!DOCTYPE HTML>
<html>
<head>
<style>
body
margin: 0px;
padding: 0px;
</style>
</head>
<body>
<canvas id="myCanvas" ></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>
【讨论】：
【参考方案6】：Inkscape 实际上可以将文件保存为 HTML5 Canvas 格式。已针对 SVG 进行测试。
【讨论】：
以上是关于图像到画布 / HTML5 转换 [关闭]的主要内容，如果未能解决你的问题，请参考以下文章
无法使用 Konva 将 PDF 图像作为图像对象加载到 HTML5 画布中
如何使用 Phonegap 将图像加载到 HTML5 画布上