1. 创建canvas工具类
class Canvas {
canvas = null;
ctx = null;
constructor() {
this.canvas = document.createElement('canvas');
this.ctx = this.canvas.getContext('2d');
}
setCanvasSize(w, h) {
this.canvas.width = w;
this.canvas.height = h;
}
async assemblyPic(imgOptions) {
for (const imgOption of imgOptions) {
let img = new Image();
img.src = imgOption.src;
await new Promise((r) => {
img.onload = () => {
this.ctx.drawImage(
img,
imgOption.x || 0,
imgOption.y || 0,
imgOption.w || img.width,
imgOption.h || img.height,
);
r(true);
};
});
}
}
copyCanvas() {
return new Promise((r, j) => {
this.canvas.toBlob(async (blob) => {
const data = [
new ClipboardItem({
[blob.type]: blob,
}),
];
await navigator.clipboard.write(data).then(
() => {
r(true);
},
() => {
j(false);
},
);
});
});
}
}
2. 使用
<script src="./canvas.js"></script>
<script>
const myCanvas = new Canvas()
document.body.append(myCanvas.canvas)
const url1 = `https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00426-872.jpg`
const url2 = `https://img0.baidu.com/it/u=1993557595,4075530522&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500`
myCanvas.setCanvasSize(1000,1000)
myCanvas.assemblyPic([
{
src: url1,
}, {
src: url2,
},
])
function onCopy(){
myCanvas.copyCanvas()
}
</script>