【发布时间】：2019-05-31 09:26:21
【问题描述】：
我将 Dropzonejs 与 Cropperjs 一起使用。当前流程是选择图像，裁剪并保存。
我想选择一张图片并给用户两个选项
1) 裁剪然后保存
2) 取消裁剪并保存而不裁剪。
cropperjs 中默认第一个选项可用。但是我怎样才能添加一个cancel 按钮，它应该将图像发送到dropzone而不进行裁剪。简而言之，我想要 dropzone 中的原始选定图像。
Dropzone JS 配置代码：
Dropzone.autoDiscover = false;
// Dropzone Configurations
var dropzone = new Dropzone('#story-thumbnail-dropzone-upload', {
parallelUploads: 1,
thumbnailHeight: 120,
thumbnailWidth: 120,
// Number of Files to allow for UPLOAD
maxFiles:1,
init: function() {
this.on("maxfilesexceeded", function(file) {
this.removeAllFiles();
this.addFile(file);
});
},
transformFile: function(file, done) {
var myDropZone = this;
// Create the image editor overlay
var editor = document.createElement('div');
editor.style.position = 'fixed';
editor.style.left = 0;
editor.style.right = 0;
editor.style.top = 0;
editor.style.bottom = 0;
editor.style.zIndex = 9999;
editor.style.backgroundColor = '#000';
// Create the confirm button
var confirm = document.createElement('button');
confirm.style.position = 'absolute';
confirm.style.left = '10px';
confirm.style.top = '10px';
confirm.style.zIndex = 9999;
confirm.textContent = 'Crop';
confirm.addEventListener('click', function() {
// Get the canvas with image data from Cropper.js
var canvas = cropper.getCroppedCanvas({
width: 256,
height: 256
});
// Turn the canvas into a Blob (file object without a name)
canvas.toBlob(function(blob) {
// Update the image thumbnail with the new image data
myDropZone.createThumbnail(
blob,
myDropZone.options.thumbnailWidth,
myDropZone.options.thumbnailHeight,
myDropZone.options.thumbnailMethod,
false,
function(dataURL) {
// Update the Dropzone file thumbnail
myDropZone.emit('thumbnail', file, dataURL);
// Return modified file to dropzone
done(blob);
}
);
});
// Remove the editor from view
editor.parentNode.removeChild(editor);
});
editor.appendChild(confirm);
// Load the image
var image = new Image();
image.src = URL.createObjectURL(file);
editor.appendChild(image);
// Append the editor to the page
document.body.appendChild(editor);
// Create Cropper.js and pass image
var cropper = new Cropper(image, {
aspectRatio: 1
});
},
filesizeBase: 1000,
thumbnail: function(file, dataUrl) {
if (file.previewElement) {
file.previewElement.classList.remove("dz-file-preview");
var images = file.previewElement.querySelectorAll("[data-dz-thumbnail]");
for (var i = 0; i < images.length; i++) {
var thumbnailElement = images[i];
thumbnailElement.alt = file.name;
thumbnailElement.src = dataUrl;
}
setTimeout(function() { file.previewElement.classList.add("dz-image-preview"); }, 1);
}
}
});
HTML：
<div class="dropzone needsclick" id="story-thumbnail-dropzone-upload" action="/admin/upload-story-thumbnail">
<div class="dz-message needsclick">
Drop files here or click to upload.<BR>
</div>
</div>
【问题讨论】：
-
你能用cdn链接创建一个jsbin sn-p吗？您的代码中缺少 CDN 链接。
-
@UmairShahYousafzai 有一个 ajax 请求我不认为 JSBIN 是可能的！ CDN 是最新的 dropzone 和cropperjs cdn 链接！
-
@Iftikharuddin 我在上传图片时遇到了慢，你也遇到过吗？
标签： javascript jquery dropzone.js cropperjs