web图片前端裁剪功能实现_利用html5 canvas技术实现图片裁剪

时间: 2018-03-07阅读: 1680标签: canvas

用户上传头像然后截图的需求很常见,很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延。最近正好学习了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>


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/471

Canvas基本图片操作与处理

Canvas是H5中新增的技术,主要运用在图片的处理和动画的绘制上,随着Canvas的使用场景越来越多,了解Canvas对平时开发大有裨益,这篇文章将介绍Canvas基本图片操作与处理

canvas.toDataURL()报错的解决方案全都在这了

最近在做一个创意类的图片合成工具,大概齐就是通过拼接自定义的文字和图片信息生成一张商品图片类似的功能,项目中用到了fabric.js这个画板库,最后一步在保存图片的时候报上面的一长串错误,墙内墙外搜了一遍

原生js使用canvas实现图片格式webp/png/jpeg在线转换

javascript完成图片格式转换: 通过input上传图片,使用FileReader将文件读取到内存中。将图片转换为canvas,canvas.toDataURL()方法设置为我们需要的格式,最后将canvas转换为图片。

js+canvas实现svg标签另存为图片

我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持。研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代码信息

canvas高效绘制10万图形,你必须知道的高效绘制技巧

最近的一个客户项目中,简化的需求是绘制按照行列绘制很多个圆圈。需求看起来不难,上手就可以做,写两个for循环。,IT行业的知识更新越来越快,能够以不变应万变的人,就是拥有良好的学习力、创造力、判断力和思考力的人。这些能力会让你在变换万千的技术海洋中,屹立不倒,不被淹没。

Canvas 点线动画案例

canvas 画的圆不是圆,是椭圆。不要在style里指定 Canvas 的宽度,Canvas 画布的尺寸的大小和显示的大小是有很大的区别的,在 canvas 里面设置的是才是 Canvas 本身的大小。不要企图通过闭合现有路径来开始一条新路径

javascript实例教程:使用canvas技术模仿echarts柱状图

canvas 画布是HTML5中新增的标签,可以通过js操作 canvas 绘图 API在网页中绘制图像。百度开发了一个开源的可视化图表库ECharts,功能非常强大,可以实现折线图、柱状图、散点图、饼图、K线图、地图等多种图表。

HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图

Canvas 是H5的一部分,允许脚本语言动态渲染图像。Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网页上渲染动态效果图。

canvas旋转画笔

canvas旋转画笔,可以使用rotate方法,rotate方法是绕着中心点旋转的,中心点默认是左上角的(0,0)位置,可以使用translate方法改变旋转的中心点,下面介绍两种方法旋转,可以根据自己的需求使用,关键是理解旋转的原理

使用canvas实现给图片添加平铺水印

最近项目中遇到一个需求,需要把一张图片加上平铺的水印,首先想到的是用canvas完成这种功能,因为我之前也没有接触过canvas,所以做这个功能的时候,就是一步一步的摸索中学习

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广