/** * photoeditor - v0.0.1 beta - 2012-04-30 * http://www.info-town.jp * * Copyright (c) 2012 Sawai Hiroshi */ // referred to the following site. // http://www.programmingmat.jp/webhtml_lab/canvas_image.html // http://atomicrobotdesign.com/blog/javascript/draw-a-rectangle-using-the-mouse-on-the-canvas-in-less-than-40-lines-of-javascript/ // utils if (!Object.create) { (function () { function F() {} Object.create = function (object) { F.prototype = object; return new F(); }; }()); } // photoeditor jQuery(function($) { // photoeditor aplication top level object var photoeditor = {}; (function () { var image, canvas, cxt, rect = {}, drag = false; /** * exception */ function appError(error) { alert(error.message); } /** * file open when file drag canvas */ // drag handler // cancel default browser event $('#drop').get(0).ondragover = function (event) { return false; }; // drop handler // read file when file drag&drop to canvas $('#drop').get(0).ondrop = function (event) { var file, reader; if (!event.dataTransfer.files.length) { return false; } file = event.dataTransfer.files[0]; if (!/^image\/(png|jpeg|gif)$/.test(file.type)) { appError({ message: 'file type error when file drag open' }); return false; } reader = new FileReader(); reader.onload = function() { $('#original').append('<h3>オリジナル画像</h3>'); image = document.createElement('img'); image.setAttribute('src',reader.result); image.draggable = false; $('#original').append(image); image.onload = function () { try { $('#org-width').val(image.width); $('#org-height').val(image.height); } catch (e) { appError({ message: 'error when load image' }); } }; }; // read image file reader.readAsDataURL(file); return false; }; /** * image edit */ // resize image $('#resize').click(function () { var width = $('#width').val(), height = $('#height').val(), checked; width = parseInt(width, 10); height = parseInt(height, 10); if (!(width > 0 || height > 0)) { appError({ message: 'input width or height plus number' }); return false; } checked = $('#ratio').is(':checked'); if (!checked && !(width > 0 && height > 0)) { appError({ message: 'check ratio or width and height input plus number' }); return false; } try { if (checked && width > 0) { height = Math.floor(image.height * (width / image.width)); } else if (checked && height > 0) { width = Math.floor(image.width * (height / image.height)); } } catch (e) { appError({ message: 'error height or width' }); return false; } if ($('canvas').length === 0) { canvas = document.createElement('canvas'); } if ((cxt instanceof CanvasRenderingContext2D) === false) { cxt = canvas.getContext('2d'); } else { cxt.clearRect(0, 0, canvas.width, canvas.height); } canvas.width = width; canvas.height = height; try { // draw image data to canvas cxt.drawImage(image, 0, 0, width, height); // cxt.drawImage(canvas.toDataURL("image/jpeg"), 0, 0, width, height); if ($('#canvas-container h3').length === 0) { $('#canvas-container').append('<h3>編集後の画像</h3>'); } $('#canvas-container').append(canvas); } catch (e2) { appError({ message: 'can not draw Image when image is resize' }); return false; } }); }()); });
<h1>Photo</h1> <div id="tool-container"> <div class="panel"> オリジナル画像の情報<br> 横のサイズ: <input id="org-width" type="text" size="5"> 縦のサイズ: <input id="org-height" type="text" size="5"> </div><!-- /panel --> <div class="panel"> <input id="width" size="5" type="text"> 比率固定 <input id="ratio" type="checkbox" name="ratio"> <input type="text" id="height" size="5"> <button id="resize">リサイズ</button> </div><!-- /panel --> <div class="panel"> <button id="create">編集した画像を表示</button> </div><!-- /panel --> </div><!-- /tool-container --> <div id="drop">File Drop</div> <div id="original"> <div id="rectangle"></div> </div> <div id="canvas-container"></div>
@charset "utf-8"; /** * Copyright 2012 Sawai Hiroshi * http://www.info-town.jp * */ /** font size 10 77 11 85 12 93 (was 93) 13 100 14 108 (was 107) 15 116 (was 114) 16 123.1 (was 122) 17 131 (was 129) 18 138.5 (was 136) 19 146.5 (was 144) 20 153.9 (was 152) 21 161.6 (was 159) 22 167 23 174 24 182 25 189 26 197 */ /* ------------------------------------------------------------------- body ------------------------------------------------------------------- */ #tool-container { padding: 3px; margin-bottom: 10px; background: #DDD; border: 1px solid #BBB; } .panel { padding: 15px; margin: 3px; background: #EFEFEF; } #drop { padding: 15px 8px; margin-bottom: 10px; background: #EFEFEF; border: 5px dotted #DDD; } #original { position: relative; } #original h3 { margin: 10px; } #rectangle { z-index: 2; position: absolute; display: none; top: 0; left: 0; width: 10px; height: 10px; border: 5px solid #999; }