nhhyy-wx/utils/addWatermark.js

 const {
   API_BASE_URL,
   IMG_BASE_URL
 } = require('../api/api')
 const utils = require('./util')
 const canvasLocationImg = "../../img/canvas-location.png"; //定位图标
 const canvasPeopleImg = "../../img/canvas-people.png"; //人员图标
 const imageCodeImgBg = "../../img/map-bg.png"; //小程序二维码图背景

 /**
  * 
  * 绘制水印
  * 
  * @param {*} tempFilePath 图片路径
  * @param {*} photoName 
  * @param {*} data 数据源
  */
 function addWatermark(tempFilePath, photoName, data) {
   return new Promise(async (resolve, reject) => {
     wx.showLoading({
       title: '绘制图片中',
       mask: true
     })
     console.log("页面数据", data.customerAddress)
     const dpr = wx.getSystemInfoSync().pixelRatio;
     //canvas的宽和高
     const {
       canvasHeight,
       canvasWidth
     } = data

     //阴影的高度
     const shadowHeight = Math.min(canvasWidth, canvasHeight) * 0.2

     //创建画笔
     const ctx = data.canvas.getContext('2d')

     //设置画布大小
     data.canvas.width = canvasWidth * dpr
     data.canvas.height = canvasHeight * dpr
     ctx.scale(dpr, dpr)

     // 创建图片对象
     const image = data.canvas.createImage();

     //设置图片路径
     image.src = tempFilePath;

     //绘制照片
     image.onload = () => {
       //绘制定位图标  
       const imageLocation = data.canvas.createImage();
       imageLocation.src = canvasLocationImg
       imageLocation.onload = () => {
         ctx.drawImage(imageLocation, shadowHeight * 0.075, canvasHeight - shadowHeight * 0.45, shadowHeight * 0.4, shadowHeight * 0.4)
       }

       //绘制人员图标
       const imagePeople = data.canvas.createImage();
       imagePeople.src = canvasPeopleImg
       imagePeople.onload = () => {
         ctx.drawImage(imagePeople, shadowHeight * 0.075, canvasHeight - shadowHeight * 0.95, shadowHeight * 0.4, shadowHeight * 0.4)
       }
       //绘制小程序二维码图
       const imageCodeBg = data.canvas.createImage();
       imageCodeBg.src = imageCodeImgBg;
       imageCodeBg.onload = () => {
        const imageCode = data.canvas.createImage();
        imageCode.src = data.imageCodeImg ? data.imageCodeImg : ''
        // imageCode.src = 'https://sf-hd1-stimgs.oss-cn-hangzhou.aliyuncs.com//sfimg03/png/20210803/40ae583526054e83a9958a3a80f89295.png'
        imageCode.onload = () => {
        //  ctx.drawImage(imageCode, canvasWidth - shadowHeight * 1.2 - 8, 8, shadowHeight * 1.2, shadowHeight * 1.2)
         ctx.drawImage(imageCode, canvasWidth - shadowHeight*1.03 - 8 + shadowHeight*0.03/2, 8 + shadowHeight*0.03/3, shadowHeight * 1, shadowHeight * 1)
        }
        ctx.drawImage(imageCodeBg, canvasWidth - shadowHeight * 1.03 - 8, 8, shadowHeight * 1.03, shadowHeight * 1.23)
       }
       //绘制小程序码下文字
      //  ctx.fillText("扫码导航", canvasWidth - shadowHeight * 1.2 - 8, 8 + shadowHeight * 1.2)

       ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight)

       //绘制黑色背景矩形
       //绘制黑色渐变背景矩形
       const grd = ctx.createLinearGradient(0, 0, canvasWidth, 0);
       grd.addColorStop(0, "rgba(0,0,0,0.8)");
       grd.addColorStop(1, "rgba(255,255,255,0.4)");
       ctx.fillStyle = grd;
       ctx.fillRect(0, canvasHeight - shadowHeight, canvasWidth, shadowHeight)

       //设置画笔颜色
       ctx.fillStyle = '#ffffff';

       //设置文字大小及字体
       ctx.font = parseInt(shadowHeight * 0.15) + `px sans-serif`

       //绘制用户姓名
       const name = data.data.name, phone = data.data.phone;
       ctx.fillText("业主姓名:" + `${name}` + `  ${phone}`, shadowHeight * 0.5, canvasHeight - shadowHeight * 0.8)

       //绘制勘测人员
       const time = utils.formatTime(new Date())
       wx.getStorage({
         key: 'userName',
         success(res) {
           const surveyName = res.data
           ctx.fillText("踏勘人员:" + `${surveyName}` + "(" + `${time}` + ")", shadowHeight * 0.5, canvasHeight - shadowHeight * 0.6)
         }
       })

       //绘制地点
       ctx.fillText(`${data.customerAddress}` + ` ${data.direction?data.direction:''}`, shadowHeight * 0.5, canvasHeight - shadowHeight * 0.3)

       //绘制经纬度
       ctx.fillText("经度:" + `${data.canvasLongitude}` + "  " + "纬度:" + `${data.canvasLatitude}`, shadowHeight * 0.5, canvasHeight - shadowHeight * 0.1)


       //绘制完成后将canvas转为为图片
       setTimeout(() => {
         wx.hideLoading()
         wx.showLoading({
           title: '请稍后',
           mask: true
         })

         console.log("基础库信息", wx.getSystemInfoSync().SDKVersion)

         wx.canvasToTempFilePath({
           canvas: data.canvas,
           success: (res) => {
             console.log("绘制图片成功", res);
             wx.uploadFile({
               url: API_BASE_URL + 'common/weChat/uploadImage',
               filePath: res.tempFilePath,
               name: 'file',
               complete: function (res) {
                 wx.hideLoading()
                 console.log("上传图片", res)
                 if (res.statusCode == 200) {
                   const item = {
                     url: "",
                     name: "",
                   }
                   item.url = IMG_BASE_URL + res.data;
                   item.name = res.data;
                   resolve(item)
                 } else {
                   wx.showToast({
                     title: "选择失败",
                     icon: 'none'
                   })
                 }
               }
             })
           },
           fail: (res) => {
             console.log("绘制图片失败", res)
             wx.showToast({
               title: "绘制失败",
               icon: 'none'
             })
           },
           complete:()=>{
            wx.stopCompass();
           }
         })
       }, 1000)
     }
   })
 }

 module.exports = {
   addWatermark
 }