圖像到畫布/ 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轉換

回答

相關問題