开篇
读取图片并获取图片的宽度和高度思路
首先读取文件我们使用input中类型是file。
我们需要对读取的对象进行限制,必须是图片类型。
这个可以使用这个属性:accept="image/*" 来实现
但是这个属性不可靠,最好还是通过正则来判断。
我们要获取图片的宽和高,需要创建FileReader对象。
使用reader.readAsDataURL(file)异步读取文件内容,
并将其编码为一个Data URL(数据URL)
当文件读取完成之后,会触发reader.onload事件。
这个时候我们还要创建一个图片对象。
等待这个图片读取完成后,通过 img.width, img.height返回图片的宽和高。
下面我们就来简单实现一下
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
读取图片并获取图片的宽度
<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>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
将图片的宽高赋值给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"
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
将图片内容在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 这个方法中返回来。
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
// 返回文件(图片的宽和高和图像源)
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 );
});
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
绘制蒙层
绘制截图区域
.... 其他代码.....
// 图像源
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)
}
.... 其他代码.....
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
把截图的区域显示出来
<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)
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
将截图区域的部分下载下来
// 注册下载事件
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);
})
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
截图功能全部代码
<!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>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148.
- 149.
- 150.
- 151.
- 152.
- 153.
- 154.
- 155.
- 156.
- 157.
- 158.
- 159.
- 160.
- 161.
- 162.
- 163.
- 164.
- 165.
- 166.
尾声
遇见问题,这是你成长的机会,如果你能够解决,这就是收获。
作者:晚来南风晚相识