Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library


Category: Javascript Codes Library >> Image Effects >> Resize an Image Using Canvas, Drag and Drop and the File API

Code Snippet </> Info

Snippet Name: Resize an Image Using Canvas, Drag and Drop and the File API

Description: A user interface that allows a user to upload an image that is automagically re-sized to your specifications before uploading to a server.
Example: View Code Demo

Note: Set your var MAX_HEIGHT = 100; Add it to your form.

Author: David Walsh

Last Modified: 2019-12-09 02:53:10

Language: javascript

Highlight Mode: javascript

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor

  About Copying
Copied To Clipboard!

<!DOCTYPE html> <html xmlns="" dir="ltr"> <head> <title>Resize an Image Using Canvas, Drag and Drop and the File API</title> <meta name="description" content="Use the File API, drag and drop, and HTML5 canvas to allow for JavaScript resizing of images." /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--[if lt IE 9]> <script src=""></script> <![endif]--> <style> /* Begin Resize an Image Using Canvas, Drag and Drop and the File API */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The Free Public Codes Library == */ /* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ /* == Created by: David Walsh : : Creative Commons License == */ BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000;} #content {margin:0px 15px 0px 15px; padding:15px 15px 15px 15px;} #preview-row { position:relative; width:auto; padding:12px; border:1px solid #ddd; } #drop-target { position:absolute; top:12px; left:12px; width:100px; height:100px; background-color:#eee; border:1px solid #ddd; text-align:center; padding:12px; } #preview { width:auto; margin-left:148px; height:100px; background-color:#eee; padding:12px; border:1px solid #ddd; }</style> <script src=""></script> </head> <body> <div id="content"> <h1>Resize an Image Using Canvas, Drag and Drop and the File API</h1> <div class="p">Read <a href="" target="_new">Resize an Image Using Canvas, Drag and Drop and the File API</a></div> <div id="promoNode"></div> <p>Drag an image into the box below to see it automagically resized with canvas and JavaScript.</p> <div id="preview-row"> <div id="drop-target">Drop your image file in to this box.</div> <div id="preview"> <canvas id="canvas"></canvas> </div> </div> <script> require(["dojo/dom", "dojo/domReady!"], function(dom){ var MAX_HEIGHT = 100; /* set your max image height */ var target = dom.byId("drop-target"), preview = dom.byId("preview"), canvas = dom.byId("canvas"); var render = function(src){ var img = new Image(); img.onload = function(){ if(img.height > MAX_HEIGHT) { img.width *= MAX_HEIGHT / img.height; img.height = MAX_HEIGHT; } var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); = img.width + "px"; = img.height + "px"; canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0, img.width, img.height); }; img.src = src; }; var readImage = function(imgFile){ if(!imgFile.type.match(/image.*/)){ console.log("Sorry, the dropped file is not an image:", imgFile.type); return; } var reader = new FileReader(); reader.onload = function(e){ render(; }; reader.readAsDataURL(imgFile); }; // DOMReady setup target.addEventListener("dragover", function(e) {e.preventDefault();}, true); target.addEventListener("drop", function(e){ e.preventDefault(); readImage(e.dataTransfer.files[0]); }, true); }); </script> </div> </body> </html>

[ Snippet Options ]


© 2002 -  Snap Builder Public Codes Library