收藏
回答

鸿蒙next系统5.1.0,微信1.0.9。canvas.createImage创建的图片为黑屏?

 

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 个回答

  • 社区技术运营专员--阳光
    社区技术运营专员--阳光
    08-12

    已知问题,预计本周修复

    08-12
    有用
    回复 11
    • Paul
      Paul
      08-17
      修复了吗? 最近越来越多鸿蒙的用户反馈.
      08-17
      回复
    • L
      L
      08-18
      请问有修复了吗
      08-18
      回复
    • 章鱼
      章鱼
      08-19
      请问什么时候修复?
      08-19
      回复
    • 章鱼
      章鱼
      08-19
      什么时候修复
      08-19
      回复
    • 阿克曼
      阿克曼
      08-20
      什么时候修复
      08-20
      回复
    查看更多(6)
  • 智能回答 智能回答 本次回答由AI生成
    08-11
    有用
    回复 3
    • 半兮
      半兮
      08-11
      https://developers.weixin.qq.com/s/KF4qYkmQ892y
      08-11
      回复
    • 智能回答 智能回答 本次回答由AI生成
      08-11回复半兮
    • 半兮
      半兮
      08-11
      用户反馈的问题  机型HUAWEI Pura X
      08-11
      回复
登录 后发表内容