Question: How to see the picture without using initial image just with croppa?

[pmochine]

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...

[pmochine]

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.

[zhanziyang]

@pmochine Thanks for sharing the workaround. I will try to make it easier. Let's keep this issue open.