小程序图片转base64

huayeluoliuhen 发布于2019-08-22 18:50 / 2755人阅读

摘要：引入前段时间有个需求涉及小程序还原当中的图片上传功能。利用小程序方法和既然是使用方法，那么首先需要在里添加一个元素如果不加，页面方法无法生成，也不行部分省略获取过程操作对应的绘画图片，把图片放进去。

引入

前段时间有个需求涉及小程序还原H5当中的图片上传功能。
没有细节考虑好就跟后端的老哥说接口不用改直接前端处理。。。
现在想想真是心疼我自己

现阶段的一些思路。 服务器处理

直接上传流文件到服务器，然后在服务器做base64转换处理。

利用小程序canvasGetImageData方法和upng

既然是使用canvas方法，那么首先需要在wxml里添加一个canvas元素

如果不加，页面canvasGetImageData方法无法生成，display:none也不行

js部分省略获取imgPath过程

var canvasid="mycanvas"
var ctx = wx.createCanvasContext(canvasid) //操作对应id的canvas

ctx.drawImage(imgPath,0,0,width,height)//绘画图片，把图片放进去。这里的宽高可以使用wx.getImageInfo获取用户上传图片本来的宽高

ctx.draw(function(){
    wx.canvasGetImageData({
        canvasId:canvasid //参数，canvas标签的id
        x:0,//起始位置，x坐标
        y:0,
        width:width,
        height:height,
        success:function(res){
            //引入upng，将图片转化成utf-8格式
            let pngData = upng.encoded([res.data.buffer].res.width,res.height）//再转化成base64
            let bs64 = wx.arrayBufferToBase64(pngData)
        }
    })
});

必须引入upng组件

基础库必须大于1.9.0

通过小程序request资源请求(暂不可用)

js部分省略获取imgPath过程

wx.request({
  url:imgPath,
  responseType: "arraybuffer",//最关键的参数，设置返回的数据格式为arraybuffer
  success:res=>{
        let base64 = wx.arrayBufferToBase64(res);//把arraybuffer转成base64
        base64　= "data:image/jpeg;base64," + base64　//不加上这串字符，在页面无法显示的哦
        console.log(base64)　//打印出base64字符串，可复制到网页校验一下是否是你选择的原图片呢
      }
});

基础库必须大于1.9.0

总结

使用upng方法确实能解决问题，但是引入upng组件相对有些庞大(只相对于处理base64这个功能)，现阶段更加合适的处理方式还是上传到后端来处理图片格式。

超融合服务器云服务器 base64转图像c语言 base64图片生成 base64 base64数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96267.html

微信小程序集成 Jenkins

摘要：总结本文以微信小程序常规的发布流程为切入点，循序渐进地介绍了如何集成实现微信小程序预览上传功能。 showImg(https://raw.githubusercontent.com/yingye/Blog/master/images/wechat-jenkins.png); 本文首发于 https://github.com/yingye/Blo... ，欢迎各位关注我的Blog，正文以...

young.li 2019-08-23 11:41 评论0 收藏0
input上传图片并压缩（vue，前端，js）

摘要：大家好，我是云皓，话不多说，直入正题，获取上传文件自行获取，也可通过的组件来获取，转化为文件，压缩，转换为文件，上传。大家好，我是云皓，话不多说，直入正题 1，获取input上传file文件（自行获取，也可通过vant的upload组件来获取）2，转化为base64文件3，压缩4，转换为blob文件5，上传。下面直接上代码（本代码段是用用在vue&vantui 里面，原理都在，可根...

andot 2019-08-26 10:59 评论0 收藏0
图片上传预览转压缩并转base64详解（dShowImg64.js）

摘要：本次的内容是图片的上传预览。待上传图像点击蓝色框内，可以选择文件，移动端选择拍照或选择图片进行上传。部分请点击这层就是加号图像是转码后显示图像的地方。最后的预览图像地址以后会加入更多的小插件。 hello，大家好，游戏开始了，欢迎大家收看这一期的讲解。本次的内容是图片的上传预览。最后发源码链接。废话不多说，先上图。showImg(https://segmentfault.com/img...

NeverSayNever 2019-08-29 17:00 评论0 收藏0
图片上传预览转压缩并转base64详解（dShowImg64.js）

摘要：本次的内容是图片的上传预览。待上传图像点击蓝色框内，可以选择文件，移动端选择拍照或选择图片进行上传。部分请点击这层就是加号图像是转码后显示图像的地方。最后的预览图像地址以后会加入更多的小插件。 hello，大家好，游戏开始了，欢迎大家收看这一期的讲解。本次的内容是图片的上传预览。最后发源码链接。废话不多说，先上图。showImg(https://segmentfault.com/img...

wums 2019-08-02 11:46 评论0 收藏0
图片上传预览转压缩并转base64详解（dShowImg64.js）

摘要：本次的内容是图片的上传预览。待上传图像点击蓝色框内，可以选择文件，移动端选择拍照或选择图片进行上传。部分请点击这层就是加号图像是转码后显示图像的地方。最后的预览图像地址以后会加入更多的小插件。 hello，大家好，游戏开始了，欢迎大家收看这一期的讲解。本次的内容是图片的上传预览。最后发源码链接。废话不多说，先上图。showImg(https://segmentfault.com/img...

zorro 2019-08-23 12:26 评论0 收藏0