画布到多个图像

Canvas to Multiple Images

本文关键字：图像      更新时间：2023-09-26

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

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

是否可以使用 toDataURL() 来实现这一点，或者是否有任何其他功能来建立这一点？

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

  • 创建区域大小的新（屏幕外）画布
  • 将原始图像的一部分剪辑并绘制到新画布中
  • 在新画布上调用 DataURL（）

单程：

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 要求。

相关文章：