收藏
回答

wx.canvasToTempFilePath安卓机不行,ios没问题?已解决

因为微信原生压缩感觉左右不大,所以采用canvas画布压缩

页面

然后wx.chooseImage---> 显示调用选择照片的接口

wx.getImageInfo--->然后获取照片原来的宽高,进行一个压缩,这里可能跟平时的h5 canvas用法不太一样

wx.canvasToTempFilePath--->最后就是调用wx.canvasToTempFilePath,将画布的图片转成微信盒子返回的临时路径

最后就是上传图片

上传一个图片试试

上传成功5M变成156Kb,而且照片相对比例,质量都挺好

然后我就多试了几次,突然出现黑色莫名图片,我心里就是纳尼?

后面统一发现都是安卓的照片

网上咨询了,发现都是安卓导致的,说啥的都有,说什么不适配,安卓背景色是黑色,ios是透明,然后我去试了填充背景色什么的,

我突然想到一个问题,canvas绘制需要时间,而我看了一下我上传的安卓图片大小是14M,我就想是不是延时时间给的不够

我就把时间给成2秒


然后就渲染出来了

压缩比例也合适

这个setTimeout建议改成回调

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

3 个回答

  • 卢霄霄
    卢霄霄
    2020-07-08

    1、setData有成功回调

    2、导出canvasToTempFilePath可以选 jpg,会更小一点

    3、安卓机器上,canvas过大可能导致程序崩溃,建议限制画布最大尺寸

    2020-07-08
    有用
    回复 1
    • 杨不颓
      杨不颓
      2020-07-08
      2020-07-08
      回复
  • 大山
    大山
    2020-07-08

    LZNP

    2020-07-08
    有用
    回复 1
    • 杨不颓
      杨不颓
      2020-07-08
      哈哈哈
      2020-07-08
      回复
  • 杨不颓
    杨不颓
    2020-07-08

    Page({

    /**

    * 页面的初始数据

    */

    data: {

    cWidth: "",

    cHeight: "",

    src: ""

    },

    choose() {

    let that = this;

    wx.chooseImage({

    count: 1, // 默认9

    sizeType: ['compressed'], // 指定只能为压缩图,首先进行一次默认压缩

    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有

    async success(photo) {

    let a = await that.compressImg(photo.tempFilePaths[0])

    console.log(a)

    that.setData({

    src: a

    })

    wx.uploadFile({

    url: 'http://localhost:8000/directory/upload/photo', //仅为示例,非真实的接口地址

    filePath: a,

    name: 'file',

    success(res) {

    const data = res.data

    console.log(data)

    }

    })

    },

    })

    },


    // 压缩功能 参数说明:图片的路径、

    async compressImg(photoSrc, ratio = 2, limitNum = 400) {

    let that = this;

    return new Promise((resolve, reject) => {

    wx.getImageInfo({

    src: photoSrc,

    success(res) {

    var canvasWidth = res.width //图片原始长宽

    var canvasHeight = res.height

    console.log('图片的基本信息', res)

    while (canvasWidth > limitNum || canvasHeight > limitNum) {// 保证宽高在400以内

    canvasWidth = Math.trunc(res.width / ratio)

    canvasHeight = Math.trunc(res.height / ratio)

    ratio++;

    }

    that.setData({

    cWidth: canvasWidth,

    cHeight: canvasHeight

    })

    //----------绘制图形并取出图片路径--------------

    var ctx = wx.createCanvasContext('canvas')

    ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight)

    ctx.draw(false, setTimeout(() => {

    wx.canvasToTempFilePath({

    canvasId: 'canvas',

    destWidth: canvasWidth,

    destHeight: canvasHeight,

    success: function (res) {

    // console.log(res.tempFilePath)//最终图片路径

    resolve(res.tempFilePath)


    },

    fail: function (res) {

    console.log(res.errMsg)

    }

    })

    }, 2000))

    },

    fail: function (res) {

    console.log(res.errMsg)

    },

    })

    })

    }

    })


    2020-07-08
    有用
    回复
登录 后发表内容
问题标签