用户上传头像然后截图的需求很常见，很多做法是把图像发送到后端，把裁剪后的结果发送给浏览器，这种方式会增加处理时延。最近正好学习了HTML5里的canvas，发现它的图片处理功能比较强大，就打算用canvas提供的API实现纯前端的剪切。这里头关键有三步：显示未经处理的图片，得到裁剪区域，显示裁剪后的区域。我们分别讨论：

1. 显示未经处理的图片

创建一个canvas，用drawImage(img,0,0,canvas.width,canvas.height)就可以。主要这里的img是一个Image类的object, 用new Image创建。

var img = new Image();

    img.src = "./beauty.jpg";

img.onload = function(){

        cxt1.drawImage(img,0,0,canvas1.width,canvas1.height); //一定要写在onload回调中，否则看不到图片

}
       2. 得到裁剪区域
        用一个position:absolute的div框来选择裁剪区域，通过javascript提供的方法能得到该div在canvas中所处的位置(x,y)，然后用getImageData(srcX,srcY,width,height)得到选择框中的像素点。 这里需要知道，通过canvas.getBoundingClientRect().left和canvas.getBoundingClientRect().top可以得到canvas相对于浏览器视图的左边和上边位置。
       3. 显示裁剪后的区域
       这部分是最复杂的。假设getImageData得到了imgData, 需要创建一个canvas2,用canvas2.putImageData(imgData,0,0,canvas2.width,canvas2.height)将选择框里的像素绘制到这个临时的canvas2里。然后用canvas2.toDataURL("image/png")将canvas2转为dataurl类型的图片。有了dataurl后，就可以正常显示裁剪后的图片了。
 ×××××××××××××××××××××此处为分割线，算法介绍完毕××××××××××××××××××
        那么问题来了。为什么不能直接把getImageData得到的imgData通过putImageData绘制到最终要显示的区域，而非要创建一个临时的canvas2(不再页面上显示）呢？其实这是我想出来的一个折中方案。用putImageData绘制的画布上，只能按照等比例或者更小比例显示imgData，如果你想把剪切出来的图片放大显示，putImageData是不能支持的（这个结论是我经过测试发现的）。所以为了看到放大后的剪切区域（即使牺牲清晰度），就要用drawImage方法了，而drawImage的第一个参数不能是一堆像素数据，就只能用一个临时的canvas来作为像素数据和dataurl之间的桥梁了。
       最后，上一段测试代码（可运行）：
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

.mark{

    position:absolute;

    height:100px;

    width:100px;

    left:100px;

    top:180px;

    border:1px solid #000;

    cursor:move;

}

    </style>

</head>

<body>

<canvas id="c1"></canvas> //显示原图像

<div class="mark" id="mark"></div>

<canvas id="c3"></canvas> //显示剪切后的图像

<script>

    var canvas1 = document.getElementById("c1")

    var oMark = document.getElementById("mark")

    var canvas3= document.getElementById("c3")

     canvas1.height = 300;

    canvas1.width=300;

    canvas3.height=100;

    canvas3.width=100;

    var cxt1 = canvas1.getContext("2d")

    var img = new Image();

    img.src = "./beauty.jpg";

    var srcX = oMark.offsetLeft-canvas1.getBoundingClientRect().left;

    var srcY = oMark.offsetTop-canvas1.getBoundingClientRect().top;

    var sWidth = oMark.offsetWidth;

    var sHeight = oMark.offsetHeight;

    var canvas2 = document.createElement("canvas")

    var cxt2=canvas2.getContext("2d")

    img.onload = function(){

        cxt1.drawImage(img,0,0,canvas1.width,canvas1.height);

        var dataImg = cxt1.getImageData(srcX,srcY,sWidth,sHeight)

        canvas2.width = sWidth;

        canvas2.height = sHeight;

        cxt2.putImageData(dataImg,0,0,0,0,canvas2.width,canvas2.height)

        var img2 = canvas2.toDataURL("image/png");

        var cxt3=canvas3.getContext("2d")

        var img3 = new Image();

        img3.src = img2;

        img3.onload  = function(){

            cxt3.drawImage(img3,0,0,canvas3.width,canvas3.height)

        }

    }

</script>

</body>

</html>

Canvas 实现图片剪切的更多相关文章

  1. canvas学习笔记：canvas对图片的像素级处理--ImageData的应用

    学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageD ...

  2. iOS开发UI篇—Quartz2D使用（图片剪切）

    iOS开发UI篇—Quartz2D使用(图片剪切) 一.使用Quartz2D完成图片剪切 1.把图片显示在自定义的view中 先把图片绘制到view上.按照原始大小,把图片绘制到一个点上. 代码: - ...

  3. 【iOS】Quartz2D图片剪切

    一.使用Quartz2D完成图片剪切1.把图片显示在自定义的view中 先把图片绘制到view上.按照原始大小,把图片绘制到一个点上. 代码: - (void)drawRect:(CGRect)rec ...

  4. 图片上传，图片剪切jquery.imgareaselect

    ---恢复内容开始--- <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  5. 快速解决Canvas.toDataURL 图片跨域的问题

    出现Canvas.toDataURL 图片跨域问题怎么解决呢?下面小编就为大家带来一篇Canvas.toDataURL 图片跨域问题的快速解决方法.一起跟随小编过来看看吧 如题,在将页面的图片地址进行 ...

  6. 用canvas实现图片滤镜效果详解之灰度效果

    前面展示了一些canvas实现图片滤镜效果的展示,并且给出了相应的算法,下面来介绍一下具体的实现方法. 前面介绍的特效中灰度效果最简单,就从这里开始介绍吧. 1.获取图像数据 img.src = ’h ...

  7. android——拍照，相册图片剪切其实就这么简单

    接触android这么久了.还没有真正的浩浩看看android拍照,相册图片剪切到底是怎么回事,每次都是从别人的代码一扣,就过来了.其实,谷歌提供的API已经很强大.只需要用的好,就那么几句就可以搞定 ...

  8. 图片剪切之Croppic插件

    前几天做图片上传时需要进行图片的剪切和缩放,上网查找时找到了这个插件.样式很好看,功能也很OK.但是网上都是php进行后台处理图片的例子,然后只好慢慢琢磨C#的处理.插件地址是:http://www. ...

  9. 用JavaScript实现图片剪切效果

    学会如何获取鼠标的坐标位置以及监听鼠标的按下.拖动.松开等动作事件,从而实现拖动鼠标来改变图片大小. 还可以学习css中的clip属性. 一.CSS实现图片不透明及裁剪效果. 图片剪切三层结构 1.第 ...

随机推荐

  1. 服务器未能识别 HTTP 标头 SOAPAction 的值

    SOAPAction HTTP request header被用来标识SOAP HTTP请求的目的地,其值是个URI地址.SOAP发送并不限制格式.URI特征或其必须可解析,那么在这种情况下,发送一个 ...

  2. C# 系统错误日志处理类

    编写软件,难免会有一些异常,针对异常我们在实际的开发中相比都有一些,捕获异常的处理办法.把软件运行错误信息写成一个 错误日志文件很有必要.当我们在客户那边安装调试时就会更加快捷的,知道错误在哪里.否则 ...

  3. ubuntu graphic cannot display

    1.ubuntu resuce mode 2.mount -o,remount,rw /dev/sda6 / 3.dhclient eth0 4.apt-get update apt-get inst ...

  4. HTML元素事件

    事件触发模型 简要说明 onclick 鼠标单击链接 ondbclick 鼠标双击链接 onmousedown 鼠标在链接的位置按下 onmmouseout 鼠标移出链接所在的位置 onmouseov ...

  5. jsonp与JAVA的配合使用

    一.客户端 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...

  6. AngularJS-系统代码的配置和翻译

    前言:在Web开发中常常会遇到这样的情况,有些页面的下拉选项是固定不变的几个,比如:性别,一般有男.女.保密等.对于这样的情形我们一般在数据库中存储的是数字或者其对应的代码,如果是可维护的需要系统给出 ...

  7. （Hibernate进阶）Hibernate映射——一对一单向关联映射（五）

    映射原理 两个实体对象之间是一对一的关联映射,即一个对象只能与另外唯一的一个对象相对应.例如:一个人(Person)只有一张身份证(IdCard).我们看一下这个例子的对象模型,如下图所示: 对象模型 ...

  8. 这些年正Android - 身在他乡

    “从不敢想到想去做到,做到我想的,事实证明我并不像他们想象的那样脆弱.我只是需要一盏灯,一架钢琴,一支麦克风.曾经想象过做一名医生救死扶伤,也曾想过做律师,做记者,做奥运冠军,但是都没有结果.因为我最 ...

  9. Linux 用户和用户组管理

    Linux 用户和用户组管理 Linux系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然后以这个账号的身份进入系统. 用户的账号一方面可以帮助 ...

  10. js的倒计时在ie下显示NAN的最佳解决办法

    写了一个倒计时,原代码如下: var times = new Date(); var timesout = new Date("2016-6-7"); var timesg = t ...