JS使用canvas实现基本的截图功能

更新时间：2023年08月09日 10:03:22 作者：寄给江南

这篇文章主要给大家介绍了使用JS中的canvas实现基本的截图功能,文中有详细的实现思路和实现过程,文章通过代码示例讲解的非常详细,很感兴趣的同学可以参考一下

思路分析

在开始动手之前，分析一下整个功能的实现过程：

根据图片大小创建 canvas1 画布，并将原图片直接定位在 canvas1 上；
在画布上添加一个蒙层，以区分当前 canvas 图像是被裁剪的原图像；
在蒙层上方，对裁剪区域（鼠标移动形成的矩形范围）再次进行图像绘制；
获取裁剪区域的数据，并将该数据定位到另一个 canvas 画布上。

实现过程

准备工作

首先，编写所需的 HTML 结构并获取对应元素。

<body>
  <!-- 上传文件 -->
  <input type="file" id="imageFile" accept="image/*">
  <!-- 保存被裁剪的原图像，初始样式需要设置 display: none -->
  <div class="canvasContainer1">
    <canvas id="canvas1"></canvas>
  </div>
  <!-- 保存裁剪区域的图像，初始样式需要设置 display: none -->
  <div class="canvasContainer2">
    <canvas id="canvas2"></canvas>
  </div>
</body>
<script>
const imageFile = document.querySelector('#imageFile');
const canvasContainer1 = document.querySelector('.canvasContainer1');
const canvasContainer2 = document.querySelector('.canvasContainer2');
const canvas1 = document.querySelector('#canvas1');
const canvas2 = document.querySelector('#canvas2');
const ctx = canvas1.getContext('2d');
const ctx2 = canvas2.getContext('2d');
const imageBox = new Image(); // 创建一个存放图片的容器
</script>

绘制原图像

我们需要监听 input 元素的 change 事件，以获取上传图片的相关参数，这里主要是为了获取图片的宽度和高度。

我们创建一个 FileReader() 对象并监听其 load 事件。load 事件在读取操作成功后立刻执行，在这个方法中我们就可以获取图片的宽高。

function init() {
  imageFile.addEventListener('change', handleFileChange, false); // 监听图片上传事件。
}
function handleFileChange(e) {
  const imgFile = e.target.files[0]; // 获取上传的图片对象。
  const reader = new FileReader();
  reader.onload = function(e) {
    const imgSrc = e.target.result; // 图片文件的 base64 编码格式。
    imageBox.src = imgSrc; // 把图片放入 img 容器。
    // 等图片加载完成后，获取图片的宽高。
    imageBox.onload = function () {
      const imgWidth = this.width, imgHeight = this.height;
      console.log(imgWidth, imgHeight);
    }
  }
  if (imgFile) {
    reader.readAsDataURL(imgFile); // 读取图片文件，读取完成才能获取 result 属性。
  }
}
init();

此时还没有图片，我们创建一个自适应图片大小的 canvas1 画布，并使用 drawImage() 方法将上传的图片直接定位到 canvas1 当中。

function handleFileChange(e) {
  const imgFile = e.target.files[0]; // 获取上传的图片对象。
  const reader = new FileReader();
  reader.onload = function (e) {
    const imgSrc = e.target.result; // 图片的 base64 编码。
    imageBox.src = imgSrc; // 把上传的图像放入 img 容器。
    // 图片加载完毕后执行
    imageBox.onload = function () {
      // 获取图片的宽高。
      const imgWidth = this.width, imgHeight = this.height;
      console.log(imgWidth, imgHeight);
      // 创建 canvas 画布并绘制图片。
      generateCanvas(canvasContainer1, canvas1, imgWidth, imgHeight);
      ctx.drawImage(imageBox, 0, 0, imgWidth, imgHeight);
    }
  }
  if (imgFile) {
    reader.readAsDataURL(imgFile); // 将当前file读取成DataURL
  }
}
// 根据 width 和 height 创建 canvas 画布。
function generateCanvas(container, canvas, width, height) {
  container.width = width + 'px';
  container.height = height + 'px';
  canvas.width = width;
  canvas.height = height;
  container.style.display = 'block'; // 显示 canvas 区域。
}

