前端添加水印

　　之前也写过添加水印的  时间过了很久就忘记了 每次都要重新去找一下,这次写完记录一下,方便以下以后使用,有需要的拿走.

　　最近项目中要添加水印  做下总结:

　　首先我们是在小程序中添加,代码如下

　　项目使用uni-app进行开发,有原生的自己进行更改  @click=>bindtap   uni=>wx

    <button @click="chooiseImg">选择图片</button>
        <canvas canvas-id="canvasOne"  class="canvas-one"></canvas>

　　下面是js代码

//图片选择
    chooiseImg(){
    const self = this;
    uni.chooseImage({
        success(res) {
            console.log(res)
                                
                     self.shuiyin(res.tempFilePaths[0])
        }
    })
},
    
shuiyin(img) {
    let context = wx.createCanvasContext('canvasOne')  //这里的“share”是“canvas-id”
              var img = img
              context.setFillStyle('#fff')    //这里是绘制白底，让图片有白色的背景
              context.fillRect(0, 0, 0, 0)
              context.drawImage(img, 0, 0,132,132 ) //绘制商品图片后面的数字分别代表图片左顶角的x，y坐标，右顶点的x，y坐标。
              context.setFontSize(20)//字体大小
              context.setFillStyle("red")//颜色
              context.fillText('logo', 40, 60)  //绘制描述字体
              //把画板内容绘制成图片，并回调画板图片路径
              context.draw(false, function () {
                 wx.canvasToTempFilePath({//把当前画布指定区域的内容导出生成指定大小的图片具体可看
                  x: 0,
                  y: 0,
                  width: 500,
                                    height: 500,
                                    destWidth: 500,
                                    destHeight: 500,
                  canvasId: 'canvasOne',//canvasOne是自己在wxml中定义的
                  success: function (res) {                         
                        console.log(res.tempFilePath)
                      wx.saveImageToPhotosAlbum({//保存图片到系统相册----缺点没有返回该图片的路径
                          filePath:res.tempFilePath,
                          success(res) {
                          }
                        })
                      
                      },
                  fail(res) {
                    wx.hideLoading()
                    console.log("fail res:")
                    console.log(res)
                  }
                })
              })  
            },