Canvas
JavaScrip高级教程 · 64 字
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
图片加水印
canvas标签支持加载图片
<canvas id="myCanvas" width="741" height="757"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'https://p3-juejin-sign.byteimg.com/tos-cn-i-k3u1fbpfcp/7d980ec4360c44a3b0750c80270fb2fc~tplv-k3u1fbpfcp-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6aSQ6aSQ5pyJ6bG85pyJ6Jm-:q75.awebp?rk3s=436ef1ef&x-expires=1726048237&x-signature=4GDT3Qd5SG4ckt7f7cp7ArbwVlA%3D'
img.onload = function () {
ctx.drawImage(img, 0, 0);
ctx.font = '30px Arial';
ctx.fillStyle = 'red';
ctx.fillText('Watermark', 10, 50);
};
</script>