可以看到原图像已经成功被绘制，接下来就可以开始动态绘制截图区域了。

绘制截图区域

在这个过程中，我们需要分别监听 imageBox 容器（原图像）上的 mousedown、mousemove 和 mouseup 事件，这些事件的作用如下：

mousedown 事件：记录开始截图的位置，并开始监听 mousemove 和 mouseup 事件。
mousemove 事件：监听鼠标的偏移量，以计算裁剪区域的宽度和高度。
mouseup 事件：截图结束，注销监听 mousedown 和 mousemove 事件，并绘制裁剪区域。

let startPosition = []; // 记录鼠标点击（开始截图）的位置。
let screenshotData = []; // 保存截取部分的相关信息。
function init() {
  // 监听鼠标点击事件。
  canvas1.addEventListener('mousedown', handleMouseDown, false);
}
// 记录鼠标点击（开始截图）的位置，并监听相关事件。
function handleMouseDown(e) {
  startPosition = [e.offsetX, e.offsetY];
  canvas1.addEventListener('mousemove', handleMouseMove, false);
  canvas1.addEventListener('mouseup', handleMouseUp, false);
}
// 监听鼠标的偏移量，以计算裁剪区域的宽度和高度。
function handleMouseMove(e) {
  // 获取裁剪区域的宽度和高度。
  const { offsetX, offsetY } = e;
  const [startX, startY] = startPosition;
  const [rectWidth, rectHeight] = [offsetX - startX, offsetY - startY];
  console.log('rect', rectWidth, rectHeight);
  // 保存裁剪区域的相关信息。
  screenshotData = [startX, startY, rectWidth, rectHeight];
}
// 注销监听事件等后续操作。
function handleMouseUp() {
  canvas1.removeEventListener('mousemove', handleMouseMove, false);
  canvas1.removeEventListener('mouseup', handleMouseUp, false);
}

在 handleMouseMove 函数中，我们已经获取了裁剪区域的宽高，也就是生成截图的宽高。

接下来，我们需要在原图像上展示出我们所裁剪的区域，也就是这个效果：

可以看到，原图像的上方、裁剪区域下方会覆盖一层半透明黑色蒙层，它的作用是区分原图层和裁剪部分图层。所以我们需要在绘制截图区域之前，添加一层蒙层。

注意，在已有内容的 canvas 画布上进行再次绘制之前，需要先清除整个画布的内容。这里通过 clearRect() 方法清除 canvas1 画布上的所有内容，并添加蒙层。

我们继续来补充 handleMouseMove 和 handleMouseUp 函数中的逻辑：

const MASKER_OPACITY = 0.4;
function handleMouseMove(e) {
  // 获取裁剪区域的宽度和高度。
  const { offsetX, offsetY } = e;
  const [startX, startY] = startPosition;
  const [rectWidth, rectHeight] = [offsetX - startX, offsetY - startY];
  console.log('rect', rectWidth, rectHeight);
  // 保存裁剪区域的相关信息。
  screenshotData = [startX, startY, rectWidth, rectHeight];
  // 再次绘制前，清理 canvas1 画布上的内容。
  const { width, height } = canvas1;
  ctx.clearRect(0, 0, width, height);
  // 在 canvas1 画布上绘制蒙层。
  drawImageMasker(0, 0, width, height, MASKER_OPACITY);
  // 绘制截图区域。
  drawScreenShot(width, height, rectWidth, rectHeight);
}
// ...
// 绘制图片蒙层，填充范围和颜色，以便区分原图层和裁剪部分图层。
function drawImageMasker(x, y, width, height, opacity) {
  ctx.fillStyle = `rgba(0, 0, 0, ${opacity})`;
  ctx.fillRect(0, 0, width, height);
}
// 绘制裁剪的矩形区域。
function drawScreenShot(canWidth, canHeight, rectWidth, rectHeight) {
  // 在源图像外绘制新图像，只有源图像外的目标图像部分会被显示，源图像是透明的。
  ctx.globalCompositeOperation = 'destination-out';
  ctx.fillStyle = '#2c2c2c';
  ctx.fillRect(...startPosition, rectWidth, rectHeight);
  // 在现有画布上绘制新的图形。
  ctx.globalCompositeOperation = 'destination-over';
  ctx.drawImage(imageBox, 0, 0, canWidth, canHeight, 0, 0, canWidth, canHeight);
}

