vue + canvas 圖片加水印

思路：將兩張圖片繪制為一張

目標：輸入的文字，繪制到圖片上，簡單實現圖片水印

效果：輸入的文字1: ‘你猜猜’ + 圖片2 = 圖片3（不要看清除水印的按鈕，本人垃圾 沒實現）

 

 

 

選擇圖片

html　　

<input type="file" id="uploadFile" class="clip" accept="image/*" @change="chooseImg">

js

    // 上傳圖片
      chooseImg(event) {
        var file = event.target.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        let _this = this;
        reader.onload = function() {
          _this.imgsrc = reader.result;
        };
        _this.imgsrc = file;
      }

將文字生成圖片

html

<input type="text" placeholder="請輸入你要添加的水印文字" class="water-text" v-model="text" @change="conformText()">

js

    //生成水印文字 canvas文字你可以設置為你喜歡的樣式
      conformText() {
        var canvas = document.createElement('canvas') //准備空畫布
        var ctx = canvas.getContext("2d")
        ctx.font = "20px Georgia" //canvas字體
        ctx.fillText(this.text, 10, 50)
        var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0)
        gradient.addColorStop("0", "magenta")
        gradient.addColorStop("0.5", "blue")
        gradient.addColorStop("1.0", "red")
        ctx.fillStyle = gradient
        this.imgTextUrl = canvas.toDataURL("image/png")
      }

 

合成圖片

html

      <img id="imgsrc" :src="imgsrc" :width="size">
      <img id="imgTextUrl" :src="imgTextUrl" :width="size">
      <img id="imgUploadUrl" :src="imgUploadUrl" @click="downLoad()">
      <div class="conform" @click="confirmImg()">合成圖片</div>    

js

　　// 合成圖片
      confirmImg(url) {
        var canvasAll = document.createElement('canvas')
        const size = 180
        canvasAll.width = this.size
        canvasAll.height = this.size
        var context = canvasAll.getContext('2d')

        // 這是上傳圖像
        var imgUpload = new Image();
        var img1 = document.getElementById('imgsrc')
        var img2 = document.getElementById('imgTextUrl')
        const that = this
        imgUpload.onload = function() {
          // 繪制
          context.drawImage(img1, 0, 0, img1.width, img1.height);
          // 再次繪制
          context.drawImage(img2, 0, 130, img2.width, img2.height);
          // 回調
          that.imgUploadUrl = canvasAll.toDataURL('image/png')
        }
        imgUpload.src = url;
      }

點擊合成后的圖片下載

js

    downLoad() {
        var a = document.createElement('a');
        a.href = this.imgUploadUrl  //將畫布內的信息導出為png圖片數據
        a.download = '水印圖片';  //設定下載名稱 如果不設置a.download 瀏覽器會嘗試打開這張圖片 而圖片會下載失敗
        a.click(); //點擊觸發下載
      }

文字水印可以加個drag 進行優化，拖拽調整位置，有時間我加上

 

以上就是圖片合成的核心代碼 很粗糙 但是我目前的思路就是這了

 

關於去除水印，我是這樣想的：

第一種：

1: 點擊圖片（水印部分）獲取當前點擊點的色值

2: 將該點顏色替換為目標顏色（目標顏色可以自己手動設置、可以在頁面加色卡 自定義選取，有點類似於ps）

第二種：

1: 點擊圖片（水印部分）獲取當前點擊點的色值

2: 選取圖片內要替換顏色的區域

3: 將區域內同色值的點全部替換為目標顏色

 

我使用第一種方法時，遇到的問題是第2步中，替換顏色的時候，圖片上沒有辦法添加顏色，鼠標點擊的時候那個點的顏色會隨着鼠標移動到下一個點走 

跪求有這方面經驗的大佬指點迷津啊