图像到画布/ HTML5转换

是否有用于自动将典型图像格式（png，bmp，jpg/gif甚至）自动转换为Canvas/HTML5的软件/服务？图像到画布/ HTML5转换

2010-06-11 ina

你不需要任何转换，只是

canvas.drawImage(image, dx, dy) 
canvas.drawImage(image, dx, dy, dw, dh) 
canvas.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

（从here拍摄）使用图像（通过URL或DOM任何一个新的）。

请参阅developer.mozilla.org的教程。

来源

2010-06-11 10:47:52 mkluwe

S /帆布/背景 – 2011-06-05 06:51:35

什么，如果你想使用操纵画布上的图像的像素数据？ – ina 2011-07-11 09:41:50

这里是一个工具，将生成的JavaScript代码在画布上绘制的图像：http://lab.abhinayrathore.com/img2canvas/

来源

2011-06-30 14:05:23 Abhinay

感谢您回答OP的问题。这个页面上的其他答案是无关紧要的。 – 2012-02-22 16:53:10

这个工具可以完成这项工作，但它也是非常低效的。它为每个像素做一个fillRect，并且根本不识别连续的线或框，更少的圆或其他形状。 – 2013-04-04 19:15:08

您可以使用上面列出的网站，但这里是有关的代码：

function convertImage(canvas, callback) { 
var image = new Image(); 
image.onload = function(){ 
callback(image); 
} 
image.src = canvas.toDataURL("image/png"); 
}

另外，我放在一起working jsfiddle demo。

来源

2014-04-29 17:17:01

这将画布转换为图像，但问题是将图像转换为画布。 – 2015-11-05 10:09:19

 <!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>

来源

2014-07-04 11:52:31

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); 
};

来源

2016-10-06 10:28:58 Savaratkar

图像到画布/ HTML5转换

回答

相关问题