然后，当我们放开鼠标（结束截图动作）时，除了注销对 mousedown 和 mousemove 事件的监听，还需要将所得的裁剪区域的图像放入另一个 canvas 中。

在绘制新图像的过程中，我们需要使用以下方法：

getImageData()：读取 canvas 上的内容，返回一个 ImageData 对象，包含了每个像素的信息。
putImageData()：将 ImagaData 对象的数据放入 canvas 中，覆盖 canvas 中的已有图像。

function handleMouseUp() {
  canvas1.removeEventListener('mousemove', handleMouseMove, false);
  canvas1.removeEventListener('mouseup', handleMouseUp, false);
  // 开始绘制截图区域图片。
  drawScreenshotImage(screenshotData);
  // 如果裁剪得到新图像后，不希望保留原图像，可以设置以下属性。
  // canvasContainer1.style.display = 'none';
}
// 在新容器 canvas2 上绘制新图像。
function drawScreenshotImage(screenshotData) {
  // 获取 canvas1 的数据。
  const data = ctx.getImageData(...screenshotData);
  // 创建 canvas2 画布。
  generateCanvas(canvasContainer2, canvas2, screenshotData[2], screenshotData[3]);
  // 每次绘制前，都先进行清除操作。
  ctx2.clearRect(...screenshotData);
  // 将 canvas1 的数据放入 canvas2 中。
  ctx2.putImageData(data, 0, 0);
}

经过以上步骤，就可以实现我们所需的效果

总结

对于 canvas 的使用比较少，所以想记录一下自己的使用过程。

如果本文中出现了什么错误或者有什么建议，欢迎大家指正~

以上就是JS使用canvas实现基本的截图功能的详细内容，更多关于JS canvas截图的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

js实现带圆角的两级导航菜单效果代码
这篇文章主要介绍了js实现带圆角的两级导航菜单效果代码,涉及javascript鼠标事件及页面元素样式动态变换技巧,非常具有实用价值,需要的朋友可以参考下
2015-08-08
微信小程序列表的上拉加载和下拉刷新的实现
本文主要介绍了微信小程序中实现列表的上拉加载和下拉刷新的方法。具有很好的参考价值。下面跟着小编一起来看下吧
2017-04-04
js实现简易的英汉词典
这篇文章主要为大家详细介绍了js实现简易的英汉词典，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
JavaScript 继承详解第一篇
几乎每个开发人员都有面向对象语言（比如C++、C#、Java）的开发经验。在传统面向对象的语言中，有两个非常重要的概念 - 类和实例。
2009-08-08
微信小程序onShareTimeline()实现分享朋友圈
这篇文章主要给大家介绍了关于微信小程序onShareTimeline()实现分享朋友圈的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
javascript控制在光标位置插入文字适合表情的插入
使用javascript控制在光标位置插入文字，在实现表情的插入时会用到的,需要的朋友可以参考下
2014-06-06
前端echarts tooltip展示多项自定义数据代码示例
Echarts是一个基于JavaScript的开源图表库,提供了丰富的图表类型,如折线图、柱状图、饼图、散点图等,支持动态数据交互和自定义配置,这篇文章主要给大家介绍了关于前端echarts tooltip展示多项自定义数据的相关资料,需要的朋友可以参考下
2024-09-09
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
这篇文章主要介绍了JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-11-11
js实现获取当前时间是本月第几周的方法
这篇文章主要介绍了js实现获取当前时间是本月第几周的方法,涉及javascript针对日期及时间的相关操作技巧,非常简单实用,需要的朋友可以参考下
2015-08-08
echarts实现雷达图的详细步骤
这篇文章主要给大家介绍了关于echarts实现雷达图的详细步骤,雷达图(Radar Chart)是一种信息丰富的可视化工具,其中多个变量（三个或更多）在二维平面上进行比较,文中给出了完整的代码示例,需要的朋友可以参考下
2024-01-01