一个利用html5的图片裁剪功能（已解决ios压扁缩放等bug）

最新推荐文章于 2023-11-17 18:05:18 发布
最新推荐文章于 2023-11-17 18:05:18 发布
阅读量1.9w 收藏 5
点赞数
分类专栏： web开发 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cdnight/article/details/37029919
版权

推荐：

这一篇文章是早年为了解决图片裁剪的探索性文章，现在已经开放出了falsh版及html5版本的图片裁剪插件，各位有时间可以看看：

浮士德html5图片裁剪器2016开源版

浮士德头像裁剪flash版2016福利版

上面两个解决方案已经经过几个项目，可以应用于低级浏览器及现代浏览器，ipad，移动设备等。



前言：

手机越来越普遍，利用手机即时拍照裁剪图片的功能需求是存在的。不才目前供职于一家网站，里面也有触屏版需要裁剪图片。



技术难点：

一般难点：

html5对图片的读取处理。

意外难点：

难点1、ios6,7下面对超过2M的图片有一个限制，该限制使得假如你直接将2m的本地图片或者相片绘制到canvas画布上面会出现压扁现象。

难点2、ios拍照会有额外的exif信息（图片信息），该信息包含了拍摄日期，作者，还有一个很关键的orientation（角度），ios拍摄有四个角度，分别为1,3,6,8，里面的代表含义记不清楚，不过就是表示，正拍，左旋90度，右旋90度，旋转180度。由于ios有这个orientation，所以假如用户使用ios的其他角度拍摄，直接绘制到画布上面会出现图片颠倒，并非用户希望的情形。这时候你就要根据角度进行调整了。


三、部分代码，为何这是部分代码？因为涉及到前端后端及样式，我没法提供完整代码，而且，涉及到公司机密，我只能提供一些我在解决bug途中所写的测试代码。

譬如，将图片颠倒缩小在放大，用于用户拖动裁剪框以后，js获得用户拖动的坐标，高度宽度，再根据相片的orientation逆推原本的坐标及正确的高度宽度，然后裁剪出那一部分图像，再根据orientation调整角度，必要时需要颠倒，缩放图像。

<html>
<head>
    <title>画布的旋转、缩放等功能。</title>
    <script type="text/javascript" src="/static/mobile/lib/zepto.min.js"></script>
</head>
<body>
<h1>选择:<a href="javascript:changeImg(6);">右旋90度图片</a> <a href="javascript:changeImg(3);">旋转180度图片</a> <a href="javascript:changeImg(8);">左旋90度图片</a> <a href="javascript:changeImg(1);">正常图片</a></h1>
<img id="sourceImg" src="images/exif_info_6.jpg" style="max-width: 400px;max-height: 400px;"/>
<fieldset>
    <legend>设置需要裁剪的x，y，及裁剪高度及宽度。</legend>
    <div>
        <table>
            <tr><td>x:</td><td><input type="text" id="txt_x" value="600"/></td></tr>
            <tr><td>y:</td><td><input type="text" id="txt_y" value="800"/></td></tr>
            <tr><td>width:</td><td><input type="text" id="txt_width" value="1480"/></td></tr>
            <tr><td>height:</td><td><input type="text" id="txt_height" value="850"/></td></tr>
            <tr><td>Orientation:</td><td><input type="text" id="txt_Orientation" value="6"/></td></tr>
            <tr><td>画布缩小倍数:</td><td><input type="text" id="txt_scale" value="5"/></td></tr>
            <tr><td> </td><td><input type="button" value="裁剪到临时画布" id="btn_saveToTmp"></td></tr>
        </table>
    </div>
    <div>临时画布：</div>
    <div style="border: 1px green solid;">
        <canvas id="canvas_tmp"></canvas>
    </div>
    <div>最终画布</div>
    <div style="border: 1px red solid;">
        <canvas id="canvas_final"></canvas>
        <div id="results"></div>
    </div>
</fieldset>


