收藏
回答

小程序调用拍照组件,偶尔出现黑图?

 bindTakePhoto() {
    const cameraContext = wx.createCameraContext();
    const photoProp = {
      quality: 'high'
    };
    cameraContext.takePhoto(photoProp)
      .then((res) => {
        this.drawPhoto(res.tempImagePath);
      })
      .catch((error) => {
        logger.error(error)
        // console.log(error)
      })
  },
  /**
   * 画照片
   */
  async drawPhoto(filePath) {
    const ctx = this.canvas.getContext('2d')
    const dpr = app.globalData.screenHeight / app.globalData.rpxScreenHeight;
    const canvasWidth = this.data.canvasWidth * dpr;
    const canvasHeight = this.data.canvasHeight * dpr;


    //画照片
    await new Promise((resolve) => {
      const photoImage = this.canvas.createImage()
      photoImage.onload = () => {
        const photoWidth = canvasWidth;
        const photoHeight = canvasHeight;
        const x = 0;
        const y = 0;
        const direction = this.data.direction;
        if (direction == 'left') {
          ctx.translate(0, photoHeight);
          ctx.rotate(-Math.PI / 2);
          ctx.drawImage(photoImage, x, y, photoHeight, photoWidth);
          ctx.rotate(Math.PI / 2);
          ctx.translate(0, -photoHeight);
        } else if (direction == 'right') {
          ctx.translate(photoWidth, 0);
          ctx.rotate(Math.PI / 2);
          ctx.drawImage(photoImage, x, y, photoHeight, photoWidth);
          ctx.rotate(-Math.PI / 2);
          ctx.translate(-photoWidth, 0);
        } else {
          ctx.drawImage(photoImage, x, y, photoWidth, photoHeight);
        }
        // console.log('已画照片');
        resolve('已画照片')
      }
      photoImage.onerror = () => {
        // console.log('照片加载失败');
        resolve();
      }
      photoImage.src = filePath;
    })


    //画现场水印
    if (this.data.liveWatermark && this.data.liveWatermarkValue && this.data.liveWatermarkValue != '') {
      await new Promise((resolve) => {
        const liveWatermarkImage = this.canvas.createImage()
        liveWatermarkImage.onload = () => {
          const liveWatermarkWidth = dpr * 360;
          const liveWatermarkHeight = dpr * 90;
          const x = canvasWidth / 2 - liveWatermarkWidth / 2;
          const y = canvasHeight / 2 - liveWatermarkHeight / 2;
          ctx.drawImage(liveWatermarkImage, x, y, liveWatermarkWidth, liveWatermarkHeight);
          // console.log('已画现场水印', this.data.liveWatermarkValue);
          resolve('已画现场水印');
        }
        liveWatermarkImage.onerror = () => {
          // console.log('现场水印加载失败', this.data.liveWatermarkValue);
          resolve();
        }
        liveWatermarkImage.src = this.data.liveWatermarkValue;
      })
    }


    //画手写签名水印
    if (this.data.handWriting && this.data.handWriting != '') {
      await new Promise((resolve) => {
        const handWritingImage = this.canvas.createImage()
        handWritingImage.onload = () => {
          const handWritingWidth = dpr * 150;
          const handWritingHeight = dpr * 150;
          const x = canvasWidth - handWritingWidth - 10;
          const y = canvasHeight - 10;
          ctx.translate(x, y);
          ctx.rotate(-Math.PI / 2);
          ctx.drawImage(handWritingImage, 0, 0, handWritingWidth, handWritingHeight);
          ctx.rotate(Math.PI / 2);
          ctx.translate(-x, -y);
          // console.log('已画手写签名水印');
          resolve('已画手写签名水印');
        }
        handWritingImage.onerror = () => {
          // console.log('手写签名水印加载失败');
          resolve();
        }
        handWritingImage.src = this.data.handWriting;
      })
    }


    //画水印LOGO
    if (this.data.logoEnable && this.data.logo && this.data.logo != '') {
      // console.log('画水印LOGO');
      await new Promise((resolve) => {
        const logoImage = this.canvas.createImage()
        logoImage.onload = () => {
          const logoWidth = dpr * 150;
          const logoHeight = dpr * 150;
          const x = canvasWidth - logoWidth - 10;
          const y = 10;
          //水印LOGO透明度 
          const alpha = 1 - app.globalData.logoTransparency * 5 / 100;
          ctx.globalAlpha = alpha;
          ctx.drawImage(logoImage, x, y, logoWidth, logoHeight);
          ctx.globalAlpha = 1;
          // console.log('已画水印LOGO');
          resolve('已画水印LOGO');
        }
        logoImage.onerror = () => {
          // console.log('水印LOGO加载失败');
          resolve();
        }
        logoImage.src = this.data.logo;
      })
    }


    // console.log('画水印信息');


    //设置画笔
    ctx.font = '14px';
    ctx.fillStyle = this.data.watermarkFontColor; //颜色


    const watermarkX = 10;
    const watermarkY = canvasHeight - 14;
    const lineHeight = 18;
    let i = 0;
    //备注
    const remarkArr = this.data.remarkArr;
    if (remarkArr && remarkArr.length > 0) {
      for (let index = remarkArr.length - 1; index >= 1; index--) {
        const element = remarkArr[index];
        ctx.fillText(element, watermarkX + 42, watermarkY - (i++) * lineHeight);
      }
      const firstRemark = remarkArr[0];
      ctx.fillText('备注:' + firstRemark, watermarkX, watermarkY - (i++) * lineHeight);
    }
    //天气
    if (this.data.weather && this.data.weatherValue) {
      ctx.fillText('天气:' + this.data.weatherValue, watermarkX, watermarkY - (i++) * lineHeight);
    }
    //海拔
    if (this.data.altitude && this.data.altitudeValue) {
      ctx.fillText('海拔:' + this.data.altitudeValue, watermarkX, watermarkY - (i++) * lineHeight);
    }
    //时间
    if (this.data.currentTime) {
      ctx.fillText('时间:' + this.data.currentTime, watermarkX, watermarkY - (i++) * lineHeight);
    }
    //地址
    if (this.data.address && this.data.addressValue) {
      ctx.fillText('地址:' + this.data.addressValue, watermarkX, watermarkY - (i++) * lineHeight);
    }
    //纬度    
    //经度
    if (this.data.lonLat && this.data.latitudeValue && this.data.longitudeValue) {
      ctx.fillText('纬度:' + this.data.latitudeValue, watermarkX, watermarkY - (i++) * lineHeight);
      ctx.fillText('经度:' + this.data.longitudeValue, watermarkX, watermarkY - (i++) * lineHeight);
    }


    this.savaToTempFile();
  },
  /**
   * canvas到临时文件
   */
  savaToTempFile() {
    let that = this
    wx.canvasToTempFilePath({
      canvas: this.canvas,
      fileType: 'jpg'
    }).then(res => {
      // console.log(res);
      const filePath = res.tempFilePath //照片路径
      this.setData({
        tempImagePath: res.tempFilePath
      })
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: function () {
        },
      })
      wx.compressImage({
        src: filePath, //图片路径
        quality: 60, // 压缩质量
        success: image => {
          this.setLastPageFlag(true);
          this.wmCamera.goFormPage(image.tempFilePath)
        },
        fail: (err) => {
          this.setLastPageFlag(true);
          this.wmCamera.goFormPage(image.tempFilePath)
        }
      })
      // this.saveToPhotosAlbum(res.tempFilePath);
    }).catch(error => {
      logger.error(error)
      // console.log(error);
    })
  },
回答关注问题邀请回答
收藏

2 个回答

  • 小破孩
    小破孩
    09-04

    是不是图片还没加载完成

    09-04
    有用
    回复
  • 一笑皆春
    一笑皆春
    09-04

    黑屏是没有授权权限,或者没有更新用户隐私协议吧

    09-04
    有用
    回复 3
    • 半兮
      半兮
      09-04
      不是 权限以及用户隐私协议都是好的 他也不是黑屏 只是拍出来的照片预览的时候 是黑图   低版本手机且点击快的话  就会复现
      09-04
      回复
    • 一笑皆春
      一笑皆春
      09-04回复半兮
      不一定是拍摄出来的照片有问题,也可能是低版本对于画布没处理好
      09-04
      回复
    • 半兮
      半兮
      09-04
      这种有没有什么办法处理 或者做兼容
      09-04
      回复
登录 后发表内容