canvas裁剪图片尺寸问题

谁践踏了优雅 2024-04-18 22:21 80阅读 0赞

个人见解，欢迎大家一起交流学习n(\*≧▽≦\*)n

![20190912171245823.gif][]

得到原始的图片尺寸

let myImage = document.getElementById("tailoringImg");
            if (typeof myImage.naturalWidth == "undefined") {
                // IE 6/7/8
                let i = new Image();
                i.src = myImage.src;
                naturalWid = i.width;
                naturalHei = i.height;
            } else {
                // HTML5 browsers
                naturalWid = myImage.naturalWidth;
                naturalHei = myImage.naturalHeight;
            }

原始图片尺寸与现在图片尺寸缩放比例

scaleWid = naturalWid/imgWid;
            scaleHei = naturalHei/imgHei;

得到开始剪切的坐标位置

let parentOffset = $(this).parent().offset();
            let relX = e.pageX - parentOffset.left;
            let relY = e.pageY - parentOffset.top;

使用canvas画出截取的图片

let myCanvas = document.getElementById("myCanvas");
                let context = myCanvas.getContext("2d");
                context.clearRect(0, 0, myCanvas.width, myCanvas.height);
                let img = document.getElementById("tailoringImg");
                context.drawImage(img, relX*scaleWid, relY*scaleHei, width*scaleWid, height*scaleHei, 0, 0, width, height); //context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

完整代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图片裁剪</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            html, body {
                width: 100%;
                height: 100%;
            }
    
            .maskLayer {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 1;
                background: rgba(3, 20, 32, 0.3) none repeat scroll 0 0;
            }
        </style>
    </head>
    <body>
    <div class="maskLayer">
        <div style="display: flex;justify-content: center;margin-top: 20px">
            <div style="position:relative;width: 500px;height: 500px;margin-right: 60px">
                <img id="tailoringImg" style="position:absolute;max-width: 500px;max-height: 500px" src="./img/img3.jpg"
                     alt="">
                <div id="tailoringImgDiv" style="z-index: 2;position: absolute;opacity: 0"></div>
                <div id="cuttingBox" style="z-index: 1;position: absolute;"></div>
            </div>
            <div style="background-color: #ffffff;">
                <canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
                    Your browser does not support the HTML5 canvas tag.
                </canvas>
            </div>
        </div>
    </div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        let imgWid = 0;
        let imgHei = 0;
        let scaleWid = 0;
        let scaleHei = 0;
        $(function () {
            let naturalWid = 0;
            let naturalHei = 0;
            imgWid = $("#tailoringImg").width();
            imgHei = $("#tailoringImg").height();
            $("#tailoringImgDiv").css("width", imgWid);
            $("#tailoringImgDiv").css("height", imgHei);
            let myImage = document.getElementById("tailoringImg");
            if (typeof myImage.naturalWidth == "undefined") {
                // IE 6/7/8
                let i = new Image();
                i.src = myImage.src;
                naturalWid = i.width;
                naturalHei = i.height;
            } else {
                // HTML5 browsers
                naturalWid = myImage.naturalWidth;
                naturalHei = myImage.naturalHeight;
            }
            scaleWid = naturalWid/imgWid;
            scaleHei = naturalHei/imgHei;
            console.log("scaleWid:"+scaleWid+" scaleHei:"+scaleHei+" naturalHei"+naturalHei)
        })
    
        $("#tailoringImgDiv").mousedown(function (e) {
            let parentOffset = $(this).parent().offset();
            let relX = e.pageX - parentOffset.left;
            let relY = e.pageY - parentOffset.top;
            let clientX = e.clientX;
            let clientY = e.clientY;
            let width = 0;
            let height = 0;
            $("#tailoringImgDiv").mousemove(function (event) {
                width = Math.abs(clientX - event.clientX);
                height = Math.abs(clientY - event.clientY);
                $("#cuttingBox").css("width", width);
                $("#cuttingBox").css("height", height);
                if ((clientX - event.clientX) > 0 && (clientY - event.clientY) < 0) {
                    relX = event.pageX - parentOffset.left;
                    relY = e.pageY - parentOffset.top;
                } else if ((clientX - event.clientX) < 0 && (clientY - event.clientY) > 0) {
                    relX = e.pageX - parentOffset.left;
                    relY = event.pageY - parentOffset.top;
                } else if ((clientX - event.clientX) > 0 && (clientY - event.clientY) > 0) {
                    relX = event.pageX - parentOffset.left;
                    relY = event.pageY - parentOffset.top;
                }
                $("#cuttingBox").css("border-top", relY + "px solid rgba(3, 20, 32,0.3)");
                $("#cuttingBox").css("border-left", relX + "px solid rgba(3, 20, 32,0.3)");
                $("#cuttingBox").css("border-right", (imgWid - width - relX) + "px solid rgba(3, 20, 32,0.3)");
                $("#cuttingBox").css("border-bottom", (imgHei - height - relY) + "px solid rgba(3, 20, 32,0.3)");
                let myCanvas = document.getElementById("myCanvas");
                let context = myCanvas.getContext("2d");
                context.clearRect(0, 0, myCanvas.width, myCanvas.height);
                let img = document.getElementById("tailoringImg");
                context.drawImage(img, relX*scaleWid, relY*scaleHei, width*scaleWid, height*scaleHei, 0, 0, width, height); //context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
            })
        })
    
        $("#tailoringImgDiv").mouseup(function () {
            $("#tailoringImgDiv").unbind("mousemove");
        })
    </script>
    </body>
    </html>

[20190912171245823.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/cc6e3e98795d45efbd00a8df4f3bc291.gif