Integrating DropzoneJS with a javascript Image Cropper to Optimise ImageUploads

Rik Schennink

In this tutorial we’ll integrate Dropzone with three different image cropper plugins to optimise image data before it’s uploaded to the server.


Integrating DropzoneJS with a JavaScript Image Cropper to Optimise Image Uploads

Wouldn’t it be nice if we could optimise images before they’re sent to the server. This can save bandwidth, result in a cleaner database, and allows the user to have more control over their own content. Use the techniques described in this article to enable your users to edit profile pictures, photo albums, or any other imagery that they upload to your server.

We’ll set up a basic DropzoneJS vanilla JavaScript drop area, extend it to better integrate with a third party image cropper and then show how to link it up with three popular image croppers: Cropper.js , Croppie , and last but not least Doka

Let’s start by setting up DropzoneJS first.

Setting up DropzoneJS

We’ll create a basic HTML page and add the DropzoneJS styles and scripts like shown below.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Image Cropping with DropzoneJS</title>
<link href="https://unpkg.com/dropzone/dist/dropzone.css" rel="stylesheet"/>
</head>
<body>
<div class="dropzone" id="myDropzone"></div>
<script src="https://unpkg.com/dropzone"></script>
</body>
</html>

With our basic page set up, we can now focus on configuring DropzoneJS. Before it’s going to do anything it wants us to set up a location for uploading the files to, let’s do that now. We can pass options to our specific uploader using the id we assigned to the DropzoneJS <div> .

Note that we’ve zoomed in on the code just before the closing body tag.

<div class="dropzone" id="myDropzone"></div> <script src="https://unpkg.com/dropzone"></script> <script>
Dropzone.options.myDropzone = {
url: '/post'
};
</script>

We should now see the following appear on the page, and if we drop an image DropzoneJS will show a small thumbnail.


Integrating DropzoneJS with a JavaScript Image Cropper to Optimise Image Uploads

We can handle the file object on the server just as we would a normal file posted using a <input type=”file”/> with a classic multi-part form. This tutorial will focus on editing the image on the front-end before it’s uploaded to the server. So we’ll leave the server solution be for now.

Extending Dropzone it with an image editorpopup

Dropzone has a special callback function called transformFile we can ask our users to edit a file when this function is called. Let’s

Note that we’ve zoomed in on the code inside the <script> tag.

Dropzone.options.myDropzone = {
url: '/post',
transformFile: function(file, done) { }
};

Dropzone locks up. We need to call the done function (second parameter) when we’re done editing the file, we’ll keep this in mind. For now this is fine.


Integrating DropzoneJS with a JavaScript Image Cropper to Optimise Image Uploads

Alright, we want to edit the file in an image editor overlay, on top of Dropzone, this automatically moves the user focus to the editor.

transformFile: function(file, done) { // 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';
document.body.appendChild(editor); }

The result below seems all kinds of wrong but it’s actually what we want. The black layer will be the location of our editor later on. Hang in there.


Integrating DropzoneJS with a JavaScript Image Cropper to Optimise Image Uploads

We need a way to escape from this black void, so let’s add a button with a click event to the editor element.

transformFile: function(file, done) { // 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'; document.body.appendChild(editor); // Create confirm button at the top left of the viewport
var buttonConfirm = document.createElement('button');
buttonConfirm.style.position = 'absolute';
buttonConfirm.style.left = '10px';
buttonConfirm.style.top = '10px';
buttonConfirm.style.zIndex = 9999;
buttonConfirm.textContent = 'Confirm';
editor.appendChild(buttonConfirm);
buttonConfirm.addEventListener('click', function() { // Remove the editor from the view
document.body.removeChild(editor); <strong>});</strong> }

Yay! We can now escape the void. Wonderful!


Integrating DropzoneJS with a JavaScript Image Cropper to Optimise Image Uploads

The is all we need to set up to integrate with our first and second image cropper candidates, let’s give Cropper.js a go.

Integrating Dropzone with Cropper.js
Integrating DropzoneJS with a JavaScript Image Cropper to Optimise Image Uploads

Time to link up our first image cropper. Let’s add the styles and scripts required for Cropper.js .

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Image Cropping with DropzoneJS</title>
<link href="https://unpkg.com/dropzone/dist/dropzone.css" rel="stylesheet"/>
<link href="https://unpkg.com/cropperjs/dist/cropper.css" rel="stylesheet"/>
</head>
<body>
<div class="dropzone" id="myDropzone"></div>
<script src="https://unpkg.com/dropzone"></script>
<script src="https://unpkg.com/cropperjs"></script>
</body>
</html>

Everything is still the same, and that’s okay.

Let‘s add Cropper.js to our editor element and load the droppe

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:Integrating DropzoneJS with a JavaScript Image Cropper to Optimise Image Uploads
本站链接:https://www.codesec.net/view/628316.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(15)