/*
说明：
运行环境：服务器环境下，因为canvas.toDataURL不支持本地文件打开
使用场景：当你想把一张图片生成不同尺寸的图片
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas绘制图片并下载图片</title>
</head>
<body>
<canvas></canvas>
<button id="btn">保存并下载</button>
<script>
const oBtn = document.querySelector('#btn')
const cvs = document.querySelector('canvas')
// 定义图片要转换的尺寸
const width = 414, height = 626
const imgUrl = "./img.jpg"
// 设置canvas样式
cvs.setAttribute('width', width)
cvs.setAttribute('height', height)
cvs.style.background="red"
const ctx = cvs.getContext('2d')
const oImg = new Image()
oImg.onload = function() {
console.log(oImg.width, oImg.height)
// 将图片绘制到canvas中，
// 第1个参数 规定要使用的图像、画布或视频。
// 2,3,4,5,6,7,8,9 参数都是可选的
// 第2,3个参数 开始剪切的 x, y 坐标位置。
// 第4,5个参数 被剪切图像的宽高度。
// 第6,7个参数 在画布上放置图像的 x，y 坐标位置。
// 第8,9个参数 要使用的图像的宽高度。
ctx.drawImage(oImg, 0, 0, width, height)
}
oImg.src = imgUrl
oBtn.onclick = function() {
const type = imgUrl.endsWith('.jpg') ? {ext: ".jpg", mime: "image/jpeg"} : imgUrl.endsWith('.png') ? {ext: ".png", mime: "image/png"} : false
if (!type) return alert('图片后缀名格式必须是.jpg或者.png')
// 生成base64数据
const base64Content = cvs.toDataURL(type.mime)
const blob = base64ToBlob(base64Content);
// 下载
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = Date.now() + type.ext
const clickEvent = document.createEvent('MouseEvents')
clickEvent.initEvent('click', true, true)
link.dispatchEvent(clickEvent)
}
// 将base64类型转为Blob类型
function base64ToBlob(code) {
const parts = code.split(';base64,');
const contentType = parts[0].split(':')[1];
const raw = window.atob(parts[1]);
const rawLength = raw.length;
const uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
}
</script>
</body>
</html>
