收藏
回答

canvasPutImageData 无法绘制data

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug canvasPutImageData 客户端 6.7.3 2.4.0

使用的是官方提供的代码片段:

function convertToGrayscale(data) {

  let g = 0

  for (let i = 0; i < data.length; i += 4) {

    g = (data[i] * 0.3 + data[i+1] * 0.59 + data[i+2] * 0.11)

    data[i] = g

    data[i+1] = g

    data[i+2] = g

  }

  return data

}


Page({

  onReady() {

  },


  openAndDraw() {

    wx.chooseImage({

      success: (res) => {

        const ctx = wx.createCanvasContext('canvasIn', this);

        ctx.drawImage(res.tempFilePaths[0], 0, 0)

        ctx.draw()

      }

    })

  },


  export() {

    wx.canvasToTempFilePath({

      canvasId: 'canvasOut',

      success: (res) => {

        wx.saveImageToPhotosAlbum({

          filePath: res.tempFilePath,

          success: (res) => {

            console.log(res)

          },

          fail: (err) => {

            console.error(err)

          }

        })

      },

      fail: (err) => {

        console.error(err)

      }

    }, this)

  },


  process() {

    const cfg = {

      x: 0,

      y: 0,

      width: 300,

      height: 300,

    }

    wx.canvasGetImageData({

      canvasId: 'canvasIn',

      ...cfg,

      success: (res) => {

        const data = convertToGrayscale(res.data)

        wx.canvasPutImageData({

          canvasId: 'canvasOut',

          data,

          ...cfg,

          success: (res) => {

            console.log(res)

          },

          fail: (err) => {

            console.error(err)

          }

        })

      },

      fail: (err) => {

        console.error(err)

      }

    })

  }

})


- 当前 Bug 的表现(可附上截图)

开发者工具使用基础库2.3.2版本(目前能选择的最新版,无2.4.0版本),处理正常






安卓手机处理正常






IOS 12.0手机无法显示,但回调函数输出errmsg正常,回调函数输出信息和开发者工具以及安卓手机的不一样



IOS11.3.1可以显示图片,但是绘制的仍是处理前的data,而不是处理后的data



最后一次编辑于  2018-11-06
回答关注问题邀请回答
收藏

1 个回答

  • 小程序技术专员-SgLy
    小程序技术专员-SgLy
    2018-11-08

    收到,已经复现,我们会继续跟进,谢谢反馈~

    2018-11-08
    赞同 2
    回复 18
    • Snow.s
      Snow.s
      2018-11-08

      请问这个问题什么时候可以解决

      2018-11-08
      回复
    • 小程序技术专员-SgLy
      小程序技术专员-SgLy
      2018-11-08回复Snow.s

      我们会尽快的

      2018-11-08
      回复
    • Snow.s
      Snow.s
      2018-11-08回复小程序技术专员-SgLy

      你好,发现我的不是这个问题,是用canvasToTempFilePath生成图片,用编辑器可以显示图片,用真机测试不显示图片,只显示文字?我很着急,能不能帮我解决下谢谢


      2018-11-08
      回复
    • 小程序技术专员-SgLy
      小程序技术专员-SgLy
      2018-11-08回复Snow.s

      给个可以复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)?真机是什么机型和型号,微信版本和基础库版本是?

      2018-11-08
      回复
    • Snow.s
      Snow.s
      2018-11-08回复小程序技术专员-SgLy

      iPhone6s 、X都试过

      var textX = that.data.textX,

      textY = that.data.textY + that.data.textSize/2,

      picPath = that.data.picPath;

      ctx.drawImage(picPath, that.data.upImgX - that.data.imgx, that.data.upImgY - that.data.imgy, that.data.upImgWidth, that.data.upImgHeight);//图片

      ctx.save();

      ctx.translate(textX, textY);//设置画布上的(0,0)位置,也就是旋转的中心点

      ctx.rotate(that.data.textRotate * Math.PI / 180);

      ctx.setFillStyle('#' + that.data.color[that.data.colorUsed]);

      ctx.setFontSize((that.data.textSize / 2) * that.data.screenRatio);

      ctx.fillText(that.data.textCon, 0, 0);

      ctx.restore();


      ctx.draw(false, function (e) {

      setTimeout(function(){

      wx.canvasToTempFilePath({ //生成图片

      canvasId: 'myCanvas',

      success: function (res) {

      that.setData({

      imagePath: res.tempFilePath

      })

      console.log(res.tempFilePath);

      wx.navigateTo({

      url: "/pages/games/singleShare/singleShare?imagePath=" + res.tempFilePath

      })

      },

      fail: function (res) {

      console.log(res)

      }

      },this)

      },500)

      });


      that.data.picPath是https://img10.jiuxian.com/eva/2018/1108/cb17487200694f60bab0fdbe2a4a9c11.jpg


      2018-11-08
      回复
    查看更多(13)