javascript - 上传到dropzone(dropzone.js)的图片使用cropper.js进行裁剪,但发布时不显示裁剪的图片
问题描述
我有一个代码负责在模态窗口中打开拖放字段(dropzone.js)中加载的图像,以便使用cropper.js进行裁剪。代码正在运行。模态窗口打开,图像被裁剪,裁剪后的图像显示在拖放字段中。但是在发布后,图像不会在帖子中裁剪。也就是说,事实证明未裁剪的图像被上传到服务器。如何解决这个问题?这是代码。
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone('div#myDropzone', {
url: "/plugins/dropzone/dist/upload.php",
createImageThumbnails: true,
autoProcessQueue: false,
init: function() {
this.on("addedfile", function() {
if (this.files[1]!=null){
this.removeFile(this.files[0]);}
});
},
});
var cropped = false;
myDropzone.on('addedfile', function(file) {
if (!cropped) {
myDropzone.removeFile(file);
cropper(file);
} else {
cropped = false;
var previewURL = URL.createObjectURL(file);
var dzPreview = $(file.previewElement).find('img');
dzPreview.attr("src", previewURL);
}
});
function cropper(file) {
var c = 0;
var fileName = file.name;
var loadedFilePath = getSrcImageFromBlob(file);
var modalTemplate =
'<div class="modal fade" tabindex="-1" role="dialog" data-backdrop="static">' +
'<div class="modal-dialog" role="document">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times" aria-hidden="true"></i></button>' +
'</div>' +
'<div class="modal-body">' +
'<div class="cropper-container">' +
'<img id="img-' + c + '" src="' + loadedFilePath + '" data-vertical-flip="false" data-horizontal-flip="false">' +
'</div>' +
'</div>' +
'<div class="modal-footer">' +
'<button type="button" class="btns btn-warning rotate-left"><i class="fa fa-rotate-left"></i></button>' +
'<button type="button" class="btns btn-warning rotate-right"><i class="fa fa-rotate-right"></i></button>' +
'<button type="button" class="btns btn-warning zoom-in" data-method="zoom" data-option="0.1"><i class="fa fa-search-plus"></i></button>' +
'<button type="button" class="btns btn-warning zoom-out" data-method="zoom" data-option="-0.1"><i class="fa fa-search-minus"></i></button>' +
'<button type="button" class="btns btn-warning reset"><i class="fa fa-refresh"></i></button>' +
'<button type="button" class="btns btn-primary crop-upload">Crop and Upload</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
// @formatter:on
var $cropperModal = $(modalTemplate);
var $image = null;
$cropperModal.modal('show').on("shown.bs.modal", function() {
$image = $('#img-' + c);
console.log($image);
var cropper = $image.cropper({
autoCropArea: 1,
aspectRatio: 16 / 12,
cropBoxResizable: false,
movable: true,
rotatable: true,
zoomable: true,
toggleDragModeOnDblclick: false,
viewMode: 2
});
$cropperModal.on('click', '.crop-upload', function() {
// get cropped image data
$image.cropper('getCroppedCanvas', {
width: 400,
height: 300,
minWidth: 400,
minHeight: 300,
maxWidth: 4096,
maxHeight: 3072,
fillColor: '#fff',
imageSmoothingEnabled: false,
imageSmoothingQuality: 'high'
})
.toBlob(function(blob) {
var croppedFile = blobToFile(blob, fileName);
croppedFile.accepted = true;
var files = myDropzone.getAcceptedFiles();
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (file.name === fileName) {
myDropzone.removeFile(file);
}
}
cropped = true;
myDropzone.files.push(croppedFile);
myDropzone.emit('addedfile', croppedFile);
myDropzone.createThumbnail(croppedFile); //, width, height, resizeMethod, fixOrientation, callback)
$cropperModal.modal('hide');
});
})
.on('click', '.rotate-right', function() {
$image.cropper('rotate', 90);
})
.on('click', '.rotate-left', function() {
$image.cropper('rotate', -90);
})
.on('click', '.reset', function() {
$image.cropper('reset');
})
.on('click', '.zoom-in', function() {
$image.cropper('zoom', 0.1);
})
.on('click', '.zoom-out', function() {
$image.cropper('zoom', -0.1);
})
}).on('hidden.bs.modal', function() {
$(this).remove();
$image.cropper('destroy');
})
}
function getSrcImageFromBlob(blob) {
var urlCreator = window.URL || window.webkitURL;
return urlCreator.createObjectURL(blob);
}
function blobToFile(theBlob, fileName) {
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
}
HTML 代码:
<form action="<?php echo JRoute::_('index.php'); ?>" enctype="multipart/form-data" method="post" name="adminForm" id="adminForm" class="form-validate">
<div class="itemAdditionalData_image">
<div class="content">
<div class="dropzone dz-clickable" id="myDropzone">
<div class="dz-default dz-message" id="myAwesomeDropzone">
<button class="dz-button" type="button">Upload an image</button>
</div>
<input class="inputbox required avatar" type="file" id="image" name="image" hidden />
</div>
</div>
</div>
</form>
代码也发布在这里:https ://jsfiddle.net/y8m3nw1o/4/
解决方案
推荐阅读
- php - WC Fields Factory:在购物车功能中使用产品页面中的条目
- python - 如何修复 django 中的 OSError(无效参数)错误
- laravel - laravel 向我显示此错误此路线不支持 POST 方法。支持的方法:GET、HEAD、PUT、DELETE
- python-3.x - 行长为奇数的等角三角形
- c# - 单独的 getter 和 setter 声明
- sql - 执行我的语句时无法绑定多部分标识符
- keras - Keras 仅预测 3 类中的一类
- c# - 有没有办法检查是否写了一些东西,除非等到用“Console.ReadLine()”写一些东西
- c++ - 为什么ffmpeg cmake外部项目不起作用
- rust - 在文档中将长表格行分成多行