vue-croppa icon indicating copy to clipboard operation
vue-croppa copied to clipboard

Feature: Get only the image on canvas without the remnant

Open pmochine opened this issue 6 years ago • 1 comments

So it would be cool if you can get the image without the gray bars when promissing the blob.

My canvas

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);
	},
}
}

pmochine avatar Jun 08 '18 10:06 pmochine

Thanks. Will consider adding this feature.

zhanziyang avatar Jun 09 '18 02:06 zhanziyang