vue-croppa
vue-croppa copied to clipboard
Feature: Get only the image on canvas without the remnant
So it would be cool if you can get the image without the gray bars when promissing the blob.
I created another mixin to add the feature. My mixin:
export default{
data(){
return {
imgCanvas: null,
imgCtx: null
};
},
methods:{
createCanvas(){
this.imgCanvas = document.createElement("canvas");
this.imgCtx = this.imgCanvas.getContext("2d");
let { startX, startY, width, height } = this.croppa.imgData;
this.imgCanvas.width = width;
this.imgCanvas.height = height;
this.imgCtx.drawImage(this.croppa.img, 0, 0, width , height);
},
promisedImgBlob(...args) {
if (typeof Promise == 'undefined') {
console.warn('No Promise support. Please add Promise polyfill if you want to use this method.')
return
}
return new Promise((resolve, reject) => {
try {
this.generateImgBlob((blob) => {
resolve(blob)
}, ...args)
} catch (err) {
reject(err)
}
});
},
generateImgBlob (callback, mimeType, qualityArgument) {
this.createCanvas();
this.imgCanvas.toBlob(callback, mimeType, qualityArgument);
},
}
}
Thanks. Will consider adding this feature.