h5画布canvas实现图片在线裁剪功能及案例

2021-05-09 阅读：1821 分类：前端标签： html

有时用户上传的图片尺寸和我们要求的尺寸不一样。这时就需要给上传图片加个裁剪功能。

具体我们可以通过画布来实现：

<html>

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>上传图片裁剪</title>
    </head>
        <style type="text/css">
            html,body{
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            .toBar{
                width: 100%;
                padding: 15px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1;
            }
            .toBar label input{
                display: none;
            }
            .toBar label,.toBar button{
                display: inline-block;
                width: 100px;
                text-align: center;
                padding: 10px 0;
                font-size: 12px;
                color: #fff;
                background: #8080ca;
                border-radius: 6px;
                cursor: pointer;
            }
            .toBar button{
                border: none;
                float: right;
            }
            .img_content,canvas{
                position: absolute;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
            }
            canvas{
                border: 1px solid #333;
            }
        </style>
    <body>
        <div class="toBar">
            <label>
                选择图片
                <input type="file" />
            </label>
            <button type="button">使用</button>
        </div>
        <div class="img_content">
            <img src="images/bg1.jpg" />
        </div>
        <!--裁剪图片框。宽高为定义裁剪出的图片大小-->
        <canvas width="300" height="300"></canvas>
        
        <script src="img.js"></script>
        <script src="require.js"></script>
        <script src="main.js"></script>
        <script>
            window.addEventListener("load",function(){
                var $input = document.querySelector("input");
                var $img = document.querySelector("img");
                var $canvas = document.querySelector("canvas");
                //选择图片
                $input.addEventListener("change",function(){
                    $img.src = getFileUrl(this);
                },false);
                
                
                
                var myCrop;
                require(["jquery", 'hammer', 'tomPlugin', "tomLib", 'hammer.fake', 'hammer.showtouch'], function($, hammer, plugin, T) {
                    document.addEventListener("touchmove", function(e) {
                            e.preventDefault();
                    });
                    var opts = {
                            cropWidth: $canvas.width,
                            cropHeight: $canvas.height
                    },
                    previewStyle = {
                        x: 0,
                        y: 0,
                        scale: 1,
                        rotate: 0,
                        ratio: 1
                    },
                    transform = T.prefixStyle("transform"),
                    myCrop = T.cropImage({
                        bindFile: $("input"),
                        enableRatio: false, //是否启用高清,高清得到的图片会比较大
                        canvas: $canvas, //放一个canvas对象
                        cropWidth: opts.cropWidth, //剪切大小
                        cropHeight: opts.cropHeight,
                        bindPreview: $("img"), //绑定一个预览的img标签
                        useHammer: true, //是否使用hammer手势，否的话将不支持缩放
                        oninit: function() {
        
                        },
                        onLoad: function(data) {
                            //用户每次选择图片后执行回调
                            resetUserOpts();
                            previewStyle.ratio = data.ratio;
                            $("img").attr("src", data.originSrc).css({
                                width: data.width,
                                height: data.height
                            }).css(transform, 'scale(' + 1 / previewStyle.ratio + ')');
                            myCrop.setCropStyle(previewStyle)
                        }
                    });
        
                    function resetUserOpts() {
                        $("canvas").hammer('reset');
                        previewStyle = {
                            scale: 1,
                            x: 0,
                            y: 0,
                            rotate: 0
                        };
                        $("img").attr("src", '');
                    };
                    $("canvas").hammer({
                        gestureCb: function(o) {
                            //每次缩放拖拽的回调
                            $.extend(previewStyle, o);
                            console.log("用户修改图片", previewStyle)
                            $("img").css(transform, "translate3d(" + previewStyle.x + 'px,' + previewStyle.y + "px,0) rotate(" + previewStyle.rotate + "deg) scale(" + (previewStyle.scale / previewStyle.ratio) + ")")
                        }
                    });
                    
                    $("button").on("click", function() {
                        myCrop.setCropStyle(previewStyle)
                        var src = myCrop.getCropFile({});
                        console.log(src)
                        // window.location.href = src;
                    });
                });
                
                
            },false);
        </script>
        
    </body>

</html>

附件：相关demo及js文件下载：https://qiniu.tpxhm.top/code/h5CanvasImg.zip

最终效果展示：