Ảnh để chuyển đổi Canvas/HTML5

Có phần mềm/dịch vụ để tự động chuyển đổi định dạng hình ảnh thông thường (png, bmp, jpg/gif) thành Canvas/HTML5 không?Ảnh để chuyển đổi Canvas/HTML5

Nguồn

2010-06-11 ina

Bạn không cần phải không có chuyển đổi, chỉ cần sử dụng hình ảnh (hoặc mới bằng url hoặc bất kỳ một trong DOM) bởi

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

(lấy từ here).

Xem hướng dẫn trên developer.mozilla.org.

Nguồn

2010-06-11 10:47:52 mkluwe

s/vải/bối cảnh –

gì xảy ra nếu bạn muốn thao tác dữ liệu pixel của hình ảnh bằng vải? – ina

Dưới đây là một công cụ mà sẽ tạo ra mã JavaScript để vẽ hình ảnh trên vải: http://lab.abhinayrathore.com/img2canvas/

Nguồn

2011-06-30 14:05:23 Abhinay

Cảm ơn bạn đã thực sự trả lời câu hỏi của OP. Các câu trả lời khác trên trang này không liên quan. –

Công cụ này thực hiện công việc, nhưng nó cũng thực sự không hiệu quả. Nó thực hiện fillRect cho mỗi pixel và không nhận ra các dòng hoặc hộp liên tục, ít hơn nhiều vòng tròn hoặc các hình dạng khác. –

Bạn có thể sử dụng các trang web liệt kê ở trên, nhưng ở đây là mã có liên quan:

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

Ngoài ra, tôi đặt cùng một số working jsfiddle demo.

Nguồn

2014-04-29 17:17:01

Điều này chuyển đổi khung hình thành hình ảnh, nhưng câu hỏi là chuyển đổi hình ảnh thành canvas. –

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

Nguồn

2014-07-04 11:52:31

w3school có câu trả lời: 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); 
};

Nguồn

2016-10-06 10:28:58 Savaratkar

Ảnh để chuyển đổi Canvas/HTML5

Trả lời

Các vấn đề liên quan