</body>
</html>
<script type="text/javascript">
    function changeImg(_Orientation){
        switch (_Orientation){
            case 8:
                setX(750);setY(220);setW(1800);setH(1200);setScale(5); setOrientation(8);
                _sourceImg.src="images/exif_info_8.jpg";
                break;
            case 6:
                setX(600);setY(800);setW(1480);setH(850);setScale(5); setOrientation(6);
                _sourceImg.src="images/exif_info_6.jpg";
                break;
            case 3:
                setX(600);setY(450);setW(2300);setH(1450);setScale(5);setOrientation(3);
                _sourceImg.src="images/exif_info_3.jpg";
                break;
            case 1:
                setX(600);setY(450);setW(2300);setH(1450);setScale(5);setOrientation(1);
                _sourceImg.src="images/exif_info_1.jpg";
                break;
        }
    }
    var _sourceImg=document.getElementById("sourceImg");
    var tmpCanvas=document.getElementById("canvas_tmp");
    var tmpContext=tmpCanvas.getContext("2d");
    var finalCanvas=document.getElementById("canvas_final");
    var finalContext=finalCanvas.getContext("2d");

    function getX(){
        return parseInt($("#txt_x").val());
    }
    function getY(){
        return parseInt($("#txt_y").val());
    }
    function getW(){
        return parseInt($("#txt_width").val());
    }
    function getH(){
        return parseInt($("#txt_height").val());
    }
    function getScale(){
        return parseFloat($("#txt_scale").val());
    }
    function getOrientatin(){
        return parseFloat($("#txt_Orientation").val());
    }
    function setX(x){
        $("#txt_x").val(x);
    }
    function setY(x){
        $("#txt_y").val(x);
    }
    function setW(x){
        $("#txt_width").val(x);
    }
    function setH(x){
        $("#txt_height").val(x);
    }
    function setScale(x){
        $("#txt_scale").val(x);
    }
    function setOrientation(x){
        $("#txt_Orientation").val(x);
    }
    function drawToTmpCanvas(x,y,w,h){
        tmpContext.clearRect(0,0,tmpCanvas.width,tmpCanvas.height) ;
        var _cW=parseFloat(w/getScale());
        var _cH=parseFloat(h/getScale());
        tmpCanvas.width=_cW;
        tmpCanvas.height=_cH;


        tmpContext.drawImage(_sourceImg,x,y,w,h,0,0,_cW,_cH);
    }


    $("#btn_saveToTmp").click(function(){
        drawToTmpCanvas(getX(),getY(),getW(),getH());
        var _cW=parseFloat(getW()/getScale());
        var _cH=parseFloat(getH()/getScale());
        $("#results").html("");
        var newCanvas=document.createElement("canvas");
        var newContext=newCanvas.getContext("2d");
        $("#results").append(newCanvas);
        drawToFinal(tmpCanvas,newCanvas,newContext,_cW,_cH,getOrientatin());
    });
    function drawToFinal(_sourceCanvas,_drawCanvas,_drawContext,_sw,_sh,_Orientation){

        switch(_Orientation){
            case 8:
                // 90 rotate left     --需要90度向左旋转。。那么，这个 PixelYDimension就是宽度了，PixelXDimension就是高度了。
                _drawCanvas.width=_sh;
                _drawCanvas.height=_sw;

                var tSetting={
                    dx:0,
                    dy:0,
                    dw:0,
                    dh:0,
                    transX:0,
                    transY:0
                };
                tSetting.dw=_sh;
                var scale2=_sw/_sh;
                tSetting.dh=parseFloat(tSetting.dw/scale2);
                tSetting.dy=(_sw-tSetting.dh)/2;
                tSetting.transY=_sw/2;
                tSetting.transX=_sh/2;
                _drawContext.translate(tSetting.transX,tSetting.transY);
                _drawContext.rotate(-0.5*Math.PI);
                _drawContext.scale(scale2,scale2);
                _drawContext.drawImage(_sourceCanvas,0,0,_sw,_sh,tSetting.dx-tSetting.transX,tSetting.dy-tSetting.transY,tSetting.dw,tSetting.dh);
                break;
            case 3:
                //180向左旋转 (右旋转也可以。)
                _drawCanvas.width=_sw;
                _drawCanvas.height=_sh;

                var tSetting={
                    dx:0,
                    dy:0,
                    dw:0,
                    dh:0,
                    transX:0,
                    transY:0
                };
                tSetting.dw=_sw;
                tSetting.dh=_sh;
                tSetting.transY=_sh/2;
                tSetting.transX=_sw/2;
                _drawContext.translate(tSetting.transX,tSetting.transY);
                _drawContext.rotate(1*Math.PI);
                //_drawContext.scale(scale2,scale2);
                _drawContext.drawImage(_sourceCanvas,0,0,_sw,_sh,tSetting.dx-tSetting.transX,tSetting.dy-tSetting.transY,tSetting.dw,tSetting.dh);
                break;
            case 6:
                //90 rotate right 需要向右旋转90度，PixelYDimension就是宽度了，PixelXDimension就是高度了。
                _drawCanvas.width=_sh;
                _drawCanvas.height=_sw;

                var tSetting={
                    dx:0,
                    dy:0,
                    dw:0,
                    dh:0,
                    transX:0,
                    transY:0
                };
                tSetting.dw=_sh;
                var scale2=_sw/_sh;
                tSetting.dh=parseFloat(tSetting.dw/scale2);
                tSetting.dy=(_sw-tSetting.dh)/2;
                tSetting.transY=_sw/2;
                tSetting.transX=_sh/2;
                _drawContext.translate(tSetting.transX,tSetting.transY);
                _drawContext.rotate(0.5*Math.PI);
                _drawContext.scale(scale2,scale2);
                _drawContext.drawImage(_sourceCanvas,0,0,_sw,_sh,tSetting.dx-tSetting.transX,tSetting.dy-tSetting.transY,tSetting.dw,tSetting.dh);
                break;
            case 1:
                //正常状态。
                _drawCanvas.width=_sw;
                _drawCanvas.height=_sh;

                var tSetting={
                    dx:0,
                    dy:0,
                    dw:0,
                    dh:0,
                    transX:0,
                    transY:0
                };
                tSetting.dw=_sw;
                tSetting.dh=_sh;
                tSetting.transY=_sh/2;
                tSetting.transX=_sw/2;
                _drawContext.translate(tSetting.transX,tSetting.transY);
               //_drawContext.rotate(1*Math.PI);
                //_drawContext.scale(scale2,scale2);
                _drawContext.drawImage(_sourceCanvas,0,0,_sw,_sh,tSetting.dx-tSetting.transX,tSetting.dy-tSetting.transY,tSetting.dw,tSetting.dh);
                break;
                break;
        }
    }

