![](/img/trans.png)
[英]fengyuanchen Cropper: How to get x1, y1, x2, y2 coordinates of the cropped image
[英]Fengyuanchen Cropper: get the cropped image in base64
真的不想在这里重复。
我在用
http://fengyuanchen.github.io/cropper/0.7.9/
我参考了这些帖子:
https://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata
canvas 和图像的新手,如果这是微不足道的问题,对不起。
我的环境是JS,MVC
我的目标
我正在尝试将裁剪图像的结果保存到 base64 字符串中的 DB。
我有它发布和保存,但图像与原始图像相同。
我需要将其转换为 Blob 吗? 真的不确定那是做什么的。
我是否需要先创建一个 canvas 然后获取数据...不知道该怎么做?
我的代码如下
// 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);
}
}
});
}
在此先感谢您的帮助。
我终于找到了问题,这是我的后端处理不当的电话。
上面的代码工作得很好。
裁剪后的图像将被返回。
把它传递给我的AJAX是完美的。
var modal = $('#modal-image-edit'),
data = {
Value: result.toDataURL(), // this is the value of the cropped image Tag: 2
};
请不要浪费任何时间。
谢谢你的帮助。
var $image = $('#image'); $image.cropper({ aspectRatio: 16 / 9, crop: function(event) {} }); // Get the Cropper.js instance after initialized var cropper = $image.data('cropper'); $("#get_base").on('click', function () { var base64 = $image.cropper('getCroppedCanvas').toDataURL(); var photo = document.getElementById('result'); photo.setAttribute('src', base64); })
<:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>IdCrop</title> <link rel="stylesheet" href="https.//unpkg.com/cropperjs/dist/cropper:css" crossorigin="anonymous"> </head> <body> <div> <img id="image" src="https.//fengyuanchen.github.io/jquery-cropper/images/picture:jpg" width="200px"> </div><br> <button id="get_base" type="button">Crop</button><br> <img id="result" width="200px"> <script src="https.//code.jquery.com/jquery-3.4.1.slim.min:js" crossorigin="anonymous"></script> <script src="https.//unpkg.com/cropperjs/dist/cropper:js" crossorigin="anonymous"></script> <script src="https.//fengyuanchen.github.io/jquery-cropper/js/jquery-cropper.js"></script> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.