水印canvas

vue3 
canvas 水印写法
<canvas ref="canvas"  width="800px" height="800px"></canvas>

import {ref,onmounted} from 'vue'
let canvas=ref()
let image=ref()

onmounted(()=>{
        shuiyin()
})
const shuiyin=()=>{
        let context=ref()
        context=canvas.value.getContetx('2d')
        image=new Image()
        images.src = "图片地址"
        images.onload = () => {
                context.drawImage(images, 0, 0, canvas.value.width, canvas.value.height)
                context.font = "48px Arial";
                context.fillStyle = "rgba(255, 0, 0, 0.5)";
                context.fillText("少吃芒果", 50, 50);
        }
}

vue2
 

<canvas id="watermarkCanvas" width="800" height="600"></canvas>

<script>
  const canvas = document.getElementById("watermarkCanvas");
  const context = canvas.getContext("2d");

  const image = new Image();
  image.src = "your-image.jpg"; // 你的图片URL

  image.onload = function() {
    context.drawImage(image, 0, 0, canvas.width, canvas.height);

    context.font = "48px Arial";
    context.fillStyle = "rgba(255, 0, 0, 0.5)";
    context.fillText("Watermark Text", 50, 50);
  };
</script>