<!DOCTYPE
html>
<html>
<head
lang="en">
<meta
charset="UTF-8">
<title>canvas-图像截取</title>
<style>
canvas{
border:
1px
dashed
red
float:
left
position:
relative
}
</style>
</head>
<body>
<div
id="cantox"
style="position:
relative">
<canvas
id="oldcanvas"
width="500px"
height="300px">
</canvas>
<div
id="cliptox"
style="position:
absolutedisplay:none"></div>
</div>
<button
id
="btnclip"
style="float:
left">截取该区域</button>
<canvas
id="nowcanvas"
width="500px"
height="300px"
>
</canvas>
<script>
//获取div元素
var
cantox
=
document.getElementById("cantox")
var
cliptox
=
document.getElementById("cliptox")
var
btnclip
=
document.getElementById("btnclip")
//获取到canvas元素
var
oldcanvas
=
document.getElementById("oldcanvas")
var
nowcanvas
=
document.getElementById("nowcanvas")
//获取canvas中的画图环境
var
oldcontext
=
oldcanvas.getContext('2d')
var
nowcontext
=
nowcanvas.getContext('2d')
var
img
=
new
Image()
img.src
=
"./image/liuyifei.jpg"
//加载图像到canvas画布中
window.onload
=
function
(){
oldcontext.drawImage(img,0,0,oldcanvas.width,oldcanvas.height)
}
var
startPoint//截取图像开始坐标
var
endPoint//埋缓友截图图像的结束坐标
var
w
//截取图像的宽度
var
h
//截取图像的高度
var
flag
=
false
//用于判断移动事件事物控制
//鼠标按下事件
cantox.onmousedown
=
function
(e){
flag
=
true
cliptox.style.display
=
'block'
startPoint
=
windowToCanvas(oldcanvas,
e.clientX,
e.clientY)
cliptox.style.left
=
startPoint.x+'px'
cliptox.style.top
=
startPoint.y+'px'
}
//鼠标移动事件
cantox.onmousemove
=
function
(e){
if(flag){
cliptox.style.background
=
'rgba(0,0,0,0.5)'
endPoint
=
windowToCanvas(oldcanvas,
e.clientX,
e.clientY)
w
=
endPoint.x
-
startPoint.x
h
=
endPoint.y
-
startPoint.y
cliptox.style.width
=
w
+'px'
cliptox.style.height
=
h+'弯槐px'
}
}
//鼠标释放事件
cantox.onmouseup
=
function
(e){
flag
=
false
}
//按钮截取事件
btnclip.onclick
=
function
(){
imgCut(nowcontext,img,oldcanvas.width,oldcanvas.height,startPoint.x,startPoint.y,w,h)
}
/*
*
图像截取函数
*
context:绘制环境对象
*
image：图像对象
*
imgElementW：图像显示的宽度
*
imgElementH：图像显示的高度
*
sx:截取图像的开始X坐标
*
sy:截取图像的开始Y坐标
*
w:截取图像的宽度
*
h:截取图像的高度
*
*/
function
imgCut(context,image,imgElementW,imgElementH,sx,sy,w,h){
//清理画布，便于重新绘制
context.clearRect(0,0,imgElementW,imgElementH)
//计算
：比例
=
原图像/显示图像
var
ratioW
=
image.width/imgElementW
var
ratioH
=
image.height/imgElementH
//根据截取图像的所占位置及大小计算出在原图所占的位置及大小
//.drawImage(图像对象,原图像截取的起始X坐标,原图像截取的起始Y坐标,原图像截取的宽度,原图像截取的高度，
//
绘制图像的起始X坐标,绘制图像的起始Y坐标,绘制图像所需要的宽度,绘制图像所需要的高度)
context.drawImage(image,ratioW*sx,ratioH*sy,ratioW*w,ratioH*h,0,0,w,h)
}
/*
*
坐标转换：将window中的坐标转换到元素盒子中的坐标，并返回(x,y)坐标
*
element：canvas元素对象
*
x:鼠标在当前窗口X坐标值
*
y:鼠标在当前窗口Y坐标值
*
*/
function
windowToCanvas(element,x,y){
//获取当前鼠标在window中的坐标值
//
alert(event.clientX+"-------"+event.clientY)
//获取元素的坐标属性
var
box
=
element.getBoundingClientRect()
var
bx
=
x
-
box.left
var
by
=
y
-
box.top
return
{x:bx,y:by}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
canvas简单理解成一张历哗可以自定义大肢神行小（有上限）的画布，在画布上可以写字，画瞎颂图形，放置图片。一般可以用来动态生成截图，方便用户保存和转发。
官方资料：
https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.html
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）