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组件使用心得

[图片] 海报生成示例 最近智酷君在做[小程序]canvas生成海报的项目中遇到一些棘手的问题，在网上查阅了各种资料，也踩扁了各种坑，智酷君希望把这些“填坑”经验整理一下分享出来，避免后来的兄弟重复“掉坑”。 [图片] 原型图 这是一个大致的原型图，下面来看下如何制作这个海报，以及整体的思路。 [图片] 海报生成流程 [代码片段]Canvas生成海报实战demo demo的微信路径：https://developers.weixin.qq.com/s/Q74OU3m57c9x demo的ID：Q74OU3m57c9x 如果你装了IDE工具，可以直接访问上面的demo路径 通过代码片段将demo的ID输入进去也可添加： [图片] [图片] 下面分享下主要的代码内容和“填坑现场”： 一、添加字体 https://developers.weixin.qq.com/miniprogram/dev/api/canvas/font.html [代码]canvasContext.font = value //示例 ctx.font = `normal bold 20px sans-serif`//设置字体大小，默认10 ctx.setTextAlign('left'); ctx.setTextBaseline("top"); ctx.fillText("《智酷方程式》专注研究和分享前端技术", 50, 15, 250)//绘制文本 [代码] 符合 CSS font 语法的 DOMString 字符串，至少需要提供字体大小和字体族名。默认值为 10px sans-serif 文字过长在canvas下换行问题处理（最多两行，超过“…”代替） [代码]ctx.setTextAlign('left'); ctx.setFillStyle('#000');//文字颜色：默认黑色 ctx.font = `normal bold 18px sans-serif`//设置字体大小，默认10 let canvasTitleArray = canvasTitle.split(""); let firstTitle = ""; //第一行字 let secondTitle = ""; //第二行字 for (let i = 0; i < canvasTitleArray.length; i++) { let element = canvasTitleArray[i]; let firstWidth = ctx.measureText(firstTitle).width; //console.log(ctx.measureText(firstTitle).width); if (firstWidth > 260) { let secondWidth = ctx.measureText(secondTitle).width; //第二行字数超过，变为... if (secondWidth > 260) { secondTitle += "..."; break; } else { secondTitle += element; } } else { firstTitle += element; } } //第一行文字 ctx.fillText(firstTitle, 20, 278, 280)//绘制文本 //第二行问题 if (secondTitle) { ctx.fillText(secondTitle, 20, 300, 280)//绘制文本 } [代码] 通过 ctx.measureText 这个方法可以判断文字的宽度，然后进行切割。 （一行字允许宽度为280时，判断需要写小点，比如260） 二、获取临时地址并设置图片 [代码]let mainImg = "https://demo.com/url.jpg"; wx.getImageInfo({ src: mainImg,//服务器返回的图片地址 success: function (res) { //处理图片纵横比例过大或者过小的问题！！！ let h = res.height; let w = res.width; let setHeight = 280, //默认源图截取的区域 setWidth = 220; //默认源图截取的区域 if (w / h > 1.5) { setHeight = h; setWidth = parseInt(280 / 220 * h); } else if (w / h < 1) { setWidth = w; setHeight = parseInt(220 / 280 * w); } else { setHeight = h; setWidth = w; }; console.log(setWidth, setHeight) ctx.drawImage(res.path, 0, 0, setWidth, setHeight, 20, 50, 280, 220); ctx.draw(true); }, fail: function (res) { //失败回调 } }); [代码] 在开发过程中如果封面图无法按照约定的比例（280x220）给到： 那么我们就需要处理默认封面图过大或者过小的问题，大致思路是：代码中通过比较纵横比（280/220=1.27）正比例放大或者缩小原图，然后从左上切割，竟可能保证过高的图是宽度100%，过宽的图是高度100%。 在canvas中draw图片，必须是一个（相对）本地路径，我们可以通过将图片保存在本地后生成的临时路径。 微信官方提供两个API： wx.downloadFile(OBJECT)和wx.getImageInfo(OBJECT)。都需先配置download域名才能生效。 三、裁切“圆形”头像画图 [代码]ctx.save(); //保存画图板 ctx.beginPath()//开始创建一个路径 ctx.arc(35, 25, 15, 0, 2 * Math.PI, false)//画一个圆形裁剪区域 ctx.clip()//裁剪 ctx.closePath(); ctx.drawImage(headImageLocal, 20, 10, 30, 30); ctx.draw(true); ctx.restore()//恢复之前保存的绘图上下文 [代码] 使用图形上下文的不带参数的clip()方法来实现Canvas的图像裁剪功能。该方法使用路径来对Canvas话不设置一个裁剪区域。因此，必须先创建好路径。创建完整后，调用clip()方法来设置裁剪区域。 需要注意的是裁剪是对画布进行的，裁切后的画布不能恢复到原来的大小，也就是说画布是越切越小的，要想保证最后仍然能在canvas最初定义的大小下绘图需要注意save()和restore()。画布是先裁切完了再进行绘图。并不一定非要是图片，路径也可以放进去~ 小程序 canvas 裁切BUG [代码]ctx.setFillStyle("#fff"); ctx.fillRect(0, 0, 320, 500); //第一个填充矩形 wx.downloadFile({ url: headUri, success(res) { ctx.beginPath() ctx.arc(50, 50, 25, 0, 2 * Math.PI) ctx.clip() ctx.drawImage(res.tempFilePath, 25, 25); //第二个填充图片 ctx.draw() ctx.restore() ctx.setFillStyle("#fff"); ctx.fillRect(0, 0, 320, 500); ctx.draw(true) ctx.restore() } }) [代码] clip裁切这个功能，如果有超过一张图片/背景叠加，则裁切效果失效。 错误参考：http://html51.com/info-38753-1/ 四、将canvas导出成虚拟地址 [代码]wx.canvasToTempFilePath({ fileType: 'jpg', canvasId: 'customCanvas', success: (res) => { console.log(res.tempFilePath) //为canvas的虚拟地址 } }) res： { errMsg: "canvasToTempFilePath:ok", tempFilePath: "http://tmp/wx02935bb29080a7b4.o6zAJswFAuZuKQ5NZfPr….cGnD1a02PlVC0b3284be3a41d08986c2477579a5fd8e.jpg" } [代码] 这里需要把canvas里面的内容，导出成一个临时地址才能保存在相册，比如： http://tmp/wx02935bb29080a7b4.o6zAJswFAuZuKQ5NZfPr5UfJVR4k.cGnD1a02PlVC0b3284be3a41d08986c2477579a5fd8e.jpg 五、询问并获取访问手机本地相册权限 [代码]wx.getSetting({ success(res) { console.log(res) if (!res.authSetting['scope.writePhotosAlbum']) { //判断权限 wx.authorize({ //获取权限 scope: 'scope.writePhotosAlbum', success() { console.log('授权成功') //转化路径 self.saveImg(); } }) } else { self.saveImg(); } } }) [代码] 判断是否有访问相册的权限，如果没有，则请求权限。 六、保存到用户手机本地相册 [代码]wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: function (data) { wx.showToast({ title: '保存到系统相册成功', icon: 'success', duration: 2000 }) }, fail: function (err) { console.log(err); if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") { console.log("当初用户拒绝，再次发起授权") wx.openSetting({ success(settingdata) { console.log(settingdata) if (settingdata.authSetting['scope.writePhotosAlbum']) { console.log('获取权限成功，给出再次点击图片保存到相册的提示。') } else { console.log('获取权限失败，给出不给权限就无法正常使用的提示') } } }) } else { wx.showToast({ title: '保存失败', icon: 'none' }); } }, complete(res) { console.log(res); } }) [代码] 保存到本地需要一定的时间，需要加一个loading的状态。 七、关于组件中引用canvas [代码]let ctx = wx.createCanvasContext('posterCanvas',this); //需要加this [代码] 在components中canvas无法选中的问题： 在components自定义组件下，当前组件实例的this，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas> ，如果省略则不在任何自定义组件内查找。

关键词：小程序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