Canvas(十三) 离屏Canvas(添加水印)

发布日期: 2020-06-21

更新日期: 2020-06-19

文章字数: 306

阅读时长: 1 分

阅读次数:

添加水印 2 个 canvas

<html>
  <head> </head>
  <body>
    <canvas
      id="canvas"
      style="display:block;margin:0 auto;border:1px solid #ccc"
      >您的浏览器不支持canvas</canvas
    >
    <input
      type="range"
      id="scale-range"
      min="0.5"
      max="3.0"
      step="0.01"
      value="1.0"
      style="display:block;margin:20px auto;width:800px;"
    />

    <canvas
      id="watermark-canvas"
      style="display:none;margin:0 auto;border:1px solid #ccc"
      >您的浏览器不支持canvas</canvas
    >
  </body>
</html>
<script>
  window.onload = function () {
    var canvas = document.getElementById('canvas')
    canvas.width = 800
    canvas.height = 800
    var watermarkCanvas = null
    var watermarkContext = null
    var context = canvas.getContext('2d')
    var slider = document.getElementById('scale-range')
    var scale = slider.value
    var img = new Image()
    img.src = 'xxx.jpg' //注意路径
    img.onload = function () {
      //context.drawImage(img, 0, 0, canvas.width, canvas.height)
      drawImageByScale(scale)
      slider.onmousemove = function () {
        scale = slider.value
        drawImageByScale(scale)
      }
    }
  }
  //水印绘制
  function drawwater() {
    //水印绘制
    watermarkCanvas = document.getElementById('watermark-canvas')
    watermarkContext = watermarkCanvas.getContext('2d')
    watermarkCanvas.width = 600
    watermarkCanvas.height = 100
    watermarkContext.font = 'bold 50px Arial'
    watermarkContext.lineWidth = '1'
    watermarkContext.fillStyle = 'rgba(255,255,255,0.5)'
    watermarkContext.textBaseline = 'middle'
    watermarkContext.fillText('==Jsopy==', 20, 50)
  }

  function drawImageByScale(scale) {
    var imageWidth = 1152 * scale
    var imageHeight = 768 * scale
    // var sx = imageWidth / 2 - canvas.width / 2
    // var sy = imageHeight / 2 - canvas.height / 2
    // context.drawImage(
    //   img,
    //   sx,
    //   sy,
    //   canvas.width,
    //   canvas.height,
    //   0,
    //   0,
    //   canvas.width,
    //   canvas.height
    // )
    var dx = canvas.width / 2 - imageWidth / 2
    var dy = canvas.height / 2 - imageHeight / 2
    context.clearRect(0, 0, canvas.width, canvas.height) //清空
    context.drawImage(img, dx, dy, imageWidth, imageHeight)
    //加载水印
    drawwater()
    context.drawImage(
      watermarkCanvas,
      canvas.width - watermarkCanvas.width,
      canvas.height - watermarkCanvas.height
    )
  }
</script>