Uint 钳位数组到数据 url

Question

我想获取 Base 64 数据 url 格式的 canvas 的一部分，这些数据将发送到我的 api 因为这是我正在使用 ctx.getImageData() 方法，它是 returning 一个固定的 uint 8 数组 这是代码：

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

我尝试了很多 btoa 方法，但是要么 return 一个充满 A 的损坏数组，要么一个包含很多 /

的损坏数组

Answer 1

您可以使用 canvas.toDataURL(type, encoderOptions) 来达到这个目的。

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

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