Canvas实例教程:图像移动、大小调整和裁剪

原创 2014年11月03日 21:28:53

本文介绍如何使用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)检测的支持。

参考链接

1. http://madebymike.com.au/

2. http://stackoverflow.com/questions/18922880/html5-canvas-resize-downscale-image-high-quality

3. http://www.techbrood.com/ideas?q=Makethumbnails

by iefreer

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/iefreer/article/details/40740465

利用canvas实现鼠标拖拽效果的一种方法

利用canvas实现鼠标拖拽功能,当在元素上按下鼠标并移动时,元素跟着鼠标移动。 效果: 主要思路: 当鼠标按下时,利用isPointInPath判断鼠标位置是否在元素上,如果在则鼠标移动时元素...
  • weixin_36185028
  • weixin_36185028
  • 2016-12-21 18:48:22
  • 3541

HTML5 Canvas 移动

移动 Context对象可以通过调用translate()方法来移动Canvas画布中坐标原点的位置。translate()方法的原型如下: void translate(x, y); 用于...
  • coding_or_coded
  • coding_or_coded
  • 2011-12-14 11:18:34
  • 6005

html5 canvas 自定义画图裁剪图片

html5 给我们带来了极大惊喜的canvas标签,有了它我们可以在浏览器客户端处理图片,不需要经过服务器周转。可以实现: 1、照片本地处理,ps有的一些基本功能都有 2、结合js可以实现一些很炫...
  • taoerchun
  • taoerchun
  • 2015-09-16 17:25:05
  • 3617

HTML5 本地裁剪图片并上传至服务器 canvas图片上传 canvas图片裁剪

很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的。但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要...
  • u014071104
  • u014071104
  • 2016-05-26 11:03:07
  • 4667

HTML5 canvas 图片裁剪 图片裁切

  • 2013年10月30日 17:35
  • 82KB
  • 下载

HTML5 -canvas拖拽、移动 绘制图片可操作移动,拖动

关于canvas 的基础知识就不多说了,可以进这个网址学习 http://www.w3school.com.cn/html5/html_5_canvas.asp 对于canvas 和 SVG 其...
  • freedomVenly
  • freedomVenly
  • 2018-01-12 12:04:09
  • 1888

Canvas实现 图片裁剪、移动、放大缩小以及图片的合成

Canvas实现 图片裁剪、移动、放大缩小以及图片的合成前段时间项目上需要做一个合成图片的小活动,参考了很多案例,发现还是用canvas最为简便。[StackEdit][6]:目录用 [TOC]来生成...
  • Lucky_Lovely
  • Lucky_Lovely
  • 2017-09-22 16:42:37
  • 837

Canvas的应用,图片的移动、旋转、缩放

Canvas的应用,图片的移动、旋转、缩放
  • monster123321
  • monster123321
  • 2017-01-13 16:00:59
  • 1125

CANVAS移动、缩放、旋转画入的图片

自己做的一个CANVAS移动、缩放、旋转画入的图片demo: CANVAS touch测试 *{ margin:0px; padding:0px; -webkit-tap-...
  • qq_16494241
  • qq_16494241
  • 2016-08-16 14:49:33
  • 8136

实现canvas 图片拖拽旋转移动 点击转成base64

  • 2016年04月14日 16:38
  • 94KB
  • 下载
收藏助手
不良信息举报
您举报文章:Canvas实例教程:图像移动、大小调整和裁剪
举报原因:
原因补充:

(最多只允许输入30个字)