canvas离屏技术与放大镜实现
程序员文章站
2022-05-29 13:30:35
教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步 " （原文）canvas 离屏技术与放大镜实现" 。 更多讨论或者错误提交，也请移步。 利用 除了可以实现滤镜，还可以利用 离屏技术 放大镜功能。 为了方便讲解，本文分为 2 个应用部分： 1. 实现水印和中心缩放 2. 实现放大镜 ......
教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步。
更多讨论或者错误提交，也请移步。
利用
canvas除了可以实现滤镜，还可以利用离屏技术放大镜功能。
为了方便讲解，本文分为 2 个应用部分：
- 实现水印和中心缩放
- 实现放大镜
1. 什么是离屏技术？
介绍过drawimage接口。除了绘制图像，这个接口还可以：将一个canvas对象绘制到另一个canvas对象上。这就是离屏技术。
2. 实现水印和中心缩放
在代码中，有两个 canvas 标签。分别是可见与不可见。不可见的 canvas 对象上的 context 对象，就是我们放置图像水印的地方。
更多详解，请看代码注释：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>learn canvas</title>
<style>
canvas {
display: block;
margin: 0 auto;
border: 1px solid #222;
}
input {
display: block;
margin: 20px auto;
width: 800px
}
</style>
</head>
<body>
<div id="app">
<canvas id="my-canvas"></canvas>
<input type="range" value="1.0" min="0.5" max="3.0" step="0.1">
<canvas id="watermark-canvas" style="display: none;"></canvas>
</div>
<script type="text/javascript">
window.onload = function () {
var canvas = document.queryselector("#my-canvas")
var watermarkcanvas = document.queryselector("#watermark-canvas")
var slider = document.queryselector("input")
var scale = slider.value
var ctx = canvas.getcontext('2d')
var watermarkctx = watermarkcanvas.getcontext("2d")
/* 给第二个canvas获取的context对象添加水印 */
watermarkcanvas.width = 300
watermarkcanvas.height = 100
watermarkctx.font = "bold 20px arial"
watermarkctx.linewidth = "1"
watermarkctx.fillstyle = "rgba(255 , 255 , 255, 0.5)"
watermarkctx.filltext("=== yuanxin.me ===", 50, 50)
/****************************************/
var img = new image()
img.src = "./img/photo.jpg"
/* 加载图片后执行操作 */
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
drawimagebyscale(canvas, ctx, img, scale, watermarkcanvas);
// 监听input标签的mousemove事件
// 注意：mousemove实时监听值的变化，内存消耗较大
slider.onmousemove = function () {
scale = slider.value
drawimagebyscale(canvas, ctx, img, scale, watermarkcanvas);
}
}
/******************/
}
/**
*
* @param {object} canvas 画布对象
* @param {object} ctx
* @param {object} img
* @param {number} scale 缩放比例
* @param {object} watermark 水印对象
*/
function drawimagebyscale(canvas, ctx, img, scale, watermark) {
// 图像按照比例进行缩放
var width = img.width * scale,
height = img.height * scale
// (dx, dy): 画布上绘制img的起始坐标
var dx = canvas.width / 2 - width / 2,
dy = canvas.height / 2 - height / 2
ctx.clearrect(0, 0, canvas.width, canvas.height) // no1 清空画布
ctx.drawimage(img, dx, dy, width, height) // no2 重新绘制图像
if (watermark) {
// no3 判断是否有水印: 有, 绘制水印
ctx.drawimage(watermark, canvas.width - watermark.width, canvas.height - watermark.height)
}
}
</script>
</body>
</html>
实现效果如下图所示：
拖动滑竿，即可放大和缩小图像。然后右键保存图像。保存后的图像，就有已经有了水印，如下图所示：
3. 实现放大镜
在上述中心缩放的基础上，实现放大镜主需要注意以下 2 个部分：
- 细化处理
canvas的鼠标响应事件：滑入、滑出、点击和松开 - 重新计算离屏坐标（详细公式计算思路请见代码注释）
- 重新计算鼠标相对于 canvas 标签的坐标（详细公式计算思路请见代码注释）
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<style>
canvas {
display: block;
margin: 0 auto;
border: 1px solid #222;
}
</style>
</head>
<body>
<canvas id="my-canvas"></canvas>
<canvas id="off-canvas" style="display: none;"></canvas>
<script>
var ismousedown = false,
scale = 1.0
var canvas = document.queryselector("#my-canvas")
var offcanvas = document.queryselector("#off-canvas") // 离屏 canvas
var ctx = canvas.getcontext("2d")
var offctx = offcanvas.getcontext("2d") // 离屏 canvas 的 context对象
var img = new image()
window.onload = function () {
img.src = "./img/photo.jpg"
img.onload = function () {
canvas.width = img.width
canvas.height = img.height
offcanvas.width = img.width
offcanvas.height = img.height
// 计算缩放比例
scale = offcanvas.width / canvas.width
// 初识状态下, 两个canvas均绘制image
ctx.drawimage(img, 0, 0, canvas.width, canvas.height)
offctx.drawimage(img, 0, 0, canvas.width, canvas.height)
}
// 鼠标按下
canvas.onmousedown = function (event) {
event.preventdefault() // 禁用默认事件
var point = windowtocanvas(event.clientx, event.clienty) // 获取鼠标相对于 canvas 标签的坐标
ismousedown = true
drawcanvaswithmagnifier(true, point) // 绘制在离屏canvas上绘制放大后的图像
}
// 鼠标移动
canvas.onmousemove = function (event) {
event.preventdefault() // 禁用默认事件
if (ismousedown === true) {
var point = windowtocanvas(event.clientx, event.clienty)
drawcanvaswithmagnifier(true, point)
}
}
// 鼠标松开
canvas.onmouseup = function (event) {
event.preventdefault() // 禁用默认事件
ismousedown = false
drawcanvaswithmagnifier(false) // 不绘制离屏放大镜
}
// 鼠标移出canvas标签
canvas.onmouseout = function (event) {
event.preventdefault() // 禁用默认事件
ismousedown = false
drawcanvaswithmagnifier(false) // 不绘制离屏放大镜
}
}
/**
* 返回鼠标相对于canvas左上角的坐标
* @param {number} x 鼠标的屏幕坐标x
* @param {number} y 鼠标的屏幕坐标y
*/
function windowtocanvas(x, y) {
var bbox = canvas.getboundingclientrect() // bbox中存储的是canvas相对于屏幕的坐标
return {
x: x - bbox.x,
y: y - bbox.y
}
}
function drawcanvaswithmagnifier(isshow, point) {
ctx.clearrect(0, 0, canvas.width, canvas.height) // 清空画布
ctx.drawimage(img, 0, 0, canvas.width, canvas.height) // 在画布上绘制图像
/* 利用离屏，绘制放大镜 */
if (isshow) {
var { x, y } = point
var mr = 50 // 正方形放大镜边长
// (sx, sy): 待放大图像的开始坐标
var sx = x - mr / 2,
sy = y - mr / 2
// (dx, dy): 已放大图像的开始坐标
var dx = x - mr,
dy = y - mr
// 将offcanvas上的(sx,sy)开始的长宽均为mr的正方形区域
// 放大到
// canvas上的(dx,dy)开始的长宽均为 2 * mr 的正方形可视区域
// 由此实现放大效果
ctx.drawimage(offcanvas, sx, sy, mr, mr, dx, dy, 2 * mr, 2 * mr)
}
/*********************/
}
</script>
</body>
</html>
放大镜效果如下图所示(被红笔标出的区域就是我们的正方形放大镜)：
欢迎入群：857989948 。it 技术深度交流和分享，涉及方面包括但不限于：网站制作、运营、ui 设计、算法分析、大数据、人工智能等。本群主打有深度、有态度的技术交流，欢迎热衷记录知识的您的加入。