20年中在对接商家券的时候，翻了官方PHP SDK的牌子，0.1系缺个媒体文件上传比较优雅的解决方案，于是顺手就为其提了PR。之后，我就在思考，动态编程语言讲究的快，是不是应该可以在做点儿好玩的，有意义的，可以加速开发对接的，不被人抱怨的开发包呢。索性，仗着多年的从业经验，尝试从底层开始写，不断迭代，于是就有了这么一款小巧，低依赖，符合规范，面向对象模式，命令行模式，适用涵盖Windows、macOS、Linux的微信支付nodejs版基础开发包。 下面我以版本迭代时间线为过程，来讲讲这款SDK开发包的开发故事。 v0.0.1 初始版本 这个版本，发布于2020年6月26号，核心是3个类，4个文件共计11个方法，已经是完整实现了APIv3的技术规范：[代码]AES-GCM[代码]对称加解密，[代码]RSA-OAEP[代码]非对称加解密及验签规范。[代码]RSA-OAEP[代码]的原生公钥加密、私钥解密方法封装，是翻过无数遍nodejs的文档，最后精炼到各5行代码共计10行，这应该是nodejs中，[代码]RSA-OAEP[代码]加解密原生实现的最早封装。 v0.1.0 正式版本 这个系列，发布于2020年7月2号。在申城最热的一段时间，晚上睡不着就捋代码呗，哔哩啪啦猛敲代码（其实也没多少行代码，全被精简了），迭代了共计十个版本，于是就有了这么一个正式版。 v0.2 面向对象模式开发 这个系列，发布于2020年7月7号，止于2020年9月9号，四个版本。重要功能就是可以顺溜地使用动态对象来对接APIv3接口了，同时降低NodeJS版本兼容至10.15（这个是云开发的环境版本）。详细可阅读微信支付APIv3的Nodejs版SDK，让开发变得简单不再繁琐。 v0.3 支持APIv2调用 这个系列，发布于2020年9月11号，止于2021年1月22号。是个被“逼”出来的系列。这个系列加入了APIv2版的接口驱动，重要功能就是对「付款码支付」及「退款」能力的支持。详细可阅读适合云开发的微信支付v2及v3版Nodejs SDK，这就不展开了。在这一段时间里，有太多事情要跟进，所以一直没有太多时间写代码。展期了好久好久才进入了重要的下一重构时刻。 v0.4 同质化v2&v3 OOP开发 这个系列，发布于2021年2月28号，止于2021年3月25日，五个版本。这个系列的由来是因一位同学提的issue展开的，于是做了超量重构，不仅改写了入口程序，还加强了APIv2版的同质化调用，详细可阅读微信支付开发，可以简化到复制+粘贴这种地步 及纯属意外，还可以这么起底微信支付接口对接。 [图片] 有那么一瞬间，我以为这个版本就会是终点了，可以进入LTS版仅需长期维护了。殊不知，CLI工具集还有一漏勺没有完善好，那好吧，那就再来一波加强重组呗。 v0.5 命令行工具集 这个系列，发布于2021年3月27号，加强了命令行工具集，请求微信支付官方接口，现在可以在命令行上跑起来了。英文slogan就是: Play the OpenAPI requests over command line。 这得解释解释，为啥用“Play”呢，而不是其他词儿呢？其实这个功能早在20年10月，chain支付宝OpenAPI接口时，脑阔开了个洞，想出来的。微信支付的CLI工具已经迟到好久了，现在好了，两款驰名的支付平台，都可以如丝质般顺溜，搞起CI了。这就是play的由来——为开发而生: commit to play for running。 说说功能点，这个系列就加强了命令行方式与接口交互能力，同时降级了自0.0.4版就一直存在的 「平台证书」下载器 为工具集内一条特殊命令。详细玩法可阅读 开发系列之「起步」 及 真香：一行命令即可体验「微信支付」全系接口能力。 另外，这个加强重构版的CLI交互工具，从设计一开始就支持扩展能力，有兴趣的同学完全可以基于[代码]bin/cli/request.js[代码]构建出更多子命令，不干扰纯应用，跑着欢实就好。 NEXT 如果还有NEXT，那可能就是得把tsd文件翻新一下，[代码]ProxyConstructor[代码]那块是[代码]TypeScript[代码] 自4.0引入，动态属性类型签名的高级甚高级用法，还不太会，学习中，如果有娴熟的同学，可以提PR贡献一下。 哦，对了，文章如果看着还不错，SDK用着还顺手，那就star一下repo吧 https://github.com/TheNorthMemory/wechatpay-axios-plugin MIT开源，纯免费，随便用。做开源不易，况且还是为国民应用做底层基础开发包就更是难啊，平时又太忙，只能是按需来做，有空再续。

