小程序 使用upng.js 把小程序选择的图片转换为base64

有时候会遇到后端需要前端获取的文件转换成base64，在传给后台

小程序有专门的选择接口，

wxchooseImage(OBJECT)

但是这个只是返回一个的临时路径，并不是文件数据本身。

小程序暂时没有接口直接转base64的

所以我们需要使用canvas和canvasGetImageData（小程序版本190以后要才有）先获取内容，

再通过插件upngjs插件实现转base64（所需插件文件附件中）

1 把upngjs和pakominjs文件放到项目中

2 在pages下的页面js文件中导入

var upng = require('//utils/upngjs');

这里只需要导入npngjs ，pakominjs是在npng,js里面调用

3 建一个canvas

chooseImage">人脸测试  

// 画布

// 生成base64位展示 变量imgbase64

need-to-insert-img

4 添加js点击chooseImage事件

chooseImage: function() {

        var that = this;

        var coss_signature = wxgetStorageSync('cos_signature');

        var canvasID = "imgCanvas";

        var canvas = wxcreateCanvasContext(canvasID)

        wxchooseImage({

            sourceType: ['album', 'camera'],

            sizeType: ['original'],

            count: 1,

            success: function (res) {

                var tempFilePaths = restempFilePaths;

                // 获取文件路径

                var filePath = tempFilePaths[0];

                // 1 绘制至canvas

                canvasdrawImage(filePath, 0, 0, 300, 200)

                // 绘制完成后执行回调，API 170

                canvasdraw(false, function(res){

                    // 2 获取图像数据， API 190

                    wxcanvasGetImageData({

                        canvasId: canvasID,

                        x: 0,

                        y: 0,

                        width: 300,

                        height: 200,

                        success(res) {

                          // 3 png编码

                          let pngData = upngencode([resdatabuffer], reswidth, resheight)

                          // 4 base64编码

                          let base64 = wxarrayBufferToBase64(pngData)

                          //

                          thatsetData({

                            imgbase64: base64

                          })

                        }

                    })

                })

            }

        })

    }

5 实现

need-to-insert-img

need-to-insert-img

tips

画布画的的长和宽是固定的，这个按照自己需求设置。

可以通过小程序的

wxgetImageInfo(OBJECT)

获取长和宽

相关链接

upngjs:  >

微信小程序本作用域下调用全局JS详解

本地wxml文件

1

2

3

<view>

app版本:{{version}}

</view>

本地js文件

1

2

3

4

5

6

7

8

9

10

11

12

var app;

Page({

data:{

},

onLoad:function() {

app = getApp();

thissetData({version:appglobalDataappName});

}

})

全局js文件

1

2

3

4

5

6

7

8

9

//appjs

App({

globalData:{

appName:"hcoder"

},

test:function () {

consolelog("ok");

}

})

微信小程序之js

如果你想开发一款微信小程序学会微信小程序的js是必须要精通的，只要你html+css+js的基础打的好在来全力的学习微信小程序js，之后在前端开发上就没有什么问题了，但是微信js是需要花精力去学习的，可以买一本参考书或者了解下微信小程序的api都是可以快速的帮助你介入开发的队列。

微信小程序 获取javascript 里的数据

wxml如何获取js里的数据

例：

wxml里：

<text id="twl">{{txt}}</text>

通过上面的{{txt}}可以对应获取js里data下定义的txt的值

js里：

data: { txt:{} }

首先在data里定义一个“容器”txt：{}，{}内为空代表是从别的地方传值进去，当然{}里也可以直接写数据，如txt：{‘123'}，上面的wxml获取了就相当于 <text id="twl">123</text>；通过其他方法传值到容器里用一个thissetData({})的方法，如：

onLoad: function (options) { var ta=optionskind; thissetData({ txt:ta, }) },

这样上面data里定义的txt的值就是ta的值了。

Tips:小程序一定要用>

js负责页面与用户的交互，动态修改页面的内容。使用js脚本来处理用户的 *** 作。

*** 作解释: 点击button按钮(点我),修改界面的msg显示为"BeiJing佩奇"

绑定事件: bindtap定义了"点击事件"

j s 函数: Page({定义函数对应bindtap})

例如开头示例一样，组件绑定事件，js编写事件函数。

这里大概介绍下log打印的内容

☞ 小生不才，附上 博客地址 ☜

事件分为冒泡事件和非冒泡事件

1冒泡事件:当一个组件被触发后，该事件以此向父节点传递。

2非冒泡事件:当一个组件触发后，该事件不会向父节点传递。

解释：当点击子节点时，会依次触发"bind事件2，bind事件1"

解释：当点击子节点时，只触发"bind事件2"，而没有触发"bind事件1"

自基础班150起，触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前。事件到达节点的顺序与冒泡相反。捕获事件采用的关键字为capture-bind、capture-catch，当然catch还是中断，取消冒泡阶段。

1 示例1，执行顺序为hand2,hand4,hand3,hand1

2 示例2，加入capture-catch捕获事件，只执行hand2

后来在父目录public创建一个eruda目录在把Bjs引入，PC控制台上没有报错信息，如

后来项目上线，h5项目是嵌到客户的app里面，客户的app做了404文件的处理，导致在app打开我们的项目，出现报错，但是报错页面也是偶然出现，有点难复现。

由于h5项目也要有微信小程序版本，任务紧，部分的功能使用web-view嵌入h5页面。用小程序打开h5项目时，vconsole-webpack-plugin插件的控制台总是打印没有找到Bjs文件。 用app去打开h5页面则控制台没有报错。重新将Bjs文件放到static目录下，PC调试，控制台还是报Unexpected token '<'的错误。搜了一下说static里面文件引用要用绝对路径。如

发布到测试，再用小程序打开H5页面，发现还是报错，如

将引入方式改成最开始的引入方式，发布后再用小程序打开h5页面，发现报错如下

根据报错信息，发现路径少了static目录，应该是>

以上就是关于小程序 使用upng.js 把小程序选择的图片转换为base64全部的内容，包括:小程序 使用upng.js 把小程序选择的图片转换为base64、微信小程序通过什么组件导出,通过什么组件导入、小程序本作用域下怎么调用全局js等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！