javascript - 将 Canvas 的一小部分转换为 png

Question

我使用以下代码将我的 html5 Canvas 转换为 png:

var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');

我要添加什么才能让它只抓取左上角的 150x100 像素，而不是整个 Canvas ？

Answer 1

创建第二个 150x100 像素的 Canvas ，捕获当前 Canvas 的左上角并使用 drawImage() 绘制它，然后调用 toDataURL()新 Canvas :

var canvas = document.getElementById("mycanvas");
var new_canvas = document.createElement('canvas');
new_canvas.width = 150;
new_canvas.height = 100;
new_canvas..getContext('2d').drawImage(canvas, 150, 100);
var img = new_canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');