Javascript Canvas将图像绘制为仅缓冲

Question

I'm using Canvas to process an image in various ways using it's image data only. I'm getting the image like this:

const vid = document.querySelector('video');
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

But if I don't physically draw the image on the screen like this:

context.drawImage(vid, 0, 0, canvas.width, canvas.height);

then I can't process it's image data...is there any way this can all be done in data? I have no use to display the image in my app at all. Is there any way to draw it to the buffer only or something?

All I'm doing is capturing the image and then processing it's image data so I have no need to display it anywhere.

Answer 1

You can dynamically create a canvas element using Javascript like

var canvas=document.createElement("canvas");

get it's context

var context = canvas.getContext('2d');

and ultimately don't append it to the DOM by omitting

document.body.appendChild(canvas);

Even though you're still able to do all drawing operations eg drawImage()