开篇

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

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

首先读取文件我们使用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>

尾声

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

canvas实现截图功能的更多相关文章

  1. canvas与html5实现视频截图功能

    这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...

  2. 通过jcrop和canvas的画布功能完成对图片的截图功能与视频的截图功能实现

    最近因为工作需要,做了视频截图和图截图的功能.大概需求是,用户点击某个按钮,可以对图片区域进行部分截取,然后进行进一步的业务操作. 首先说图片截图功能的思路, (1)下载Jcrop插件,添加css和j ...

  3. WPF C#截图功能 仿qq截图

    原文:WPF C#截图功能 仿qq截图 先上效果图 源码下载地址:http://download.csdn.net/detail/candyvoice/9788099 描述:启动程序,点击窗口butt ...

  4. JS 使用html2canvas实现截图功能的问题记录和解决方案

    在实现“截图”功能时,遇到几个bug,研究了一个上午,终于全部解决了: 下面给大家分享下: 1."图片资源跨域",导致无法截图. 浏览器会提示下面的错误 DOMException: ...

  5. html2canvas - 实现网页截图(+下载截图) 功能

    实现:html2canvas + canvas.toDataURL 首先,引入依赖插件: import { html2canvas } from './html2canvas'; html2canva ...

  6. cocos creator 小游戏区域截图功能实现

    截图是游戏中非常常见的一个功能,在cocos中可以通过摄像机和 RenderTexture 可以快速实现一个截图功能,具体API可参考:https://docs.cocos.com/creator/m ...

  7. Cesium截图功能

    首先安装  canvas2image npm intsall canvas2image --save 因为项目基于vue,所以需要在canvas2image的最后面 加上 export default ...

  8. html2canvas canvas webgl 截图透明空🤣

    1. React用这个插件html2canvas完成div截图功能,div里面嵌套canvas,返回base64是透明图片. html2canvas(document.getElementById(& ...

  9. html5 canvas 实现倒计时 功能

    function showTime(a) { var b = { id: "showtime", //canvasid x: 60, //中心点坐标 X轴; y: 60, //中心 ...

  10. Selenium2学习-023-WebUI自动化实战实例-021-获取浏览器显示区域大小,通过 WebDriver 截图功能

    之前的博文 020-JavaScript 在 Selenium 自动化中的应用实例之二(获取浏览器显示区域大小) 简述了通过 JavaScript 获取浏览器显示区域大小,此文将简述另一种获取浏览器显 ...

随机推荐

  1. 阅读LXH《FFMPEG+SDL的视频播放器》总结

    一.原文地址 https://blog.csdn.net/leixiaohua1020/article/details/46889389 在此向雷霄骅致敬!!! 二.视频播放器实现思路 1)视频播放器 ...

  2. ncnn的blob_vkallocator、workspace_vkallocator、staging_vkallocator区别

    ncnn::Extractor中有三个成员函数: void set_blob_vkallocator(VkAllocator* allocator); void set_workspace_vkall ...

  3. log4net info 方法 根据不同业务创建不同的文件名

    log4net info 方法 根据不同业务创建不同的文件名 <configuration> <!-- ... 其他配置 ... --> <configSections& ...

  4. 小米 红米 MIUI 重新打开(开启)蓝牙耳机电量弹窗

    原本关闭了下拉通知栏,显示耳机电量的窗口.想重新开开启. 解决方法: 1.确保小爱同学开了通知权限. 2.在蓝牙-高级设置里-开启"小米快连" 3.手机是解锁状态(非锁屏),耳机需 ...

  5. AI赋能ITSM:企业运维跃迁之路

    随着企业信息化建设的深入,IT运维管理作为保证企业信息系统稳定运行的重要工作,越来越受到重视. 那么,什么是IT运维呢? 简单地说,IT运维是一系列维护.管理和优化企业IT基础设施.系统和应用程序的活 ...

  6. css 让页面变灰色

    html { -webkit-filter: grayscale(1); }-webkit-filter(滤镜)有十种效果,分别是:     // grayscale 灰度     // sepia ...

  7. spring eureka服务注册配置,排查服务注册上来了,但是请求没有过来。检查是否服务注册配置错误

    spring eureka服务注册配置,排查服务注册上来了,但是请求没有过来.检查是否服务注册配置错误 解决方法: 去掉该配置eureka.instance.hostname = client微服务的 ...

  8. ansible(1)---师傅领进门

    背景 在企业里,运维需要配合开发进行产品上架,说白了就是把写好的代码上服务器.那么,就会出现这样的问题:需要运维人员配置好系统,配置好环境,配置好网络,配置好程序,配置好所有所有的依赖环境.     ...

  9. CLR via C# 笔记 -- 数组(16)

    1. 数组隐式继承 System.Array,所以数组是引用类型.变量包含的是对数组的引用,而不是包含数据本身的元素. 2. 数组协变性.将数组从一种类型转换为另一种类型. string[] sa = ...

  10. 免费且离线的同声翻译利器「GitHub 热点速览」

    开源的翻译软件众多,但大多数依赖于翻译 API 服务,因此就需要联网.有次数限制.并非完全免费.然后,本周上榜的是一款可以离线使用的 Android 翻译软件:RTranslator,它创建于 4 年 ...