Thursday, 15 February 2018

ImageData:    canvas.getImageData(0, 0, width, height); will return imageData. this function can run very quick. i guess this is raw data.

You can context.putImageData(imagedata) into a canvas. but this function will not work if you have rotated the canvas, you have to :

createImageBitmap(imageData)
.then((response )=> {
    context.drawImage(response, canvasTemplate.offsets[index].x, canvasTemplate.offsets[index].y);
});


DataURL:   canvas.toDataURL('image/webp', this.quality),  this function will extract image into a specific format,  this is a slow function.

Ideally we should use canvas.getImageData to get imagedata, which has full image data and quick, and put it into worker to convert image data to a format. but there is no lib we can use to convert ImageData to DataURL with pure js, because worker need to run on pure js (as i will mention below, i can convert Imagedata to DataURL by using a canvas, but you cannot use canvas in worker....)


Blob:  blob can be used in different places e.g in worker to make a function to a blob. if you are working with image or video, Blob is also a very useful

URL.createObjectURL(blob) will return a url which can be used to img.src video.src to show image or video.


very difficult to convert from one to another just by js, you have to draw it back to canvas first.

No comments:

Post a comment