zoukankan      html  css  js  c++  java
  • 小程序获取图片base64编码

    项目中遇到了这个问题,在搜索过程中看到别人的博文,大多是下面这种方法,大致如下:

    let imgObj = {
      count: 1,
      success: (res) => {
        let tempFilePaths = res.tempFilePaths;
        wx.request({
          url: tempFilePaths[0],
          responseType: 'arraybuffer',
          success: function (res) {
            let base64 = wx.arrayBufferToBase64(res.data);
          }
        });
      },
      fail: (res) => {
        wx.showToast({
          title: res,
          icon:'none'
        });
      }
    }
    wx.chooseImage(imgObj);

    开发者工具中是可以获取到的,但是拿手机预览或者真机调试的时候,获取base64这个方法的url是不能用临时路径的,所以这个方法也就走不通了,那么就只能借助canvas了。

    首先在wxml文件中写一个canvas

    <canvas canvas-id='canvas' class='canvas'></canvas>

    js文件中需要引入插件upng.js

    const upng = require('../../common/libs/upng-js/UPNG.js')

    获取base64代码如下:

    let _this = this;
    let imgObj = {
      count: 1,
      success: (res) => {
        let tempPath = res.tempFilePaths[0];
        wx.showLoading({
          title: '图片加载中',
          mask: true,
        });
        //获取图片的宽高
        wx.getImageInfo({
          src: tempPath,
          success: res => {
            let ratio = 2;
            let canvasWidth = res.width
            let canvasHeight = res.height;
            // 保证宽高均在300以内
            while (canvasWidth > 300 || canvasHeight > 300) {
              //比例取整
              canvasWidth = Math.trunc(res.width / ratio)
              canvasHeight = Math.trunc(res.height / ratio)
              ratio++;
            }
            _this.setData({
              imgWidth: canvasWidth,
              imgHeight: canvasHeight
            })
            let canvas = wx.createCanvasContext('canvas');
            // 绘制图片至canvas
            canvas.drawImage(tempPath, 0, 0, _this.data.imgWidth, _this.data.imgHeight);
            // 绘制完成后
            canvas.draw(false, () => {
              //获取图像数据
              wx.canvasGetImageData({
                canvasId: 'canvas',
                x: 0,
                y: 0,
                 _this.data.imgWidth,
                height: _this.data.imgHeight,
                success(res) {
                  // 获取png编码
                  let pngData = upng.encode([res.data.buffer], res.width, res.height);
                  // 获取base64
                  let base64 = wx.arrayBufferToBase64(pngData);
                },
                fail(res) {
    
                },
                complete(){
                  wx.hideLoading();
                }
              })
            })
          },
          fail: res => {
            wx.hideLoading()
          }
        })
      },
      fail: (res) => {
        
      }
    };
    wx.chooseImage(imgObj);

    代码中限制了图片大小在300以内,所以只需要设置canvas的宽高大于300px即可,这样可以有效地限制绘制图片的大小以及获取到base64的大小,从而也缩短了转化base64的时间。

    注:尽量还是用wx.uploadFile做图片上传,公司项目中虽然用该方法获取到了图片的base64编码,但是最终还是用uploadFile做的图片上传。

    如有表述不准确之处,欢迎指正,欢迎补充,感谢阅读。

  • 相关阅读:
    二进制位运算
    Leetcode 373. Find K Pairs with Smallest Sums
    priority_queue的用法
    Leetcode 110. Balanced Binary Tree
    Leetcode 104. Maximum Depth of Binary Tree
    Leetcode 111. Minimum Depth of Binary Tree
    Leetcode 64. Minimum Path Sum
    Leetcode 63. Unique Paths II
    经典的递归练习
    案例:java中的基本排序
  • 原文地址:https://www.cnblogs.com/wangzhenyu666/p/9627012.html
Copyright © 2011-2022 走看看