js实现图片裁剪功能

最新推荐文章于 2024-06-06 23:38:32 发布

置顶桃子Jerry

最新推荐文章于 2024-06-06 23:38:32 发布

阅读量1.1w

点赞数 20

分类专栏：前端 js 文章标签： html js

本文链接：https://blog.csdn.net/jerryJJYY/article/details/103298248

版权

前端同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

写项目遇到了一个图片裁剪功能，网上搜了半天全是裁剪框，并不能达到实际意义的图片裁剪

它的实现过程主要是 canvas 的 putImageData() 方法

w3c给它的官方定义是：

putImageData() 方法将图像数据（从指定的 ImageData 对象）放回画布上。

demo:

<!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="original" src="" alt="">
裁剪后：<img id="later" src="" alt="">
</body>
<script>
    var canvas = document.createElement("canvas");// 创建canvas对象
    var ctx = canvas.getContext('2d');

    var original = document.querySelector("#original");
    var later = document.querySelector("#later");
    var clone = [{x:170,y:100},{xx:300,yy:520}];//x y为要裁剪的左上角的坐标，xx yy为右下角的坐标


    // 获取图片base64数据
    var npt = document.getElementById("npt");
    npt.onchange = function () {
        var reader = new FileReader();
        reader.readAsDataURL(npt.files[0]);
        reader.onloadend = function (e) {
            original.src = e.target.result;
            // console.log(e.target.result);// 图片的base64数据
            getImage(e.target.result)
        };
    };

    // 创建图片
    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 (){
        // 截图宽度
        var w = clone[1].xx - clone[0].x;
        // 截图高度
        var h = clone[1].yy - clone[0].y;
        // 获取截图区域内容,截图区域的像素点矩阵
        var cutImage = ctx.getImageData(clone[0].x,clone[0].y,w,h);
        // 裁剪后的base64数据
        var newImage = createNewCanvas(cutImage,w,h);
        later.src = newImage;
        // console.log(newImage);// 裁剪后的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>

页面效果是这样的:

完。

各位看官有问题可以评论区或发邮件一起探讨，个人邮箱：dingjie0730mi@163.com

桃子Jerry

关注

20
点赞
踩
61

收藏

觉得还不错? 一键收藏
5
评论
js实现图片裁剪功能

写项目遇到了一个图片裁剪功能，网上搜了半天全是裁剪框，并不能达到实际意义的图片裁剪它的实现过程主要是 canvas 的 putImageData()方法w3c给它的官方定义是：putImageData() 方法将图像数据（从指定的 ImageData 对象）放回画布上。demo:<!doctype html><html lang="en"&gt...
复制链接

扫一扫