收藏
回答

wx.canvasGetImageData读取rgba在真机读取数据不正确?

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: 16,
      height: 16,
    }
    wx.canvasGetImageData({
      canvasId: 'canvasIn',
      ...cfg,
      success: (res) => {
        const data = convertToGrayscale(res.data)
        console.log("图片的宽高数据", res.width + "\n" + res.height);


        //console.log("图片里的数据", JSON.stringify(data));
        var result = [];
        for (var i = 0; i < res.data.length; i+=4) {
          if (res.data[i] === 0) {
            result.push(1);
          } else {
            result.push(0);
          }
        }
        console.log("图片里的数据", JSON.stringify(result));


        var dataByte = [];
        var arry1 = "";
        var arry2 = "";
        /*  var tmpInt;
         var offset; */
        var color;
        for (var loopx = 0; loopx < (res.width);) {
          for (var loopy = 0; loopy < res.height; loopy++) {
            var tmpInt = 0;
            var offset = 0x80;
            for (var loop3 = 0; loop3 < 8; loop3++) {
              color = result[loopy * res.width + loopx + loop3]; //取得某个点的像素值
              if (color === 1) {
                tmpInt = tmpInt | offset;
              }
              offset = offset >> 1;
            }
            dataByte.push(tmpInt);
          }
          loopx += 8;
        }


        arry1 = this.Bytes2HexString(dataByte);
        console.log("图片16进制数据", arry1)
        wx.canvasPutImageData({
          canvasId: 'canvasOut',
          data,
          ...cfg,
          success: (res) => {
            console.log("rgba数据", res)
          },
          fail: (err) => {
            console.error(err)
          }
        })
      },
      fail: (err) => {
        console.error(err)
      }
    })
  },
  Bytes2HexString: function(arrBytes) {
    var str = "";
    for (var i = 0; i < arrBytes.length; i++) {
      var tmp;
      var num = arrBytes[i];
      if (num < 0) {
        //此处填坑,当byte因为符合位导致数值为负时候,需要对数据进行处理
        tmp = (255 + num + 1).toString(16);
      } else {
        tmp = num.toString(16);
      }
      if (tmp.length == 1) {
        tmp = "0" + tmp;
      }
      str += tmp;
    }
    return str;
  },
})



回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容
问题标签