首页 > 其他分享 >canvas实现截图功能

canvas实现截图功能

时间：2024-08-01 09:05:53浏览次数：12  
标签：function 功能 canvas height width canvasNode let 截图

开篇

最近在做一个图片截图的功能。
因为工作时间很紧张，
当时是使用的是一个截图插件。
周末两天无所事事，来写一个简单版本的截图功能。
因为写的比较简单，如果写的不好,求大佬轻一点喷

读取图片并获取图片的宽度和高度思路

首先读取文件我们使用input中类型是file。
我们需要对读取的对象进行限制，必须是图片类型。
这个可以使用这个属性：accept="image/*" 来实现
但是这个属性不可靠，最好还是通过正则来判断。
我们要获取图片的宽和高，需要创建FileReader对象。
使用reader.readAsDataURL(file)异步读取文件内容，
并将其编码为一个Data URL（数据URL）
当文件读取完成之后，会触发reader.onload事件。
这个时候我们还要创建一个图片对象。
等待这个图片读取完成后,通过 img.width, img.height返回图片的宽和高。
下面我们就来简单实现一下

读取图片并获取图片的宽度

<div>
  <input  type="file" id="file" accept="image/*" />
</div>

<script>
  // 获取文件节点
  let fileNode = document.getElementById("file")
  // 给文件节点注册事件
  fileNode.addEventListener("change", readFile)
  // 读取文件,然后返回宽度和高度
  function readFile(e){
    let file = e.target.files[0]
    getImageWH(file, function(width, height) {  
      console.log('Width:', width, 'Height:', height);  
    }); 
  }
  // 返回文件(图片的宽和高)
  function getImageWH(file, callback) {  
    // 创建一个FileReader实例  
    const reader = new FileReader();  
    // 当文件读取完成时触发  
    reader.onload = function(e) {  
      // e 这个对象中包含这个图片相关的属性
      console.log('e这个对象', e)
      // 创建一个新的Image对象  
      const img = new Image();  
      // 设置Image的src为读取到的文件内容  
      img.src = e.target.result;  
      // 当图片加载时触发  
      img.onload = function() {  
        // 调用回调函数，并传入图片的宽高  
        callback(img.width, img.height);  
      };
    };
    // 开始读取文件内容，以DataURL的形式 
    // reader.onload 方法的执行需要调用下面这个 reader.readAsDataURL
    reader.readAsDataURL(file);  
  } 
  </script>

将图片的宽高赋值给canvas

我们在获取图片的宽和高之后然后赋值给canvas。
并且将canvas给显示出来就行。
这一步比较简单

<style>
  .canvas-box{
    border: 1px solid red;
    display: none;
  }
</style>
<canvas id="canvas-node" class="canvas-box"></canvas>

// 获取canvas节点
let canvasNode = document.getElementById("canvas-node")

// 读取文件
function readFile(e){
  let file = e.target.files[0]
  getImageWH(file, function(width, height) {  
    // 将宽度和高度传给canvasSetWH函数，显示在页面上
    canvasSetWH(canvasNode,width, height)
  }); 
}

function canvasSetWH(canvasNode,width, height){
  canvasNode.width = width
  canvasNode.height = height
  canvasNode.style.display = "block"
}

将图片内容在canvas中显示出来

想要将图片绘制出来，此时我们需要借助drawImage这个API。
这个API有三种形式的传参

第1种:drawImage(image, x, y)
image: 绘制的图像源
x, y:  图像在画布上的起始坐标(x,y), 图像将以原始尺寸绘制

第2种:drawImage(image, x, y, width, height)
image: 绘制的图像源
x, y:  图像在画布上的起始坐标(x,y)
width, height(可选)：绘制到画布上的图像的宽度和高度

第3种: drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight)
image： 绘制的图像源
sx, sy: 图像源中矩形区域的起始坐标
swidth, sheight：图像源中矩形区域的宽度和高度，即要绘制的图像部分
dx, dy：绘制到画布上的起始坐标
dwidth, dheight：绘制到画布上的矩形区域的宽度和高度，允许对绘制的图像进行缩放

也就是说:我们这里绘制可以使用第1种方法和第2种方法。
图像源在getImageWH 这个方法中返回来。

