In my vue.js application, I have implemented vue-workers/web-workers to handle image processing tasks such as scaling and cropping in the background after a user uploads images.
Due to the lack of support for Canvas and Image Object in web workers, I opted to use ImageBitmaps and OffscreenCanvas. I am able to create an ImageBitmap from an image file using the CreateImageBitmap() method which returns a promise that resolves to an ImageBitmap. I have successfully confirmed the creation of the ImageBitmap by printing it to the console.
Click here to view the ImageBitmap created and the error thrown.
var loadingImage = new Image();
loadingImage.onload = () => {
console.log(createImageBitmap(loadingImage)); // ImageBitmap successfully logged to console
const canvas = new OffscreenCanvas(100, 100);
const ctx = canvas.getContext('2d');
Promise.all([
createImageBitmaps(loadingImage);
]).then(function(result){
console.log("Promise resolved");
console.log(result);
ctx.drawImage(result, 0, 0, 200, 200); // Error occurs at this line
})
// Other code goes here ....
};
loadingImage.src = base64Src;
Question: I am facing difficulty when passing the ImageBitmap to the OffscreenCanvas draw() method as it throws an error "failed to execute drawImage on OffscreenCanvasRenderer...". The exact error can be seen in the console after the ImageBitmap is printed in the picture below.
Has anyone been able to successfully draw an image to an OffscreenCanvas within a vue-worker/web-worker setup? Any examples of working code would be greatly appreciated!
Furthermore, based on my research, it seems that createImageBitmap() is only supported in Chrome. Is there an alternative way, other than using ImageBitmap, to draw on OffscreenCanvas that works on both Chrome and Safari?