init Modal

[agontuk]

init Modal

[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?