微信小程序上传照片加水印

微信小程序上传照片加水印

	上传水印用的是canvas做的

canvas 我选用的网址：阿里云：https://help.aliyun.com/document_detail/188957.html；菜鸟教程：https://www.runoob.com/html/html5-canvas.html；w3c：https://www.w3school.com.cn/html/html5_canvas.asp；

三种方式差不多的文档，你看着哪个舒服方便理解就用哪个，我用的是菜鸟教程的
然后我是上传功能中添加的水印，加的时间地点，时间我取得时间戳，地点我是固定死的，你们有需要的也可以用变量去使用
在wxml中：

<view class="weui-uploader" >
  <view class="img-v weui-uploader__bd">
    <view class='pic' wx:for="{{imgs}}" wx:for-item="item" wx:key="*this" style="">
        <image class="upImgIcon" 
                src="{{item}}" 
                data-index="{{index}}" mode="aspectFill"  bindtap="previewImg">
                  <icon type='cancel' class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></icon>
        </image>
    </view>
     
      <!-- 用来提示用户上传图片 -->
      <image class="upImgIcon" id="{{3}}"  bindtap="Photograph"  src="../../../images/business/icon-tp@2x.png" alt="" />
  </view>
</view>


<view style="width: 0;height: 0;overflow: hidden;position:fixed;left: 200%;">
  <canvas canvas-id="firstCanvas" style="border:1px solid #000000;" class="canvas" style="width: {{w}}px;height: {{h}}px;"></canvas>
</view>

在js中：

// pages/try/upload/upload.js


Page({
  /**
   * 页面的初始数据
   */
  data: {
    imgs: [],
    socketOpen: false,
		src:'',
		canvasStyle:{}
  },
  Photograph(){ //点击拍照的方法
    let that = this
    wx.chooseImage({
      count: 1,//允许的上传总数
      quality: 'high',//图片质量
      sizeType: ['compressed'],
      sourceType: ['camera'],//支持相机和相册
      success: function(res) {
        console.log(res.tempFilePaths[0])
        wx.showLoading({
          title: "正在加载图片",
          mask: true
        })
        //获取原图片信息
        wx.getImageInfo({
          src: res.tempFilePaths[0],
          success: function (res) {
            console.log(res)
            var width = res.width, height = res.height;
            that.setData({//设定画布的宽高
              w: width,
              h: height
            })
            //获取当前时间
            let newDate = new Date();
            let year = newDate.getFullYear() //年
            let month = newDate.getMonth() + 1 //月
            let day = newDate.getDate() //日
            var hour = newDate.getHours()
            var minute = newDate.getMinutes()
            var second = newDate.getSeconds()
            let roleNameInfo = '拍摄时间：' + year + '年' + month + '月' + day + '日 '+hour+':'+minute+':' +second
            let address = '安徽省安庆市望江县'
            //创建canvas
            const ctx = wx.createCanvasContext('firstCanvas');
            ctx.drawImage(res.path, 0, 0, width, height); //先画出图片
            //将声明的时间放入canvas
            ctx.setFontSize(30) //注意：设置文字大小必须放在填充文字之前，否则不生效
            ctx.setFillStyle('red');
            ctx.fillText(roleNameInfo, 80, height - 60);
            ctx.fillText(address, 80, height - 20);
            
            ctx.draw(false, function () {
              setTimeout(function(){
                //绘画完成回调
                //生成图片
                wx.canvasToTempFilePath({
                  quality: 1,
                  fileType: 'jpg',
                  canvasId: 'firstCanvas',
                  success: function (ress) {
                    wx.hideLoading();
                    let imgs = that.data.imgs
                    imgs.push(ress.tempFilePath)
                    that.setData({
                      imgs: imgs
                    })
                    console.log('imgs',that.data.imgs)
                    console.log(ress.tempFilePath);//ress.tempFilePath就是带有水印的图片路径
                  }
                })
              },600)
            })
          }
        })
      }
    })
  },
 
  // 删除图片
  deleteImg: function (e) {
    var imgs = this.data.imgs;
    var index = e.currentTarget.dataset.index;
    imgs.splice(index, 1);
    this.setData({
      imgs: imgs
    });
  },
  // 预览图片
  previewImg: function (e) {
    //获取当前图片的下标
    var index = e.currentTarget.dataset.index;
    //所有图片
    var imgs = this.data.imgs;
    console.log(imgs[index].tempFilePath)
    wx.previewImage({
      //当前显示图片
      current: imgs[index],
      //所有图片
      urls: imgs
    })
  },
  
})

以上是所有的代码了，有提问我们可以一起学习，刚进入这个行业，还在摸爬滚打中。