I've been struggling to convert an image blob into a data URL using Vue.js, but I keep encountering this error:
'Error in v-on handler: "TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'."My blob URL looks like this -
blob:http://localhost:8080/ca6d6419-f933-439b-8a16-62a80c81ab1aHere's what I've attempted so far:
upload() {
this.value = blob:http://localhost:8080/ca6d6419-f933-439b-8a16-62a80c81ab1a;
var canvas = document.createElement('canvas');
canvas.width = this.value.width;
canvas.height = this.value.height;
canvas.getContext('2d').drawImage(this.value[0], 0, 0);
dataURI = canvas.toDataURL();
console.log(dataURI);
},
Update:
upload(){
this.value = blob:http://localhost:8080/ca6d6419-f933-439b-8a16-62a80c81ab1a;
let img = document.createElement('img');
img.src = this.value;
let canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img[0], 0, 0);
dataURI = canvas.toDataURL();
console.log(dataURI);
}