vue-croppa
vue-croppa copied to clipboard
Question: How to see the picture without using initial image just with croppa?
I've one Croppa Component, but I save every v-model="croppa" when the user is creating a new picture. So how can I see the old original picture just by using the croppa?
this.croppa = this.items[3].croppa //does not work
Currently I'm using initial-image and refresh(), but that cuts the original image and one cannot resize the picture anymore...
Just to inform you how I managed it right now. It's ugly but currently, it's working.
First of all, you need to deepClone all the time. So I set a global function for that:
window.deepClone = function(obj){
return JSON.parse(JSON.stringify(obj))
};
So if you have only one big view croppa component like me but you want to use it like "Instagram-Upload", saving several pictures and when clicking on a thumbnail you see the picture in the croppa component.
SO to switch the View State you need to save these informations:
{
img: this.croppa.img,
imgData: deepClone(this.croppa.imgData),
scaleRatio: deepClone(this.croppa.scaleRatio),
naturalHeight: deepClone(this.croppa.naturalHeight),
naturalWidth: deepClone(this.croppa.naturalWidth),
}
And if a user clicks on a thumbnail, use the @click event to call this function to display the picture in the croppa component:
setViewCroppa(item){
this.croppa.naturalHeight = item.naturalHeight;
this.croppa.naturalWidth = item.naturalWidth;
this.croppa.imageSet = true;
this.croppa.img = item.img;
this.croppa.imgData = deepClone(item.imgData);
//This is need to trick out the watcher with the old values
this.$nextTick(() => {
this.croppa.imgData = deepClone(item.imgData);
this.croppa.scaleRatio = deepClone(item.scaleRatio);
});
this.croppa.scaleRatio = deepClone(item.scaleRatio);
let { startX, startY, width, height } = this.croppa.imgData;
//You need to draw the first picture by yourself (so you see the new pic)
this.croppa.ctx.drawImage(this.croppa.img, startX, startY, width, height);
},
But don't forget to reset imageset. I do this in @file-choose="croppa.imageSet = false"
It works but is kind of ugly, perhaps in the future time you can switch the image easier around.
@pmochine Thanks for sharing the workaround. I will try to make it easier. Let's keep this issue open.