// 返回文件(图片的宽和高和图像源)
function getImageWH(file, callback) {  
  // ....其他代码.....
  // 当文件读取完成时触发  
  reader.onload = function(e) {  
    // ....其他代码.....
    // 当图片加载时触发  
    img.onload = function() {  
      // 调用回调函数，返回图像源，图片的宽度，高度
      callback(img,img.width, img.height);  
    };
  };
  // 开始读取文件内容，以DataURL的形式 
  // reader.onload 方法的执行需要调用下面这个 reader.readAsDataURL
  reader.readAsDataURL(file);  
} 

// 获取canvas节点
let canvasNode = document.getElementById("canvas-node")
// 创建上下文
let ctx = canvasNode.getContext("2d")

function readFile(e){
  let file = e.target.files[0]
  getImageWH(file, function(img, width, height) {  
    // 将宽度和高度传给canvasSetWH函数，显示在页面上
    canvasSetWH(canvasNode,width, height)
    // 将图片绘制出来
    ctx.drawImage(img, 0, 0,width, height );
  }); 
}

绘制蒙层

绘制蒙层这一步相对比较简单。
我们只需要在图片上绘制一个跟图片大小一样的蒙层即可。
可以借助fillStyle来填充颜色。fillRect绘制矩形。
下面我们简单实现一下

// 调用绘制蒙层的方法(在绘制图片完成后调用这个函数)
drawMask(0,0,width, height);

//绘制蒙层
function drawMask(x, y, width, height, opactity) {
  ctx.fillStyle = "rgba(0,0,0,0.5)";
  ctx.fillRect(x, y, width, height);
}

绘制截图区域

我们需要给canvas绑定鼠标按下事件。
在鼠标按下的时候记录上当前鼠标的坐标信息(x,y)
在鼠标按下的时候还要注册移动事件和抬起事件。
在鼠标移动的时候计算出蒙层的位置信息(rectEndX,rectEndY)
然后计算出截图区域的位置信息
最后还需要鼠标抬起的时候要移除移动事件和抬起事件
下面我们来简单实现一下

.... 其他代码.....
// 图像源
let img = new Image();
// 注册事件用于得到鼠标按下时的偏移量
canvasNode.addEventListener("mousedown", mousedownInCanvasHandler)
let currentPoint = {}
// 鼠标按下
function mousedownInCanvasHandler(e){
  currentPoint= { x: e.offsetX, y: e.offsetY }
  // 按下鼠标的时候我们需要注册移动事件和抬起事件
  canvasNode.addEventListener('mousemove', mousemoveInCanvasHandler)
  canvasNode.addEventListener('mouseup', mouseupInCanvasHandler)
}

// 绘制矩形
function mousemoveInCanvasHandler(e){
  let rectEndX = e.offsetX
  let rectEndY = e.offsetY
  // 得到矩形的宽度和高度
  let rectWidth = rectEndX - currentPoint.x
  let rectHeight = rectEndY - currentPoint.y
  let {width, height} = canvasNode
  ctx.clearRect(0, 0, width, height)
  // 绘制蒙层
  drawMask(0,0,width, height);
  drawScreenShot(width, height,rectWidth, rectHeight)
}
// 绘制截图
function drawScreenShot( canvasWidth, canvasHeight,rectWidth,rectHeight){
  // 在原图形之外画出一个矩形
  ctx.globalCompositeOperation = "destination-out";
  ctx.fillStyle='#000'
  ctx.fillRect(currentPoint.x, currentPoint.y,rectWidth,rectHeight)
  ctx.globalCompositeOperation ='destination-over'
  // 绘制截图区域的矩形
  ctx.drawImage(img, 0, 0,canvasWidth, canvasHeight,0,0,canvasWidth, canvasHeight );
}
// 鼠标抬起的时候要移除移动事件和抬起事件
function mouseupInCanvasHandler(e){
  canvasNode.removeEventListener('mousemove', mousemoveInCanvasHandler)
  canvasNode.removeEventListener('mouseup', mouseupInCanvasHandler)
}
.... 其他代码.....

把截图的区域显示出来

我们只需要在截图完成后(鼠标抬起时)
得到截图区域的信息ctx.getImageData()
然后把截图区域的信息写入一个新的画布即可。
在绘制前先清空画布

<style>
  .canvas-box,.canvas2-box{
    display: none;
  }
