原生JS对图片进行裁剪

最新推荐文章于 2024-03-07 11:10:13 发布

前端小白白~

最新推荐文章于 2024-03-07 11:10:13 发布

阅读量1.3k

点赞数 4

分类专栏：前端 JS模块文章标签： javascript

本文链接：https://blog.csdn.net/qq_37552042/article/details/106115148

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

JS模块

2 篇文章 0 订阅

订阅专栏

来了一个JS图片裁剪的功能，用原生JS写了一下，遇到了一些坑，这里记录一下，话不多说，直接上代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>原生js实现图片裁剪</title>
</head>
<body>
<!-- <input id="npt" type="file"> -->
<br>
原始图片： <img  id="strategyImage" src="demo.jpg" alt="">
生成：<img id="later" style="width: 720px" src="" alt="">
</body>
<script>

    let canvas = document.createElement("canvas");// 创建canvas对象
    let ctx = canvas.getContext('2d');
    let original = document.getElementById("strategyImage");
    let later = document.querySelector("#later");
    let clone = [{x:0,y:0},{xx:720,yy:720}];//x y为要裁剪的左上角的坐标，xx yy为右下角的坐标

 
    getImgBase64()

    // 图片转base64
    function image2Base64(img) {
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        let dataURL = canvas.toDataURL("image/png");
        getImage(dataURL)
        return dataURL;
    }

    // 获取图片base64数据
    function getImgBase64(){
        var base64="";
        var img = new Image();
        img.setAttribute('crossOrigin','anonymous');
        img.src=original.src;
        img.onload=function(){
            base64 = image2Base64(img);
        }
    }
    // 创建图片
    var getImage = function(b64){
        // 创建图片对象
        var image = new Image();
        image.src = `${b64}`;
        image.onload = function(){
            // 获取原图宽高
            var height = this.height;
            var width = this.width;
            //设置canvas大小与原图宽高一致
            canvas.height = height;
            canvas.width = width;
            // 在canvas绘制图片
            ctx.drawImage(this,0, 0,width,height);
            // 截图：
            drawRect();
        }
    };

    // 绘制截图矩阵
    var drawRect = function (){

        let strategyImage = document.querySelector('#strategyImage');           //图片
        console.log(strategyImage,"aaaz")
        let ImgHeight = strategyImage.height;                                   //图片实际高度
        let ImgWidth = strategyImage.width;                                     //图片实际宽度
        let ActualAspectRatio = ImgHeight / ImgWidth;                           //实际高宽比
        let IdealAspectRatio = 1.82;                                            //理想高宽比比
        let ratioDifference = ActualAspectRatio - IdealAspectRatio;             //实际宽高比 - 理想宽高比 = 宽高比差值
        let aspectRatio = 1;
        let l = console.log;
       
        if (ActualAspectRatio > IdealAspectRatio ) {
            aspectRatio = 1/1.82;
            clone[0].x = 0;
            clone[0].y = (ImgHeight - ImgWidth * 1.82) /2;

            clone[1].xx = ImgWidth;
            clone[1].yy = ImgWidth * 1.82;
        }
        if (ActualAspectRatio < IdealAspectRatio) {
            aspectRatio = 1;
            clone[0].x = 0;
            clone[0].y = 0;

            clone[1].xx = ImgWidth;
            clone[1].yy = ImgHeight;
        }
        if(ActualAspectRatio < 1/3){
            clone[0].x = (ImgWidth - ImgHeight * 1.82) /2;
            clone[0].y = 0;

            clone[1].xx = ImgWidth;
            clone[1].yy = ImgHeight * 1.82;
        }

        if (ActualAspectRatio === IdealAspectRatio) {
            aspectRatio = 1;
            clone[0].x = 0;
            clone[0].y = 0;

            clone[1].xx = ImgWidth;
            clone[1].yy = ImgHeight;
        }


        // 截图宽度
        var w = clone[1].xx;
        // 截图高度
        var h = clone[1].yy;
        // 获取截图区域内容,截图区域的像素点矩阵
        var cutImage = ctx.getImageData(clone[0].x,clone[0].y,w,h);
        // 裁剪后的base64数据
        var newImage = createNewCanvas(cutImage,w,h);
        var image = new Image();
        image.src = `${b64}`;
        later.src = newImage;
        // console.log(details_img);// 裁剪后的base64数据
    };
 
    //创建新的空白canvas画布将矩阵渲染截图
    var createNewCanvas = function (content,width,height){
        var nCanvas = document.createElement('canvas');
        var nCtx = nCanvas.getContext('2d');
        nCanvas.width = width;
        nCanvas.height = height;
        nCtx.putImageData(content,0,0);// 将画布上指定矩形的像素数据，通过 putImageData() 方法将图像数据放回画布
        return nCanvas.toDataURL('image/png');
    }
</script>
</html>

***对了，有个大坑请注意,请求本地图片移动要在本地启动一个服务，我用的nginx。

如果哪里有问题希望各位大神留言指教

前端小白白~

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
原生JS对图片进行裁剪

来了一个JS图片裁剪的功能，用原生JS写了一下，遇到了一些坑，这里记录一下，话不多说，直接上代码<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-s
复制链接

扫一扫