将画布的一小部分转换为png

Question

我使用以下代码将html5画布转换为png:

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

我添加了什么,所以它只会抓住左上角150x100像素,而不是整个画布？

Answer 1

创建一个150x100像素的第二个画布,抓住当前画布的左上角并将其绘制成drawImage(),然后调用toDataURL()新画布:

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+'"/>');