</style>
<body>
  <!-- 文件读取 -->
   <div>
     <input  type="file" id="file" accept="image/*" />
   </div>
   <canvas id="canvas-node" class="canvas-box"></canvas>
   <!-- 截图区域的图像显示在下面这个新的画布上 -->
   <div class="canvas2-box">
    <canvas id="canvas2"></canvas>
   </div>
</body>
// 将截图区域的数据保存下来
screenshotData= [currentPoint.x, currentPoint.y, rectWidth, rectHeight]

// 鼠标抬起的时候要移除移动事件和抬起事件
function mouseupInCanvasHandler(e){
  canvasNode.removeEventListener('mousemove', mousemoveInCanvasHandler)
  canvasNode.removeEventListener('mouseup', mouseupInCanvasHandler)
  drawScreenShotImg(screenshotData)
}

// 绘制一个截图区域的信息在另外一个画布上，并且将他显示出来
function drawScreenShotImg(screenshotData){
  // screenshotData是截图的开始和结束坐标
  let drawData = ctx.getImageData(...screenshotData)
  canvasSetWH(canvas2Box,screenshotData[2],screenshotData[3])
  // 先清空画布，注意清空的大小，否者会造成叠加（清除不干净）
  ctx2.clearRect(0,0, currentPoint.x, currentPoint.y)
  // 将截图区域绘制到canvas2上
  ctx2.putImageData(drawData,0,0)
}

将截图区域的部分下载下来

将canvas下载下来时,需要借助
语法:canvas.toDataURL(picType, encoderOptions)
参数:
picType:表示的是图片的格式。默认为 image/png。
encoderOptions：从 0 到 1 的区间内选择图片的质量。
  如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。

获取图片的类型我们可以通过(file.type)来知道
let file = e.target.files[0]
// 得到图片的类型，等会下载的时候需要
fileType = file.type

<button id="downBtn">down</button>

// 注册下载事件
downBtn.addEventListener('click',()=>{
  let {width, height} = canvas2
  // toDataURL的第一个参数：图片格式，默认为 image/png,
  // 第2个参数：可以从 0 到 1 的区间内选择图片的质量。
  let imgURL = canvas2.toDataURL( fileType, 1);
  let link = document.createElement('a');
  link.download = "截图图片";
  link.href = imgURL;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
})

截图功能全部代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas实现截图功能</title>
  <style>
    .canvas-box,.canvas2-box{
      display: none;
    }
  </style>
</head>
<body>
  <!-- 文件读取 -->
   <div>
     <input  type="file" id="file" accept="image/*" />
   </div>
   <canvas id="canvas-node" class="canvas-box"></canvas>
   <button id="downBtn">down</button>
   <div class="canvas2-box">
    <canvas id="canvas2"></canvas>
   </div>