</script>


测试用结果如下：






而实际上线的效果如下：


打开图片裁剪页面：


点击头像，然后读取本地图片：


拖动裁剪框及下面的拖动条以调整裁剪框大小及位置，最后得到：



保存裁剪结果：


done。

码农下的天桥
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
专栏目录
HTML5制作图片自由裁剪
05-11
HTML5制作图片自由裁剪
无需Flash实现图片裁剪——HTML5中级进阶
WebDog—王西西
04-11 882
图片裁剪上传，不仅是一个很贴合用户体验的功能，还能够统一特定图片尺寸，优化网站排版，一箭双雕。 但是我不会Flash....
HTML5 实现本地图片裁剪
Deng872347348的博客
10-27 4281
HTML5 实现本地图片裁剪 文章目录HTML5 实现本地图片裁剪1.知识点1.HTML 结构与 CSS 样式2.初始化3 实现 handleFiles，获取文件，读取文件并生成 url4.实现 paintImage 方法5 实现 cutImage 方法6 编写 drag 方法7 保存截图8 完整 js 代码 这次小的案例是利用 HTML5 的 canvas 技术，结合 HTML5 的 File API 来实现图片的本地裁剪，从一个大图片中选取裁剪区域， 1.知识点 canvas JavaScript
html5 图片 裁切 php,html5的应用-图像裁剪效果图
weixin_29883023的博客
06-04 206
图像用html5怎么裁剪的，之后绘制的图形都会采用这个裁剪区域，要取消这个裁剪区域就需要用到保存恢复状态，下面有讲效果截图：代码：canvas// 图像裁剪：context.clip()// context.clip()只绘制封闭路径区域内的图像，不绘制路径外部图像，用的时候// 先创建裁剪区域// 再绘制图像(之后绘制的图形都会采用这个裁剪区域，要取消这个裁剪区域就需要用到保存恢复状态，下面有讲...
html5图片在线剪辑,Web端裁剪图片方法
weixin_34121505的博客
05-31 631
由于在Web端，JavaScript不能直接处理本地文件，因此可以在后台裁剪图片，或者利用html5的canvas来处理。方法1：传送到后台剪切步骤1：上传图片到后台，向前端返回图片URL利用input标签，将文件发送到后台。可以使用jQuery中的ajaxFileUpload方法$.ajaxFileUpload({url: 'live/apply/uploadImage', //用于文件上传的服...
iOS 图片裁剪 自定义大小 图片可缩放
01-19
2. **自定义裁剪区域**：要实现自定义裁剪功能，我们需要创建一个矩形裁剪框，用户可以在这个框内选择想要的部分。这通常通过UI视图（如UIView）来实现，我们可以设置裁剪框的大小和位置，以便用户可以自由调整。 3...
iOS利用UIScrollView实现图片的缩放实例代码
08-30
UIScrollView是一个可滚动的视图，它可以容纳多个子视图，并且提供了平移和缩放的功能。以下是如何利用UIScrollView实现图片的缩放实例代码的详细步骤。 **第一步：创建并配置UIScrollView** 首先，我们需要在控制...
iOS实现裁剪框和图片剪裁功能
09-02
主要为大家详细介绍了iOS实现裁剪框和图片剪裁功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
iOS 图片裁剪 + 旋转
08-31
UIGraphicsBeginImageContext 函数来创建一个位图图形上下文，然后使用 CGContextTranslateCTM 函数来移动图形上下文的原点，然后使用 CGContextRotateCTM 函数来旋转图形上下文，最后使用 CGContextDrawImage 函数...
iOS中实现动态区域裁剪图片功能实例
08-28
本文将详细介绍如何在iOS中创建这样一个功能，包括显示图片、设置裁剪区域、支持用户操作以及执行实际的图片裁剪。 1. 显示图片： 在展示图片时，通常使用UIImageView。我们需要考虑UIImageView的contentMode属性，...
HTML5实现图片裁剪功能.zip
01-09
HTML5实现图片裁剪功能.zip
移动端html5+jQuery图片裁剪插件头像
11-30
html5+jquery以手机相册或相机拍照方式来获取图片，并对图片压缩、缩放、裁剪，与微信上传头像类似，封装了类，配置简单，进入myDemo/index.html可运行，已测试ok。
Html5图片剪裁预览上传demo
08-30
HTML5图片剪裁预览上传demo
前端上传图片可裁剪-photoClip.js-支持移动端.rar
06-05
web和移动端h5都能使用的一款，图片剪切上传插件，亲测可用
html5头像裁剪
02-18
网上找到的，感觉很不错，分享给大家，用html5做头像裁剪。
html实现图片裁剪处理(附源码)
最新发布
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
11-17 2269
html实现图片裁剪处理(附源码)，支持图片放大缩小，裁剪图片，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
html5 剪切图片,3.2 裁剪图像 - HTML5 Canvas 实战
weixin_36301830的博客
06-05 550
本节，我们将裁剪图像的一部分，然后把其结果绘制到画布上。图3-2 裁剪图像绘制步骤按照以下步骤，裁剪图像的一部分，再把结果绘制到画布：1. 定义画布上下文：window.onload = function(){var canvas = document.getElementById("myCanvas");var context = canvas.getContext("2d");2. 创...
HTML如何剪切图片,css如何截取图片？
weixin_39695490的博客
06-10 1795
CSS中有一个属性叫做clip，为修剪，剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。使用此属性即可截取图片。css使用clip属性裁剪图片：img{position:absolute;clip:rect(0px 50px 200px 0px)}clip 属性剪切了一幅图像：效果如下：clip 属性剪裁绝对定位元素。当一幅图像的尺寸大于包含它的元素时会发生什么呢？"clip" 属性...
html 图片剪裁压缩,HTML5 canvas实现图片拉伸、压缩与裁剪
weixin_29465407的博客
06-05 1014
前言：我们在网页中经常会用到图片展示，通常情况下会给一个固定的宽高来显示这个图片，然而从服务器端上传的图片大小是不确定的，如果直接按默认填充这个框有时候就会特别丑orz。作为一个完(wai)美(mao)主(xie)义(hui)者，让图片们尽可能优美地展现在网页上是一个很愉悦的责任。今天就给太瘦小图片们伸展伸展或者给XXXL号减减肥吧(～￣▽￣)～一、canvas绘图API工欲善其事；必先利其器。隆...
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值