Canvas 应用 互动版

实现图像大小调整


  图像大小调整通过先在Canvas上绘制一个对应大小的图像,接着通过CanvastoDataURL方法转化为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"));    
};