</body>
<script>
  // 获取canvas节点
  let canvasNode = document.getElementById("canvas-node")
  // 创建上下文
  let ctx = canvasNode.getContext("2d")
  let downBtn =  document.getElementById("downBtn")
  
  let canvas2Box = document.querySelector(".canvas2-box")
  let canvas2 = document.getElementById("canvas2")
  let ctx2 = canvas2.getContext("2d")
  // 获取文件节点
  let fileNode = document.getElementById("file")
  // 给文件节点注册事件
  fileNode.addEventListener("change", readFile)
  // 图像源
  let img = new Image();
  // 截图区域的数据
  let screenshotData = []
  let fileType = "" // 文件的类型,下载的时候需要
  // 注册事件用于得到鼠标按下时的偏移量
  canvasNode.addEventListener("mousedown", mousedownInCanvasHandler)
  let currentPoint = {}

  // 注册下载事件
  downBtn.addEventListener('click',()=>{
    let {width, height} = canvas2
    // format:表示的是图片的类型  "image/png"
    // toDataURL的第一个参数：图片格式，默认为 image/png,
    // 第2个参数：可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。
    let imgURL = canvas2.toDataURL( fileType, 1);
    let link = document.createElement('a');
    link.download = "截图图片";
    link.href = imgURL;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  })
  // 鼠标按下
  function mousedownInCanvasHandler(e){
    currentPoint= { x: e.offsetX, y: e.offsetY }
    // 按下鼠标的时候我们需要注册移动事件和抬起事件
    canvasNode.addEventListener('mousemove', mousemoveInCanvasHandler)
    canvasNode.addEventListener('mouseup', mouseupInCanvasHandler)
  }
  
  // 绘制矩形
  function mousemoveInCanvasHandler(e){
    let rectEndX = e.offsetX
    let rectEndY = e.offsetY
    // 得到矩形的宽度和高度
    let rectWidth = rectEndX - currentPoint.x
    let rectHeight = rectEndY - currentPoint.y
    let {width, height} = canvasNode
    // 将截图区域的数据保存下来
    screenshotData= [currentPoint.x, currentPoint.y, rectWidth, rectHeight]
    ctx.clearRect(0, 0, width, height)
    // 绘制蒙层
    drawMask(0,0,width, height);
    drawScreenShot(width, height,rectWidth, rectHeight)
  }
  // 绘制截图
  function drawScreenShot( canvasWidth, canvasHeight,rectWidth,rectHeight){
    // 在原图形之外画出一个矩形
    ctx.globalCompositeOperation = "destination-out";
    ctx.fillStyle='#000'
    ctx.fillRect(currentPoint.x, currentPoint.y,rectWidth,rectHeight)
    ctx.globalCompositeOperation ='destination-over'
    // 绘制截图区域的矩形
    ctx.drawImage(img, 0, 0,canvasWidth, canvasHeight,0,0,canvasWidth, canvasHeight );
  }

  
  // 鼠标抬起的时候要移除移动事件和抬起事件
  function mouseupInCanvasHandler(e){
    canvasNode.removeEventListener('mousemove', mousemoveInCanvasHandler)
    canvasNode.removeEventListener('mouseup', mouseupInCanvasHandler)
    drawScreenShotImg(screenshotData)
  }

  // 绘制一个截图区域的信息在另外一个画布上，并且将他显示出来
  function drawScreenShotImg(screenshotData){
    // screenshotData是截图的开始和结束坐标
    let drawData = ctx.getImageData(...screenshotData)
    canvasSetWH(canvas2Box,screenshotData[2],screenshotData[3])
    // 先清空画布，注意清空的大小，否者会造成叠加（清除不干净）
    ctx2.clearRect(0,0, currentPoint.x, currentPoint.y)
    // 将截图区域绘制到canvas2上
    ctx2.putImageData(drawData,0,0)
  }


  // 读取文件
  function readFile(e){
    let file = e.target.files[0]
    // 得到图片的类型，等会下载的时候需要
    console.log('file.type', file.type)
    fileType = file.type
    getImageWH(file, function(width, height) {  
      // 将宽度和高度传给canvasSetWH函数，显示在页面上
      canvasSetWH(canvasNode,width, height)
      ctx.drawImage(img, 0, 0,width, height );
      // 调用绘制蒙层的方法
      drawMask(0,0,width, height);
    });
  }


  // 返回文件(图片的宽和高)
  function getImageWH(file, callback) {  
    // 创建一个FileReader实例  
    const reader = new FileReader();  
    // 当文件读取完成时触发  
    reader.onload = function(e) {  
      // e 这个对象中包含这个图片相关的属性
      console.log('e这个对象', e)
      // 创建一个新的Image对象  
        
      // 设置Image的src为读取到的文件内容  
      img.src = e.target.result;  
      // 当图片加载时触发  
      img.onload = function() {  
        // 调用回调函数，返回图像源，图片的宽度，高度
        callback(img.width, img.height);  
      };
    };
    // 开始读取文件内容，以DataURL的形式 
    // reader.onload 方法的执行需要调用下面这个 reader.readAsDataURL
    reader.readAsDataURL(file);  
  } 

  function canvasSetWH(canvasNode,width, height){
    canvasNode.width = width
    canvasNode.height = height
    canvasNode.style.display = "block"
  }

  // 绘制蒙层
  function drawMask(x, y, width, height, opactity) {
    ctx.fillStyle = "rgba(0,0,0,0.5)";
    ctx.fillRect(x, y, width, height);
  }
</script>
</html>

尾声

终于写完了，这周过得很充实。。。
如果觉得写的不错，求未来的老板们点个赞，感谢！

标签：function,功能,canvas,height,width,canvasNode,let,截图
From： https://www.cnblogs.com/IwishIcould/p/18328952

