an anyone tell me, how can I call the cropper variable in the opened function of the options modal into the cropImage function?
define([
'jquery',
'cropper',
'Magento_Ui/js/modal/modal',
'mage/translate',
], function ($, Cropper, modal) {
'use strict';
$.widget('mage.scale_image', {
/**
* Options common to all instances of this widget.
* @type {Object}
*/
options: {},
/**
* Bind event handlers for adding contact phone.
* @private
*/
_create: function () {
var options = this.options,
postImage = options.postImage,
listImage = options.listImage;
if (postImage) {
$(document).on('change', postImage, this._postImage.bind(this));
}
if (listImage) {
$(document).on('change', listImage, this._listImage.bind(this));
}
},
_postImage: function (){
var cropper,
options = {
type: 'popup',
responsive: true,
title: 'Scale image before upload',
buttons: [{
text: 'Crop',
class: 'modal-crop',
click: this._cropImage
},
{
text: 'Close',
class: 'modal-close',
click: function () {
this.closeModal();
}
}],
opened: function (){
cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 3,
preview:'.preview'
});
},
closed: function (){
cropper.destroy();
cropper = null;
}
};
modal(options, $('#modal-content'));
var image = $('#sample_image')[0],
reader,
files = event.target.files,
done = function(url){
image.src = url;
$('#modal-content').modal('openModal');
};
if(files && files.length > 0)
{
reader = new FileReader();
reader.onload = function(event)
{
done(reader.result);
};
reader.readAsDataURL(files[0]);
}
},
_cropImage: function (){
var canvas = cropper.getCroppedCanvas({
width:400,
height:400
});
console.log(canvas);
}
});
return $.mage.scale_image;
});
```[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/ClsfV.png
