本文介紹如何使用JavaScript和HTML5 Canvas元素來移動、調整大小和裁剪圖像，這些技術適用於圖片編輯器、照片分享等應用場景。藉助HTML5 Canvas繪圖功能，可以在瀏覽器端以比較簡單的方式來實現圖像預處理以減少文件上傳流量。
代碼和在線演示地址：http://wow.techbrood.com/fiddle/2580，可以先操作下，有個整體印象。
構建界面佈局和元素
HTML頁面由源圖片、Crop操作按鈕、裁剪矩形框以及圖片容器（含4個角的調整小方塊）組成，主體代碼如下：
<div class="component"> <div class="overlay"> <div class="overlay-inner"> </div> </div> <img class="resize-image" src="/assets/beauty.jpg" alt="image for resizing"> <button class="btn-crop js-crop">Crop<img class="icon-crop" src="/assets/crop.svg"> </button> </div>
img[class=resize-image] 元素爲本服務器圖片資源，是要進行調整和裁剪的圖片。注意出於安全策略，不能在瀏覽器中跨域操作圖片，否則會出現類似下面的報錯信息：
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
button[class=btn-crop] 是SVG矢量圖標按鈕。
div[class=overlay] 元素是裁剪矩形框。
此外圖片容器使用JavaScript動態包裝在 img[class=resize-image] 元素外部：
// Wrap the image with the container and add resize handles
$('.resize-image').wrap('<div class="resize-container"></div>')
.before('<span class="resize-handle resize-handle-nw"></span>')
.before('<span class="resize-handle resize-handle-ne"></span>')
.after('<span class="resize-handle resize-handle-se"></span>')
.after('<span class="resize-handle resize-handle-sw"></span>');實現大小調整的功能
大小調整通過先在Canvas上繪製一個對應大小的圖像，接着通過Canvas的toDataURL方法轉化爲base64編碼的字符串形式的圖片數據。
最後把該data:URL通過設置爲img的src屬性，附着到目標圖像元素上。
resizeImage = function(width, height){
resize_canvas.width = width;
resize_canvas.height = height;
resize_canvas.getContext('2d').drawImage(orig_src, 0, 0, width, height);
$('.resize-image').attr('src', resize_canvas.toDataURL("image/png"));
};實現移動功能
通過mouseup事件獲取新的位置，然後通過jQuery的offset方法來完成元素偏移。
moving = function(e){
var mouse={};
e.preventDefault();
e.stopPropagation();
mouse.x = (e.clientX || e.pageX) + $(window).scrollLeft();
mouse.y = (e.clientY || e.pageY) + $(window).scrollTop();
$container.offset({
'left': mouse.x - ( event_state.mouse_x - event_state.container_left ),
'top': mouse.y - ( event_state.mouse_y - event_state.container_top )
});
};實現裁剪功能
這個主要是實現一個居中的覆蓋矩形（overlay），接着通過計算背景圖片和該覆蓋矩形的偏移來獲取圖片裁剪區域的座標，
然後再通過Canvas的drawImage和toDataURL完成裁剪圖的繪製。
crop = function(){
var crop_canvas,
left = $('.overlay').offset().left - $container.offset().left,
top = $('.overlay').offset().top - $container.offset().top,
width = $('.overlay').width(),
height = $('.overlay').height();
crop_canvas = document.createElement('canvas');
crop_canvas.width = width;
crop_canvas.height = height;
crop_canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height);
window.open(crop_canvas.toDataURL("image/png"));
}最後再加上一些移動功能，如觸摸事件（Touch）和手勢（Gesture）檢測的支持。