Я использую 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>