init Modal

[ademyalcin27]

Hey, Im getting img url from server and after I open modal and doesnt work cropper .js my code like this can you help me ?

<vue-cropper v-show="imgSrc!=null" ref='cropper' :guides="true" :view-mode="0" drag-mode="move" :auto-crop-area=".5" :aspect-ratio="1" :highlight="true" :min-crop-box-width="120" :min-crop-box-height="120" :min-container-height="300" :min-container-width="320"

              :background="true"
              :crop-box-resizable="true"
              :rotatable="true"
              :src="imgSrc"
              :cropmove='cropImage'
            >
            </vue-cropper>
            <div class="upload-button">
              <input type="file" name="image" id="inputImage" accept="image/jpeg,image/png" @change='setImage' ref="image" /></div>
            </div>

updatePhoto(ref){ //open modal function this.$refs.image.value='' this.imgSrc= this.contactInputFields.photoUrl !='' ? this.contactInputFields.photoUrl : null; getChildRef(this,ref); // open modal this let $t=this; setTimeout(function () { debugger $t.$refs.cropper;

    },2000)
   },

setImage (e) { debugger const file = e.target.files[0]; if (!_.includes(['image/jpeg','image/png'],file.type)) { this.error.text = this.errorText.isNotImage; getChildRef(this, "error-modal"); return; } if (typeof FileReader === 'function') { const reader = new FileReader(); reader.onload = (event) => { this.imgSrc = event.target.result; this.$refs.cropper.replace(event.target.result); }; reader.readAsDataURL(file); } else { this.error.text = this.errorText.notSupport; getChildRef(this, "error-modal"); return; } let $t=this; setTimeout(function () { $t.cropImage() },10) }, cropImage () { this.cropImg = this.$refs.cropper.getCroppedCanvas({width: 170, height: 170}).toDataURL('image/jpeg'); },

[Agontuk]

Hello, it's very hard to read the code you gave, some formatting would be nice. Also what errors are you getting in console? That would be helpful too.

[ademyalcin27]

Hey, sorry for I asked question like this, but I solved, Like this,

convertImgToDataURLviaCanvas(url,callback,outputFormat) { let img = new Image(); img.crossOrigin = 'Anonymous'; img.onload = function() { let canvas = document.createElement('CANVAS'); let ctx = canvas.getContext('2d'); let dataURL; canvas.height = this.height; canvas.width = this.width; ctx.drawImage(this, 0, 0); dataURL = canvas.toDataURL(outputFormat); callback(dataURL); canvas = null; }; if ( img.complete || img.complete === undefined ) { img.src = url; return url; }

  },

I create image like this and I convert base64 after I use crooper this function this.convertImgToDataURLviaCanvas(this.imgSrc,function (base64Img){ this$refs.cropper.replace(base64Img)

[Agontuk]

ok, closing the issue as it's been solved.

[consciousnessdev]

Hey, Im getting img url from server and after I open modal and doesnt work cropper .js my code like this can you help me ?

<vue-cropper v-show="imgSrc!=null" ref='cropper' :guides="true" :view-mode="0" drag-mode="move" :auto-crop-area=".5" :aspect-ratio="1" :highlight="true" :min-crop-box-width="120" :min-crop-box-height="120" :min-container-height="300" :min-container-width="320"

              :background="true"
              :crop-box-resizable="true"
              :rotatable="true"
              :src="imgSrc"
              :cropmove='cropImage'
            >
            </vue-cropper>
            <div class="upload-button">
              <input type="file" name="image" id="inputImage" accept="image/jpeg,image/png" @change='setImage' ref="image" /></div>
            </div>

updatePhoto(ref){ //open modal function this.$refs.image.value='' this.imgSrc= this.contactInputFields.photoUrl !='' ? this.contactInputFields.photoUrl : null; getChildRef(this,ref); // open modal this let $t=this; setTimeout(function () { debugger $t.$refs.cropper;

    },2000)
   },

setImage (e) { debugger const file = e.target.files[0]; if (!_.includes(['image/jpeg','image/png'],file.type)) { this.error.text = this.errorText.isNotImage; getChildRef(this, "error-modal"); return; } if (typeof FileReader === 'function') { const reader = new FileReader(); reader.onload = (event) => { this.imgSrc = event.target.result; this.$refs.cropper.replace(event.target.result); }; reader.readAsDataURL(file); } else { this.error.text = this.errorText.notSupport; getChildRef(this, "error-modal"); return; } let $t=this; setTimeout(function () { $t.cropImage() },10) }, cropImage () { this.cropImg = this.$refs.cropper.getCroppedCanvas({width: 170, height: 170}).toDataURL('image/jpeg'); },

Can you share full modal sourcecode please?