相关文章

  • 为什么 functools.cache 装饰器不能在我的带有记忆功能的斐波那契序列函数上工作？
    我在python中搞乱了记忆，并使用了一个示例斐波那契序列函数作为模型。我将第一个fibonacci()函数编写为常规函数，无需记忆，它按预期工作。接下来，我编写了我的fibonacci_memo()函数，该函数使用带有输出的输入字典来利用记忆化，并且按预期工作。然后我想测试functo......
  • Selenium“没有提供‘moz:firefoxOptions.binary’功能，并且在命令行上没有设置二进制
    我一直在尝试将python脚本移植到我的wsl/bash编码中心中。我继续收到此错误：Traceback(mostrecentcalllast):File"/path/to/my/file.py",line20,in<module>driver=webdriver.Firefox(service=FirefoxService(GeckoDriverManager().install()))Fil......
  • 亲测推荐！PixPin便捷高效，让你的截图工作轻松搞定，还在等什么？
    前言如果你经常使用电脑，是不是也经常遇到这样的烦恼：需要频繁地截图、标注、编辑图片，可是手里的截图工具却总是那么不给力？要么功能单一，要么操作复杂，让人头疼不已；今天咱们的小江湖就要给大家带来一款绝对让你眼前一亮的截图神器——PixPin！听名字是不是就感觉有点不一样？没错，它可......
  • Linux（2）--Linux的基本功能
    文章目录Linux目录结构文件权限修改文件所有者和关联组用户和用户组添加用户删除或修改用户名修改密码增加用户组删除或修改用户组总结LinuxLinux是一种自由和开放源码的类Unix操作系统，由林纳斯·托瓦兹（LinusTorvalds）于1991年首次发布。Linux以其高效性、灵活性和......
  • centos 7 各个目录的功能和用途是什么
    CentOS7的各个目录在Linux系统中扮演着重要的角色，它们各自具有特定的功能和用途。以下是CentOS7中一些主要目录的功能说明：1./（根目录）功能：包含了整个文件系统的所有文件和目录，是文件系统的起点。使用场景：任何时候都可以访问该目录下的文件和目录。2./bin功能：存放系统最......
  • Profibus转EtherCAT协议转化网关（功能与配置）
    如何能够把Profibus和EtherCAT通讯连接起来?这几天有几个客户朋友咨询到这个问题，作者在这里统一为大家回复一下。想要解决这个问题其实也非常简单，只需要用到一个设备，名为JM-DPM-ECT。下面作者为大家详细讲解一下该设备的主要功能及详细配置方法。一，设备主要功能捷米特JM-DPM-......
  • 在Vue3中创建动态主题切换功能
    随着现代Web开发的进步，用户体验变得愈发重要。在这方面，实现动态主题切换功能无疑是提高用户体验的有效方式。通过动态主题切换，用户可以根据自己的喜好选择明亮的主题或暗色主题，提供了更个性化、更舒适的使用体验。今天，我们将通过一个简洁的示例来展示，如何在Vue3中实现动态......
  • Tenable Nessus 10.8.0 (macOS, Linux, Windows) 发布，新增功能概览
    TenableNessus10.8.0(macOS,Linux,Windows)下载-#1漏洞评估解决方案TenableNessus10.8.0(2024-07-30)发布Nessus试用版自动化安装程序，支持macOSSonoma、RHEL9和Ubuntu24.04请访问原文链接：https://sysin.org/blog/nessus-10/，查看最新版。原创作品，转载请保留......
  • 电话机器人有哪些功能特点？
    首先，智能语音电话客服机器人应对客服场景中，第一是回答用户的问题，前期大量的客户因为可能遇到同样的问题，客服人员不断的重复回答客户问题，但是用了智能语音电话客服机器人就不一样了，智能语音电话客服机器人可以先解决客户简单重复的问题，如果智能语音电话客服机器人解决不了，最后人......
  • 企业发卡系统源码/带有代理功能发卡平台源码
    源码简介全新企业发卡系统源码，带有代理功能的发卡平台源码，目前应该算是最完美的一款了，亲测可运营。并且多套模板可以切换更新说明：支付界面短链接二维码后台模板等修复及一些细节优化pc用户端后台稍微美化(颜色调整)安卓用户端后台界面UI美化重写,商户头像根据QQ获取Ad......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99