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

小鱼儿 2023-02-12 09:27 10阅读 0赞

camera.wxml

<camera device-position="front" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
    <button type="primary" bindtap="takePhoto">拍照</button>
    <view>预览</view>
    <image mode="widthFix" src="{
       {src}}"></image>
    <canvas class='canvas' style="width:{
       {canvasWidth}}px;height:{
       {canvasHeight}}px;" canvas-id="firstCanvas"></canvas>

camera.js

takePhoto() {
     const ctx = wx.createCameraContext()
     ctx.takePhoto({
       quality: 'high',
       success: (res) => {
         this.setData({
            src: res.tempImagePath
         });
         let that = this;
         wx.getImageInfo({
           src: res.tempImagePath,
           success:(ress)=>{
             let date = "水印内容";    //作为水印
             let ctx = wx.createCanvasContext('firstCanvas')    //创建画布
             let textToWidth = ress.width / 3 * 0.5  //这里设置的是水印位置
             let textToHeight = ress.height / 3 * 0.9
             that.setData({
               canvasHeight: ress.height/3,  //画布大小，除以三是变小处理快，自行修改
               canvasWidth: ress.width/3
             })
             //将图片src放到cancas内，宽高为图片大小
             ctx.drawImage(res.tempImagePath, 0, 0, ress.width/3, ress.height/3)
             //将声明的时间放入canvas
             ctx.setFontSize(14) //注意：设置文字大小必须放在填充文字之前，否则不生效
             ctx.setFillStyle('blue')
             ctx.fillText(date, textToWidth, textToHeight)    //水印内容，位置
             // ctx.strokeText(date, ress.width, ress.height)
             wx.showLoading({
               title: '制作水印中...',
             })
             ctx.draw(false, () => {//开始制作
               setTimeout(() => {//使用定时是因为制作水印需要时间，设置定时才不会出bug
                 wx.canvasToTempFilePath({//将画布中内容转成图片，即水印与图片合成
                   canvasId: 'firstCanvas',
                   success: (res) => {
                     wx.hideLoading()
                     wx.saveImageToPhotosAlbum({//保存到手机
                        filePath: res.tempFilePath,
                        success(res) {
                          console.log('1')
                        }
                     })
                   }
                 })
               }, 500)
             })
           }
         })
       }
     })
    }