Question

我创建了一个大小为1240x3500的画布。

我需要将其转换为一对图片。即，从(0,0)到(1240,1750)以及从(0,1751)到(1240,3500)。

是否可以使用toDataURL()实现此目的，还是有任何其他功能来建立这个？

Answer 1

没有开箱即用的方法。好消息是制作起来非常简单：

创建一个区域大小的新（离屏）画布
将原始图像的一部分剪切成新画布
在新画布上调用toDataURL（）

一种方式：

function regionToUri(canvas, x, y, w, h) {

    var ncanvas = document.createElement('canvas'), // create new canvas
        ctx = ncanvas.getContext('2d');

    ncanvas.width = w;                              // set it to target size
    ncanvas.height = h;

    ctx.drawImage(canvas, x, y, w, h, 0, 0, w, h);  // use region draw

    return ncanvas.toDataURL();                     // return data-uri
}

如果您需要其他格式而不是PNG，则修改return语句（或者更好，也为此提供参数）。

var dataURI = regionToUri(originalCanvas, x, y, w, h);

注意：为此，原始图像必须满足CORS要求。

画布到多个图像

1 个答案: