持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情
最近有小伙伴问我分享携带二维码 还有涂鸦生成图片 撤回与反撤回的功能 趁着周末回顾一下canvas 许久不写这些东西 快忘完了
项目功能较复杂 先自己写下demo 看下api
demo效果
多张合成 （ 这个图是在csdn盗的 ）
<!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>Document</title>
<style>
#cvs {
background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbkimg.cdn.bcebos.com%2Fpic%2Faa18972bd40735fae6cd9f147b0018b30f2442a7a246&refer=http%3A%2F%2Fbkimg.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668299858&t=758d3c5077a4f1700ec682a2091a237e') no-repeat;
background-size: 100% 100%;
}
</style>
</head>
<body>
<canvas id="cvs" height="300" width="500"></canvas>
<div>
<button id="submit">保存</button>
</div>
<br>
<br>
<hr>
<div id="imgBox">
<h3>生成的图片</h3>
<img id="myImg" src="" alt="">
</div>
<script>
const bgImg = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbkimg.cdn.bcebos.com%2Fpic%2Faa18972bd40735fae6cd9f147b0018b30f2442a7a246&refer=http%3A%2F%2Fbkimg.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668299858&t=758d3c5077a4f1700ec682a2091a237e'
const canvas = document.getElementById('cvs')
const ctx = canvas.getContext('2d')
ctx.fillStyle = "#f3f3f3";
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.font = '40px Arial'
ctx.fillStyle = '#000'
ctx.textAlign = 'center'
ctx.fillText("刮开有惊喜", canvas.width / 2, canvas.height / 2)
ctx.globalCompositeOperation = 'destination-out'
let draw = false;
canvas.addEventListener('mousedown', e => {
draw = true
drawHandler(e)
})
canvas.addEventListener('mousemove', e => {
if (!draw) return;
drawHandler(e)
})
canvas.addEventListener('mouseup', e => {
draw = false;
})
function drawHandler(e) {
ctx.beginPath()
ctx.arc(
e.pageX - canvas.offsetLeft,
e.pageY - canvas.offsetTop,
10,
0,
Math.PI * 2
)
ctx.stroke()
ctx.fill()
ctx.closePath()
}
const submit = document.getElementById('submit')
const imgBox = document.getElementById('imgBox')
submit.addEventListener('click', e => {
var base64 = canvas.toDataURL("image/png");
drawAndShareImage(bgImg,base64,500,300)
//下载
// const a = document.createElement('a')
// a.download = 'canvas'
// a.href = base64;
// document.body.appendChild(a)
// a.click()
// document.body.removeChild(a)
})
function drawAndShareImage(bg,img,w,h) {
var canvas = document.createElement("canvas");
canvas.width = w;
canvas.height = h;
var context = canvas.getContext("2d");
context.rect(0, 0, canvas.width, canvas.height);
var myImage = new Image();
myImage.src = bg;
myImage.crossOrigin = 'Anonymous';
myImage.onload = () => {
context.drawImage(myImage, 0, 0, w, h);
var myImage2 = new Image();
myImage2.src = img;
// 跨域
myImage2.crossOrigin = 'Anonymous';
myImage2.onload = () => {
// 设置填充的颜色
// context.fillStyle = "white";
// 绘制填充的矩形
// context.fillRect(250, 250, 210, 210);
context.drawImage(myImage2, 0,0, 500, 300);
var base64 = canvas.toDataURL("image/png");
// 获取图片容器
var myImg = document.getElementById('myImg');
myImg.src = base64;
}
}
}
// 多张图片合并
// function drawAndShareImage(imgSrc1, arr) {
// console.log(imgSrc1,arr)
// //imgSrc1 背景图片（二维码）链接
// //arr 合成的小图片的数组[链接1,链接2.....]
// var canvas = document.createElement("canvas");
// canvas.width = 500;
// canvas.height = 300;
// var context = canvas.getContext("2d");
// context.rect(0, 0, canvas.width, canvas.height);
// context.fillStyle = "#fff";
// context.fill();
// var myImage = new Image();
// myImage.src = imgSrc1; //背景图片 你自己本地的图片或者在线图片
// myImage.crossOrigin = 'Anonymous';
// myImage.onload = () => {
// context.drawImage(myImage, 0, 0, 700, 700);
// // 示例：如果合成图片的位置有规律，就可以 循环传入的数组
// // 如果想要自由的合成图片，那就需要 重复的进行新建，逐个调整位置
// arr.forEach((item, index) => {
// let myImage2 = new Image();
// myImage2.src = item; //你自己本地的图片或者在线图片
// myImage2.crossOrigin = 'Anonymous';
// myImage2.onload = () => {
// // 设置填充的颜色
// context.fillStyle = "white";
// // 区分每一个图片的位置
// let left = 0
// let top = 0
// if (index % 2 == 0) {
// left = 0
// top = 150 * Math.floor(index / 2)
// } else {
// left = 200
// top = 150 * Math.floor(index / 2)
// }
// // 绘制填充的矩形
// context.fillRect(150 + left, 150 + top, 110, 110);
// // 绘制图片
// context.drawImage(myImage2, 160 + left, 160 + top, 90, 90);
// var base64 = canvas.toDataURL("image/png");
// return base64;
// }
// })
// }
// }
</script>
</body>
</html>
