canvas实现截图功能

最新推荐文章于 2024-07-20 18:16:53 发布

前端殇羽

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量6.7k

点赞数 4

分类专栏： canvas 截图文章标签：前端 css3 chrome

本文链接：https://blog.csdn.net/weixin_46268888/article/details/133715757

版权

canvas 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

截图

1 篇文章 0 订阅

订阅专栏

本文代码来源于b站小野森森教程视频跟敲，仅作学习记录交流使用，侵删~

其中步骤已经详细标注，会canvas基础的包看包会，可以试着敲一敲哦，哈哈哈！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .container,.container2{
            display: none;
        }
    </style>
</head>
<body>
    <!-- 
        0.input file     ==> 要读取图片
        1.canvas画布大小 ==> 自适应 ==> 图片的大小就是画布大小
        2.canvas绘制图片 ==> drawImage
        3.蒙层           ==> 上方加一层黑色半透明的层   canvas不存在层级，其实是和图片覆盖在一起的
        4.截图的矩形     ==> 在蒙层上方鼠标移动的范围内图片的再绘制
        5.获取当前图片截图后的数据
        6。截完图后的数据放入到另一个canvas里面去处理
    -->
    <div>
        <input type="file" id="imageFile" accept="image/*">
    </div>
    <div id="container">
        <canvas id="ctx">当前浏览器不支持，请升级版本或者更换浏览器</canvas>
    </div>
    <!-- 截取后的图片展示地方 -->
    <div id="container2">
        <canvas id="ctx2">当前浏览器不支持，请升级版本或者更换浏览器</canvas>
    </div>
</body>
<script>
    // 1.先获取到你要操作的所有元素
    const oCanvas = document.getElementById("ctx");
    const oImageFile = document.getElementById("imageFile");
    const oContainer = document.getElementById("container");
    // 2.操作canvas需要转为2d
    const ctx = oCanvas.getContext("2d");

    // end2.创建另一个canvas
    const oCanvas2 = document.getElementById("ctx2");
    const oContainer2 = document.getElementById("container2");
    const ctx2 = oCanvas2.getContext("2d");

    let img = new Image();
    let initPosition = [];
    let screenShotData = [];//存储截取后的数据
    const init = () => {
        bindEvent()
    }
    // 3.绑定事件处理函数
    function bindEvent(){
      window.addEventListener("change",handleImageFileChange,false);
      //11.监听canvas区域的mouseup、mousemove、mousedown事件进行操作
      oCanvas.addEventListener("mousedown",handleCanvasDown,false);
    }

    // 监听鼠标的按下、松开、移动事件
    // =================================================================
    function handleCanvasDown(e){
        // 12.存储鼠标的位置坐标
       initPosition = [e.offsetX,e.offsetY];
       //  13.在鼠标down事件中监听鼠标的move和up事件
       oCanvas.addEventListener("mousemove",handleCanvasMove,false);
       oCanvas.addEventListener("mouseup",handleCanvasUp,false);
    }
    function handleCanvasMove(e){
        // 14.获取到鼠标拉取矩形区域的宽高
       const endX = e.offsetX;
       const endY = e.offsetY;
       const [startX,startY] = initPosition;
       const rectWidth = endX - startX;
       const rectHeight = endY - startY;
      // console.log(rectWidth,rectHeight,"截取的画布大小");
      // 15.拿到画布宽高来实现每次绘制之前先清除画布
       const {width,height} = oCanvas;
      // end1.获取到所有的数据去另一个canvas进行绘制
       screenShotData = [startX,startY,rectWidth,rectHeight];

       ctx.clearRect(0,0,width,height);
      //  绘制蒙层区域
       drawImageMask(0,0,width,height,.3);
      //  16.绘制截图区域
      drawShotArea(width,height,rectWidth,rectHeight)
    }
    function handleCanvasUp(){
       oCanvas.removeEventListener("mousemove",handleCanvasMove,false);
       oCanvas.removeEventListener("mouseup",handleCanvasUp,false);
       //  end3.在鼠标松开时就要开始绘制截图后的图片了
       drawScreenShotImage(screenShotData)
    }

    // =================================================================
    // change事件中读取图片的信息
    const handleImageFileChange = (e) => {
      const files = e.target.files[0];
      // console.log(files);
      //  4.读取文件三部曲
      const read = new FileReader();
      read.readAsDataURL(files);
      read.onload = (e) => {
        //  4.1拿到base64的数据
        // console.log(e.target.result);
        //  5.把获取到的图片数据存储起来
        const data = e.target.result;
        // 6. 创建image对象，把数据存起来
        img.src = data;
        img.onload = function(){
            // 7.获取img的高宽
            const {width,height} = this;
            console.log(width,height);
            // 8.给canvas设定区域大小
            generateCavans(oContainer,oCanvas,width,height);
            // 9.画图
            ctx.drawImage(img,0,0,width,height)
            // 10.拿到宽高后才可以开始绘制蒙层
            drawImageMask(0,0,width,height,.3);
        }
      }
    }
    // 设定canvas图片大小
    function generateCavans(container,canvas,width,height){
        container.style.width =  width + "px";
        container.style.height = height + "px";
        canvas.width = width;
        canvas.height = height;
        container.style.display = "block";
    }
    // 绘制蒙层
    function drawImageMask(x,y,width,height,opacity){
       ctx.fillStyle = `rgba(0,0,0,${opacity})`;//绘制透明度
       ctx.fillRect(x,y,width,height);
    }
    // 绘制截图区域
    function drawShotArea(cWidth,cHeight,rectWidth,rectHeight){
       ctx.globalCompositeOperation = "destination-out";
       ctx.fillStyle = "#000";
       ctx.fillRect(...initPosition,rectWidth,rectHeight);
       //  到此步骤为止去用鼠标操作拉取发现图片直接没了

        // 图片在上层绘制  其实再画了一遍图片，但是只有鼠标拖动的才会出来，其他被蒙层盖住了
        ctx.globalCompositeOperation = "destination-over";
        ctx.drawImage(img,0,0,cWidth,cHeight,0,0,cWidth,cHeight);
    }
    // 绘制最终拿到的截取区域的图片数据
    function drawScreenShotImage(imgData){
        // 拿到画布数据后面put进去
       const data = ctx.getImageData(...imgData);//获取canvas所有像素点的数据，是个数组
       console.log(data,"所有画布数据")
       generateCavans(oContainer2,oCanvas2,imgData[2],imgData[3]);
       //  先清除画布
       ctx2.clearRect(...imgData);
       ctx2.putImageData(data,0,0);//将拿到的已经修改后的数据写进canvas里面
    }
    init()
</script>
</html>