在Canvas中剪切图像

Question

我在Canvas中有图像。

const canvas = document.createElement('canvas')
canvas.width = 640
canvas.height = 480
const context = canvas.getContext('2d')
element.appendChild(canvas)
const imageData = context.createImageData(640, 480)
imageData.data.set(new Uint8ClampedArray(data.frame))
context.putImageData(imageData, 0, 0)

我收到数据（高度，宽度，x，y）。我想根据这些数据从画布中剪切图像并将其保存为blob文件。我怎样才能做到这一点？

Answer 1

你的问题不清楚。代码示例与问题描述不匹配。由于代码示例不起作用（未定义的变量data），我只能通过问题的描述。

我收到数据（高度，宽度，x，y）。我想根据这些数据从画布中剪切图像并将其保存为blob文件。我怎样才能做到这一点？

从图像切割

从画布上剪切矩形区域

function cutArea(fromImage, x, y, width, height) {
    const cut = document.createElement("canvas");
    cut.width = width;
    cut.height = height;
    const ctx = cut.getContext("2d");
    ctx.drawImage(fromImage, -x, -y);
    return cut;
}

您应该使用offscreenCanvas，但支持是有限的，所以如果您知道目标是什么，请添加它。创建一个offscreenCanvas剪切

function cutArea(fromImage, x, y, width, height) {
    const cut = new OffscreenCanvas(width, height);
    const ctx = cut.getContext("2d");
    ctx.drawImage(fromImage, -x, -y);
    return cut;
}

注意

• 像素比例不变并且没有边界检查。如果协调不在图像源上，则部分或全部切割图像可以是空的（0α）。
• fromImage可以是任何有效的图像源，包括画布。
• width和height必须> 0或函数将抛出错误。

下载

要将剪切下载到本地商店，请下载“image / png”图像文件。注意文件名可由用户在下载时更改。图像类型是默认的png。无法知道下载是否成功。

function downloadCut(cut, name) {
    const a = document.createElement("a");
    a.download = name + ".png"; 
    const download = blob => {
        const url = a.href = URL.createObjectURL(blob);
        a.dispatchEvent(new MouseEvent("click", {view: window, bubbles: true, cancelable: true})); 
        setTimeout(() => URL.revokeObjectURL(url), 1000); // clean up 
    }
    if (cut instanceof OffscreenCanvas) { cut.convertToBlob().then(download) }
    else { canvas.toBlob(download) }
}