收藏
回答

如何从手机中选择文件并绘制在convas上?

由于<image>不能对图像进行逐像素的处理,所以需要用到convas,但是convas绘图一直不成功,请问有什么解决的办法?

selectImage: function(index) {
    var that = this;
    var c = wx.createCanvasContext('firstCanvas');
    var img_path = new String();
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function(res0) {
        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
        img_path = res0.tempFilePaths[0];
        console.log('get path');
        that.setData({
          img_path: res0.tempFilePaths
        });
         
        wx.getImageInfo({
          src: img_path,
          success: function(res1) {
            screen.w = res1.width;
            screen.h = res1.height;
            c.drawImage(res1.path, 0, 0, screen.w, screen.h);
            wx.canvasGetImageData({
              canvasId: "firstCanvas", //参数,canvas标签的id
              x: 0, //起始位置,x坐标
              y: 0,
              width: 100,
              height: 100,
              success: function(res2)
 
              {
                //引入upng,将图片转化成utf-8格式
                let pngData = upng.encoded([res.data.buffer].res.width, res.height)
                //再转化成base64
                let bs64 = wx.arrayBufferToBase64(pngData)
                console.log('1')
              },
              fail: function(error) {
                console.log(error) // 报错:errMsg"canvasGetImageData: fail canvas is empty"
              },
              complete: function(res) {
                console.log('over')
              },
            });
          }
        }); 
      }
    })


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

1 个回答

问题标签