image cropper java_Fengyuanchen Cropper：获得base64中的裁剪图像

真的不想在这里重复一遍 .

我在用

我引用了这些帖子：

画布和图像的新手，如果这是微不足道的话，很抱歉 .

我的环境是JS，MVC

My goal

我试图将裁剪图像的结果保存到base64字符串中的DB .

我发布并保存，但图像与原始图像相同 .

我需要将其转换为Blob吗？真的不确定那是做什么的 .

我是否需要首先创建一个画布，然后获取数据......不知道该怎么做？

我的代码如下

// cropper

function loadCropper() {

//var console = window.console || { log: function () { } };

var $body = $('body');

var $image = $('.img-container > img');

var $actions = $('.docs-actions');

var $dataX = $('#dataX');

var $dataY = $('#dataY');

var $dataHeight = $('#dataHeight');

var $dataWidth = $('#dataWidth');

var $dataRotate = $('#dataRotate');

var $dataScaleX = $('#dataScaleX');

var $dataScaleY = $('#dataScaleY');

var options = {

aspectRatio: 16 / 9,

preview: '.img-preview',

crop: function (e) {

$dataX.val(Math.round(e.x));

$dataY.val(Math.round(e.y));

$dataHeight.val(Math.round(e.height));

$dataWidth.val(Math.round(e.width));

$dataRotate.val(e.rotate);

$dataScaleX.val(e.scaleX);

$dataScaleY.val(e.scaleY);

},

responsive: false,

mouseWheelZoom: false,

touchDragZoom: false,

modal: false,

};

$image.cropper("destroy");

$image.cropper(options);

// Buttons

if (!$.isFunction(document.createElement('canvas').getContext)) {

$('button[data-method="getCroppedCanvas"]').prop('disabled', true);

}

// Methods

$actions.on('click', '[data-method]').off();

$actions.on('click', '[data-method]', function () {

var $this = $(this);

var data = $this.data();

var $target;

var result;

if ($this.prop('disabled') || $this.hasClass('disabled')) {

return;

}

if ($image.data('cropper') && data.method) {

data = $.extend({}, data); // Clone a new one

if (typeof data.target !== 'undefined') {

$target = $(data.target);

if (typeof data.option === 'undefined') {

try {

data.option = JSON.parse($target.val());

} catch (e) {

// console.log(e.message);

}

}

}

result = $image.cropper(data.method, data.option, data.secondOption);

if (data.method === 'getCroppedCanvas' && result) {

//$image.cropper('getCroppedCanvas').toBlob(function (blob) {

// console.dir(blob)

//});

var modal = $('#modal-image-edit'),

data = {

Value: result.toDataURL(), //this is the same as the orignial

Tag: 2

};

afterControlEvent(data);

}

}

});

}

在此先感谢您的帮助 .