之前的插件类目没有了导致搜不到了，重新发个文章。 image-cropper 一款高性能的小程序图片裁剪插件，支持旋转。 [图片] 优势 [代码]1.功能强大。[代码] [代码]2.性能超高超流畅，大图毫无卡顿感。[代码] [代码]3.组件化，使用简单。[代码] [代码]4.点击中间窗口实时查看裁剪结果。[代码] ㅤ 初始准备 1.json文件中添加image-cropper [代码] "usingComponents": { "image-cropper": "../image-cropper/image-cropper" }, "navigationBarTitleText": "裁剪图片", "disableScroll": true [代码] 2.wxml文件 [代码]<image-cropper id="image-cropper" limit_move="{{true}}" disable_rotate="{{true}}" width="{{width}}" height="{{height}}" imgSrc="{{src}}" bindload="cropperload" bindimageload="loadimage" bindtapcut="clickcut"></image-cropper> [代码] 3.简单示例 [代码] Page({ data: { src:'', width:250,//宽度 height: 250,//高度 }, onLoad: function (options) { //获取到image-cropper实例 this.cropper = this.selectComponent("#image-cropper"); //开始裁剪 this.setData({ src:"https://raw.githubusercontent.com/1977474741/image-cropper/dev/image/code.jpg", }); wx.showLoading({ title: '加载中' }) }, cropperload(e){ console.log("cropper初始化完成"); }, loadimage(e){ console.log("图片加载完成",e.detail); wx.hideLoading(); //重置图片角度、缩放、位置 this.cropper.imgReset(); }, clickcut(e) { console.log(e.detail); //点击裁剪框阅览图片 wx.previewImage({ current: e.detail.url, // 当前显示图片的http链接 urls: [e.detail.url] // 需要预览的图片http链接列表 }) }, }) [代码] 参数说明 属性 类型 缺省值 取值 描述 必填 imgSrc String 无 无限制 图片地址(如果是网络图片需配置安全域名) 否 disable_rotate Boolean false true/false 禁止用户旋转(为false时建议同时设置limit_move为false) 否 limit_move Boolean false true/false 限制图片移动范围(裁剪框始终在图片内)(为true时建议同时设置disable_rotate为true) 否 width Number 200 超过屏幕宽度自动转为屏幕宽度 裁剪框宽度 否 height Number 200 超过屏幕高度自动转为屏幕高度 裁剪框高度 否 max_width Number 300 裁剪框最大宽度 裁剪框最大宽度 否 max_height Number 300 裁剪框最大高度 裁剪框最大高度 否 min_width Number 100 裁剪框最小宽度 裁剪框最小宽度 否 min_height Number 100 裁剪框最小高度 裁剪框最小高度 否 disable_width Boolean false true/false 锁定裁剪框宽度 否 disable_height Boolean false true/false 锁定裁剪框高度 否 disable_ratio Boolean false true/false 锁定裁剪框比例 否 export_scale Number 3 无限制 输出图片的比例(相对于裁剪框尺寸) 否 quality Number 1 0-1 生成的图片质量 否 cut_top Number 居中 始终在屏幕内 裁剪框上边距 否 cut_left Number 居中 始终在屏幕内 裁剪框左边距 否 [代码]img_width[代码] Number 宽高都不设置，最小边填满裁剪框 支持%(不加单位为px)(只设置宽度，高度自适应) 图片宽度 否 [代码]img_height[代码] Number 宽高都不设置，最小边填满裁剪框 支持%(不加单位为px)(只设置高度，宽度自适应) 图片高度 否 scale Number 1 无限制 图片的缩放比 否 angle Number 0 (limit_move=true时angle=n*90) 图片的旋转角度 否 min_scale Number 0.5 无限制 图片的最小缩放比 否 max_scale Number 2 无限制 图片的最大缩放比 否 bindload Function null 函数名称 cropper初始化完成 否 bindimageload Function null 函数名称 图片加载完成,返回值Object{width,height,path,type等} 否 bindtapcut Function null 函数名称 点击中间裁剪框,返回值Object{src,width,height} 否 函数说明 函数名 参数 返回值 描述 参数必填 upload 无 无 调起wx上传图片接口并开始剪裁 否 pushImg src 无 放入图片开始裁剪 是 getImg Function(回调函数) [代码]Object{url,width,height}[代码] 裁剪并获取图片(图片尺寸 = 图片宽高 * export_scale) 是 setCutXY X、Y 无 设置裁剪框位置 是 setCutSize width、height 无 设置裁剪框大小 是 setCutCenter 无 无 设置裁剪框居中 否 setScale scale 无 设置图片缩放比例（不受min_scale、max_scale影响） 是 setAngle deg 无 设置图片旋转角度（带过渡效果） 是 setTransform {x,y,angle,scale,cutX,cutY} 无 图片在原有基础上的变化(scale受min_scale、max_scale影响) 根据需要传参 imgReset 无 无 重置图片的角度、缩放、位置(可以在onloadImage回调里使用) 否 GitHub https://github.com/wx-plugin/image-cropper/tree/master 如果有什么好的建议欢迎提issues或者提pr

[图片] 2019年google开发者大会于9月10日~11日在上海浦东举行，这次大会2天吸引了4000+人的参加，现场气氛“爆炸”，分享主题将涵盖 Android、Flutter、Web、Firebase、TensorFlow、Google Cloud、ARCore by Google、Material Design、无障碍、Google Play、Wear OS by Google 谷歌、Google 搜索、Google 助理、Payments、谷歌艺术与文化等等。 [图片] GDD大会的主页： http://events.google.cn/intl/zh-CN/developerdays2019/ [图片] 可以说这次大会除了Android10的新版本特性外，核心中核心就是关于TensorFlow 2.0的发布以及关于其的深度应用，现在越来越多的APP和场景都用到机器学习，AI赋能已经进入了生活的方方面面，通过机器学习和数据挖掘，AI甚至比你的父母更懂你，比如抖音、淘宝京东的推荐，而近期大火且极具争议性的产品 "ZAO" 也是依靠AI完成换脸。结合机器学习、AI、大数据喂食，这将会是未来！！！ [图片] 作为一名前端开发，智库君很幸运能参加到这次大会，本人也重点关注了GDD大会有关Web前端开发，多平台应用以及Google的“重型武器" TensorFlow 的JS版本。 之前7月5日，欧莱雅宣布与微信合作，上线小程序端（阿玛尼美妆）首个动态虚拟试妆应用，釆用欧莱雅集团增强现实和人工智能ModiFace公司技术，旨在为消费者提供更具个性化、社交化的消费新体验。 [图片] 早前，我们认为机器学习可能更偏向后端，而现在它已经渐渐走向前台，很多之前Web和小程序无法做到的事情，都已经发生了改变。 下面是本人在大会现场拍的一些PPT供大家学习参考： [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] 会后的思考： 作为一个前端工程师，智库君正努力向全栈开发转型，但这次大会给了我一个深深的触动，现在大量的年轻人涌入IT行业，未来的竞争将会越来越激烈，那么很快我们就会遇到一些的问题，你是否思考过以下问题呢？ 等你到了35岁是否会遇到中年危机呢？如何站在技术的尖端不被淘汰呢？如何与后来的年轻人比拼学习能力呢？ 5ABCD（5G、人工智能AI、区块链Blockchain、云计算Cloud、数据Data）是今年很火的一个概念，相信也会是未来五年技术主要的发展方向，随着VR、AR、裸眼3D和物联网技术的成熟，行业大洗牌也将不期而至。你是否想好了未来5年努力的方向呢？ 最后，送上TensorFlow学习资料地址： TF官网： https://tensorflow.google.cn/ TF的JS版本官网： https://tensorflow.google.cn/js TF中文社区： http://www.tensorfly.cn/ 往期回顾： [打怪升级]小程序评论回复和发贴组件实战（一） [填坑手册]小程序Canvas生成海报（一） [拆弹时刻]小程序Canvas生成海报（二） [填坑手册]小程序目录结构和component组件使用心得

关键词：小程序AR 图片 base64 相机 Camera onCameraFrame Canvas ArrayBuffer Uint8Array Uint8ClampedArray upng-js 核心步骤： 1 相机原始图像数据frame.data，即ArrayBuffer数组，转成Uint8Array数组 2 Uint8Array数组转成Uint8ClampedArray数组 3 wx.canvasPutImageData(Uint8ClampedArray) 详细流程如下： 最近因为项目需求，需要上传base64去做AR识别功能，和大家一起分享讨论下具体的实现方式。 首先说下实现原理，通过Camera的onCameraFrame获取实时帧数据，将实时帧数据添加到Canvas上，然后将Canvas保存为临时图片，再将临时图片转换为base64。 贴上核心实现代码： wxml： js： var nCounter = 0; openCamera: function (res) { var that = this var camera_ctx = wx.createCameraContext() listener = camera_ctx.onCameraFrame((frame) => { // nCounter等于30 是因为一开始相机会有一个对焦的过程，如果一开始获取数据，就是模糊的图片 if (nCounter == 30) { console.log(frame.data instanceof ArrayBuffer, frame.width, frame.height) var data = new Uint8Array(frame.data); var clamped = new Uint8ClampedArray(data); // 实时帧数据添加到Canvas上 wx.canvasPutImageData({ canvasId: 'myCanvas', x: 0, y: 0, width: frame.width, height: frame.height, data: clamped, success(res) { // 转换临时文件 wx.canvasToTempFilePath({ x: 0, y: 0, width: frame.width, height: frame.height, canvasId: 'myCanvas', fileType: 'jpg', destWidth: frame.width, destHeight: frame.height, // 精度修改 quality: 0.8, success(res) { // 临时文件转base64 wx.getFileSystemManager().readFile({ filePath: res.tempFilePath, //选择图片返回的相对路径 encoding: 'base64', //编码格式 success: res => { // 保存base64 that.data.mybase64 = res.data; } }) }, fail(res) { console.log(res); } }, that) } }) } nCounter++ // console.log(nCounter); if (nCounter >= 100) { nCounter = 0 } }) listener.start() } 目前网上有两种转换方式并对比下： 1：upng-js等第三方转码js库，将相机流转换成base64，一般需要1-2s左右 [图片] 2.使用canvas将相机流转变base64，都是使用js或者小程序官方的api进行转换，一般转换时间在1秒以下： [图片] 重点说明下： 如何使用wx.canvasPutImageData()将相机流添加canvas，我们查看该官方api，添加的data类型为：Uint8ClampedArray [图片] 而我们通过onCameraFrame获取的data类型为：ArrayBuffer [图片] 所有两者类型不一致，就需要转换，将ArrayBuffer=>Uint8Array=>Uint8ClampedArray var data = new Uint8Array(frame.data); var clamped = new Uint8ClampedArray(data); 成功的把onCameraFrame获取实时帧数据转换并canvasPutImageData在canvas上，并通过canvasToTempFilePath获取临时文件，如何获取临时文件getFileSystemManager转换为base64，传入云端进行AR识别，就大功告成！ 技术分享来自于：北京晞翼科技有限公司 技术作者：le3d618、xiaoz0816 微信商务联系：le3d618