canvas图片绘制及下载
canvas中文api
canvas绘制图片
创建canvas
绘图上下文context
上下文：工具包，是所有绘制操作api的入口
1.canvas自身无法绘制任何内容，canvas的绘图是js的操作
2.context对象时js操作canvas的接口
3.使用getContext('2d')来获取2D绘图的上下文
<canvas id="canvas" width="1200" height="600">canvas>
<script>
(() => {
let myCanvas = document.querySelector('#canvas');
// 2d小写 3d:webgl
let ctx = myCanvas.getContext('2d');
let ctx = myCanvas.getContext('webgl');
})()
script>
图片基本绘制
ctx.drawImage(img, x, y);
参数：
img：绘制图片的dom对象
x、y：绘制图片的左上角坐标
图片宽高重定绘制
ctx.drawImage(img, x, y, width, height);
参数：
width：绘制图片的宽度
height：绘制图片的高度
图片裁剪部分绘制
ctx.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);
参数：
sx、sy：裁剪图片的左上角坐标
swidth：裁剪图片的宽度
sheight：裁剪图片的高度
案例
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>canvastitle>
head>
<body>
<canvas id="canvas" width="1200" height="1000">canvas>
<script>
(() => {
let myCanvas = document.querySelector('#canvas');
let ctx = myCanvas.getContext('2d');
let img = new Image();
img.src = 'images/katsuki.jpg'
img.onload = function() {
// 原图绘制
ctx.drawImage(img, 20, 20);
}
let img2 = new Image();
img2.src = 'images/katsuki.jpg'
img2.onload = function() {
// 规定大小绘制
ctx.drawImage(img, 420, 20, 400, 200);
}
let img3 = new Image();
img3.src = 'images/katsuki.jpg'
img3.onload = function() {
// 图片裁剪部分绘制
ctx.drawImage(img, 480, 97, 180, 200, 20, 360, 180, 200);
}
})()
script>
body>
html>
canvas保存图片（base64）
toDataURL(mimeType, quality)
参数：
mimeType：
表示需要转换的图像的mimeType类型。默认值是image/png
quality：
表示转换的图片质量，范围是0到1。
此参数要想有效，图片的mimeType需要是image/jpeg或者image/webp，其他mimeType值无效。
默认压缩质量是0.92。
必须在服务器环境使用，file本地打开报错
案例
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>canvastitle>
head>
<body>
<canvas id="canvas" width="1200" height="1000">canvas>
<br />
<button id='btnSave'>保存图片button>
<script>
(() => {
let myCanvas = document.querySelector('#canvas');
let ctx = myCanvas.getContext('2d');
let img3 = new Image();
img3.src = 'images/katsuki.jpg'
img3.onload = function() {
ctx.drawImage(img, 480, 97, 180, 200, 20, 360, 180, 200);
}
let btnSave = document.querySelector('#btnSave')
btnSave.onclick = function() {
let imgData = myCanvas.toDataURL('image/png');
console.log(imgData);
// 保存的图片显示到页面
let newImage = new Image();
newImage.src = imgData;
document.body.appendChild(newImage);
}
})()
script>
body>
html>
图片下载
在上述的保存图片按键修改
a标签方式
btnSave.onclick = function() {
let imgData = myCanvas.toDataURL('image/png');
console.log(imgData);
let link = document.createElement('a');
link.href = imgData;
link.style.display = 'none';
link.download = 'katsuki.png'; // 文件名称
document.body.appendChild(link);
link.click();
URL.revokeObjectURL(link.href); // 释放URL对象
document.body.removeChild(link);
}
自定义事件方式
浏览器不支持上一种方式可使用
处理步骤：
1.创建事件 eventObject = document.createElement(eventType)
| 参数 | 事件接口 | 初始化方法 |
|---|---|---|
| HTMLEvents | HTMLEvent | iniEvent() |
| MouseEvents | MouseEvent | iniMouseEvent() |
| UIEvents | UIEvent | iniUIEvent() |
2.初始化事件
- iniEvent()
- iniMouseEvent()
- iniUIEvent()
iniMouseEvent()参数：
| 参数类型 | 说明 |
|---|---|
| type string类型 | 要触发的事件类型，如‘click’ |
| bubbles Boolean类型 | 表示事件是否应该冒泡，针对鼠标事件模拟，该值应该被设置为true |
| cancelable bool类型 | 表示该事件是否能够被取消，针对鼠标事件模拟，该值应该被设置为true |
| view 抽象视图 | 事件授予的视图，这个值几乎全是document.defaultView |
| detail int类型 | 附加的事件信息这个初始化时一般应该默认为0 |
| screenX int类型 | 事件距离屏幕左边的X坐标 |
| screenY int类型 | 事件距离屏幕上边的y坐标 |
| clientX int类型 | 事件距离可视区域左边的X坐标 |
| clientY int类型 | 事件距离可视区域上边的y坐标 |
| ctrlKey Boolean类型 | 代表ctrol键是否被按下，默认为false |
| altKey Boolean类型 | 代表alt键是否被按下，默认为false |
| shiftKey Boolean类型 | 代表shif键是否被按下，默认为false |
| metaKey Boolean类型 | 代表meta key 是否被按下，默认是false |
| button int类型 | 表示被按下的鼠标键，默认是零 |
| relatedTarget (object) | 事件的关联对象.只有在模拟mouseover 和 mouseout时用到 |
3.触发事件dom.dispatchEvent(eventObject)
btnSave.onclick = function() {
let imgData = myCanvas.toDataURL('image/png');
console.log(imgData);
let link = document.createElement('a');
link.href = imgData;
link.style.display = 'none';
link.download = 'katsuki.png'; // 文件名称
let event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
link.dispatchEvent(event);
}