将画布的一小部分转换为PNG格式。

Question

我使用以下代码将我的 HTML5 画布转换为 PNG 图像：

```javascript var canvas = document.getElementById('myCanvas'); var img = canvas.toDataURL("image/png"); ```

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

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

- Matt Coady

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

- robertc

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();

- lonesomeday

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

- Jake Thakur