javascript - Uint 钳制数组到数据 url

Question

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

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

我尝试了很多 btoa 方法，但是要么返回一个完整的损坏数组，要么返回一个A包含很多 / 的损坏数组

Answer 1

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

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

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