Uint 钳制数组到数据 url

【问题标题】：Uint clamped array to data urlUint 钳制数组到数据 url
【发布时间】：2022-01-11 17:01:57
【问题描述】：

我想获取 base 64 数据 url 格式的画布的一部分，它将被发送到我的 api 为此，我正在使用 ctx.getImageData() 方法，该方法返回一个固定的 uint 8 数组这是代码：

        const data = ctx.getImageData(mousex, mousey, mousex1, mousey1);
        const clamped = data.data
}

我尝试了许多 btoa 方法，但要么返回一个充满 A 的损坏数组，要么返回一个带有很多 / 的损坏数组

【问题讨论】：

【解决方案1】：

您可以为此使用canvas.toDataURL(type, encoderOptions)。

首先提取源图像的一部分。你不需要 getImageData() 。而是使用part_canvas = document.createElement("canvas") 创建第二个画布，此画布不必在页面上可见。
为其指定要提取的部分的大小 .width 和 .height
part_ctx = part_canvas.getContext("2d") 在画布上
然后part_ctx.drawImage(source_image, part_x, part_x, part_width, parth_height, 0, 0, part_width, parth_height); 这将获取源图像的矩形区域并将其放入不可见画布中。
最后你可以part_canvas.toDataURL() 并且你有数据URL

没有测试。但我认为这应该可行。

【讨论】：