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>