Question

0

106

Views

Uint clamped array to data url

I want to get part of a canvas in the base 64 data url format which will be sent to my api for this is I am using the ctx.getImageData() method which is returning a clamped uint 8 array here is the code:

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

I have tried many btoa methods but the either return a broken array full of A or a broken array with a lot of /

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-09T03:47:38.027Z

You can use canvas.toDataURL(type, encoderOptions) for this purpose.

First extract the part of your source image. You don't need getImageData() for that. Instead create a second canvas with part_canvas = document.createElement("canvas"), this canvas doesnt have to be visible on the page.
Assign it its size .width and .height of the part you want to extract
part_ctx = part_canvas.getContext("2d") on the canvas
Then part_ctx.drawImage(source_image, part_x, part_x, part_width, parth_height, 0, 0, part_width, parth_height); This will take a rectangualr area of the source image and put it in the invisble canvas.
Finally you can do part_canvas.toDataURL() and you have the data URL

Didn't test. But I think this should work.

0

106

Uint clamped array to data url

1 answers

0

Find remote jobs

Andres GPT