如何从手机中选择文件并绘制在convas上？
发布于 5 年前 作者 minyu 9322 次浏览 来自 官方Issues

由于<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')
              },
            });
          }
        }); 
      }
    })
1 回复

https://developers.weixin.qq.com/community/develop/article/doc/000ac686c5c5506f18b87ee825b013

回到顶部