前段時間做了功能模塊：用戶設置自定義勛章；

實現方式：前端把用戶設置的昵稱傳到後臺，後臺根據不同用戶等級，使用離線合成技術合成不同的勛章返回到前端；

方案算是實現了，但是有點坑就是，後臺的離線合成沒有每次百分之百成功，且生成的圖片模糊，現在暫不說這個；

在實現上述功能模塊的時候聯想到之前有用canvas對圖片添加水印的demo，不禁翻出來看一看,也算是回顧一下知識吧。

效果：

大概思路就是，獲取一張圖片，用canvas繪制一次之後，再在繪制的圖片上繪制上水印文字，註意在本地獲得的圖片要轉成64base形式《Base64編碼原理與應用》。；

//html
<input type="file" id="uploadFile">
<label for="uploadFile" class="upload-btn">選擇圖片</label>
<p>圖片預覽</p>
<img src=""  class="readImg">

//js
var maxFilesize = 1024*1024; //文件最大不能超過100k
  var watermark = ‘hello world‘;
  var uploadFileEle = document.getElementById(‘uploadFile‘);
  var readImg = document.querySelector(‘.readImg‘);;
  var canvesSize = 300;

  uploadFileEle.addEventListener(‘change‘,function(event){
    var reader  = new FileReader();
    var file = event.target.files[0] || event.dataTransfer.files[0];
    
    if(file.size > maxFilesize){
      alert(‘上傳的圖片不能大於1M‘);
      return;
    }

    //base64編碼
    if (file) {
      reader.readAsDataURL(file);
    }

    reader.addEventListener("load", function () {
      //readImg.src = reader.result;
      //合成水印
      compoundImg(reader.result);
    }, false);
  },false);
  
  //合成水印
  function compoundImg(url){
    var canvas = document.createElement(‘canvas‘);
    canvas.width = canvesSize;
    canvas.height = canvesSize;
    var context = canvas.getContext(‘2d‘);

    var uploadImg = new Image();
    uploadImg.src = url;
    uploadImg.onload = function(){
      //繪制上傳的圖片
      context.drawImage(uploadImg,0,0,canvesSize,canvesSize,0,0,canvesSize,canvesSize);

      //繪制文字水印
      context.rotate(-15*Math.PI/180);
      context.font = "40px Arial"; 
      context.fillStyle = "rgba(17, 17, 17, .6)";
      context.textBaseline = ‘Middle‘;

      context.fillText(watermark, canvesSize/8, canvesSize/2);

      var imgUrl = canvas.toDataURL(‘image/png‘);
      readImg.src = imgUrl;
    }
  }

如果采用前端添加水印，別人完全可以繞過你的水印邏輯，盜用你的資源。

離線合成聯想到的--canvas合成水印