javascript - 将画布的一小部分转换为 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+'"/>');

Answer 2

做到这一点的方法是使用另一个canvas元素来获得你想要的区域，然后裁剪它。

var canvas      = document.getElementById('mycanvas'),
    smallcanvas = document.createElement('canvas'),
    imagedata   = '';

smallcanvas.getContext('2d').drawImage(canvas, 0, 0, null, null, 0, 0, 150, 100);
imagedata = smallcanvas.toDataURL();

Answer 3

对于想要获取初始画布的任何子部分并将其转换为 png 的任何人，@robertc 代码的以下修改对我有用：

let canvas = document.getElementById("mycanvas");
let saveCanvas = document.createElement('canvas');
saveCanvas.width = 150; // width of saved image
saveCanvas.height = 100; // height of saved image
let cropStartX = 0; // position to start cropping image
let cropStartY = 0;
saveCanvas.getContext('2d').drawImage(canvas, cropStartX, cropStartY, saveCanvas.width, saveCanvas.height, 0, 0, saveCanvas.width, saveCanvas.height);
var img = new_canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');