小程序drawimage,小程序drawimage不显示
小程序 使用upng.js 把小程序选择的图片转换为base64
有时候会遇到后端需要前端获取的图片文件转换成base64，在传给后台
小程序有专门的选择图片接口，
wx.chooseImage(OBJECT)
但是这个只是返回一个图片的临时路径，并不是文件数据本身。
小程序暂时没有接口直接转base64的
所以我们需要使用canvas和canvasGetImageData（小程序版本1.9.0以后要才有）先获取图片内容，
再通过插件upng.js插件实现图片转base64（所需插件文件附件中）
1. 把upng.js和pako.min.js文件放到项目中
2. 在pages下的页面js文件中导入
var upng = require('../../utils/upng.js');
这里只需要导入npng.js ，pako.min.js是在npng,js里面调用
3. 建一个canvas
chooseImage"人脸测试 ?
// 画布
// 生成base64位图片展示 变量imgbase64
need-to-insert-img
4. 添加js点击chooseImage事件
chooseImage: function() {
? ? ? ? var that = this;
? ? ? ? var coss_signature = wx.getStorageSync('cos_signature');
? ? ? ? var canvasID = "imgCanvas";
? ? ? ? var canvas = wx.createCanvasContext(canvasID)
? ? ? ? wx.chooseImage({
? ? ? ? ? ? sourceType: ['album', 'camera'],
? ? ? ? ? ? sizeType: ['original'],
? ? ? ? ? ? count: 1,
? ? ? ? ? ? success: function (res) {
? ? ? ? ? ? ? ? var tempFilePaths = res.tempFilePaths;
? ? ? ? ? ? ? ? // 获取文件路径
? ? ? ? ? ? ? ? var filePath = tempFilePaths[0];
? ? ? ? ? ? ? ? // 1. 绘制图片至canvas
? ? ? ? ? ? ? ? canvas.drawImage(filePath, 0, 0, 300, 200)
? ? ? ? ? ? ? ? // 绘制完成后执行回调，API 1.7.0
? ? ? ? ? ? ? ? canvas.draw(false, function(res){
? ? ? ? ? ? ? ? ? ? // 2. 获取图像数据， API 1.9.0
? ? ? ? ? ? ? ? ? ? wx.canvasGetImageData({
? ? ? ? ? ? ? ? ? ? ? ? canvasId: canvasID,
? ? ? ? ? ? ? ? ? ? ? ? x: 0,
? ? ? ? ? ? ? ? ? ? ? ? y: 0,
? ? ? ? ? ? ? ? ? ? ? ? width: 300,
? ? ? ? ? ? ? ? ? ? ? ? height: 200,
? ? ? ? ? ? ? ? ? ? ? ? success(res) {
? ? ? ? ? ? ? ? ? ? ? ? ? // 3. png编码
? ? ? ? ? ? ? ? ? ? ? ? ? let pngData = upng.encode([res.data.buffer], res.width, res.height)
? ? ? ? ? ? ? ? ? ? ? ? ? // 4. base64编码
? ? ? ? ? ? ? ? ? ? ? ? ? let base64 = wx.arrayBufferToBase64(pngData)
? ? ? ? ? ? ? ? ? ? ? ? ? // ...
? ? ? ? ? ? ? ? ? ? ? ? ? that.setData({
? ? ? ? ? ? ? ? ? ? ? ? ? ? imgbase64: base64
? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? })
? ? }
5. 实现
need-to-insert-img
need-to-insert-img
tips
画布画的图片的长和宽是固定的，这个按照自己需求设置。
可以通过小程序的
wx.getImageInfo(OBJECT)
获取长和宽
相关链接
upng.js:?
wx-cardscanner:? 有时候会遇到后端需要前端获取的图片文件转换成base64，在传给后台
小程序有专门的选择图片接口，
但是这个只是返回一个图片的临时路径，并不是文件数据本身。
小程序暂时没有接口直接转base64的
所以我们需要使用canvas和canvasGetImageData（小程序版本1.9.0以后要才有）先获取图片内容，
再通过插件upng.js插件实现图片转base64（所需插件文件附件中）
1. 把upng.js和pako.min.js文件放到项目中
2. 在pages下的页面js文件中导入
var upng = require('../../utils/upng.js');
这里只需要导入npng.js ，pako.min.js是在npng,js里面调用
3. 建一个canvas
chooseImage"人脸测试 ?
// 画布
// 生成base64位图片展示 变量imgbase64
4. 添加js点击chooseImage事件
chooseImage: function() {
? ? ? ? var that = this;
? ? ? ? var coss_signature = wx.getStorageSync('cos_signature');
? ? ? ? var canvasID = "imgCanvas";
? ? ? ? var canvas = wx.createCanvasContext(canvasID)
? ? ? ? wx.chooseImage({
? ? ? ? ? ? sourceType: ['album', 'camera'],
? ? ? ? ? ? sizeType: ['original'],
? ? ? ? ? ? count: 1,
? ? ? ? ? ? success: function (res) {
? ? ? ? ? ? ? ? var tempFilePaths = res.tempFilePaths;
? ? ? ? ? ? ? ? // 获取文件路径
? ? ? ? ? ? ? ? var filePath = tempFilePaths[0];
? ? ? ? ? ? ? ? // 1. 绘制图片至canvas
? ? ? ? ? ? ? ? canvas.drawImage(filePath, 0, 0, 300, 200)
? ? ? ? ? ? ? ? // 绘制完成后执行回调，API 1.7.0
? ? ? ? ? ? ? ? canvas.draw(false, function(res){
? ? ? ? ? ? ? ? ? ? // 2. 获取图像数据， API 1.9.0
? ? ? ? ? ? ? ? ? ? wx.canvasGetImageData({
? ? ? ? ? ? ? ? ? ? ? ? canvasId: canvasID,
? ? ? ? ? ? ? ? ? ? ? ? x: 0,
? ? ? ? ? ? ? ? ? ? ? ? y: 0,
? ? ? ? ? ? ? ? ? ? ? ? width: 300,
? ? ? ? ? ? ? ? ? ? ? ? height: 200,
? ? ? ? ? ? ? ? ? ? ? ? success(res) {
? ? ? ? ? ? ? ? ? ? ? ? ? // 3. png编码
? ? ? ? ? ? ? ? ? ? ? ? ? let pngData = upng.encode([res.data.buffer], res.width, res.height)
? ? ? ? ? ? ? ? ? ? ? ? ? // 4. base64编码
? ? ? ? ? ? ? ? ? ? ? ? ? let base64 = wx.arrayBufferToBase64(pngData)
? ? ? ? ? ? ? ? ? ? ? ? ? // ...
? ? ? ? ? ? ? ? ? ? ? ? ? that.setData({
? ? ? ? ? ? ? ? ? ? ? ? ? ? imgbase64: base64
? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? })
? ? }
5. 实现
tips
画布画的图片的长和宽是固定的，这个按照自己需求设置。
可以通过小程序的
获取长和宽
相关链接
upng.js:?
wx-cardscanner:?
支付宝&微信小程序Canvas生成图片
canvas转换图片api不相同，并且参数不相同，支付宝参数与支付宝开发者文档中的参数都出现不相同
下面我们看微信的wx.canvasToTempFilePath和支付宝ctx.toTempFilePath中success返回的参数差异,我们如果要获取对应的图片，wx返回两种图片格式，一种是本地图片，一种是http协议内部临时图片（tempFilePath）。而支付宝只存在一种图片格式，http协议临时图片（apFilePath）。
微信端中如果需要绘画canvas生成的图片进已有的canvas，采用drawImage，其中第一个参数是图片地址，微信端中要采用tempFilePath参数，支付宝端需要采用apFilePath
小程序Canvas闪屏处理
最近在微信小程序开发中需要用到canvas绘制中国象棋的的棋盘棋子，该需求用来复盘对弈记录，由于复盘的每一步都是用fen串 （参考：FEN文件格式） 来转换出所有棋子的位置，所以每一步都会将棋子重新绘制一遍，为了避免显示上一次步绘制i的内容需要先清空canvas再绘制新的棋子，清空和重新绘制的过程就会出现闪屏的现象，所以每次点上一步下一步的时候都会闪一下，体验很不好。
为了解决这个问题，搜索了一些解决方案，最终决定参考双缓存 《在Canvas clearRect中引起的闪屏怎么解决？双缓存解决闪屏问题详解！》 的方式解决这个问题。
由于棋子元素过多，每一颗棋子都要调用一次drawImage，且新版的canvas是异步进行的，如果不采用缓存的方式，看起来不仅有闪烁的现象还会有一种棋子一个一个出现的感觉。现将内容绘制好生成图片，在另一个canvas中只需要绘制这一张图片并覆盖之前的内容，而不需要清空，这样就避免了闪屏的问题。
效果对比：
如果有更好的方案，请不吝赐教。
微信小程序中canvas.drawImage画图
描述：在页面加载是使用canvas.drawImage画图，点击页面下面按钮在已绘制好的图形上继续画图。使用ctx.draw()弄了多次，均会把之前的图清掉重新绘制，看文档得知，在ctx.draw()时，传入参数true即可保存原来绘制的图，在此记录一下。
详见如下：
canvas使用：
index.wxml中
js中
微信什么小程序可以改手机截图
微信截屏，微信小程序截屏调用教程
一、程序简介：
本程序主要是用户1通过在相机上涂鸦来描绘物体的轮廓。然后，用户2根据轮廓寻找物体。如果成功则返回正确，否则返回继续努力。（具体开发流程和功能见微信小程序应用开发计划表。）
二、开发平台
微信开发者工具V1.02.1803210
三、进展
目前小程序的截图功能已经实现。后台识别也已经实现，同时正在完善数据库。
四、思路
想法一：
通过定位API获取用户位置，加上重力加速度或者罗盘来模拟实现。但想法一在实现的时候遇到如下问题被舍弃：
1）获取位置时使用误差不确定。（获取五次位置的平均值误差依然无法确定）
2）如果物体进行移动或同类物体无法识别。
想法二：
通过截取前后两个场景中包围轨迹的最大矩形，传输到后端进行识别。最后由后台返回结果
截屏实现大致过程：记录下用户的最大最小X、Y坐标-调用相机组件的takePhoto控件—调用画布组件drawImage绘制图像到画布-根据最大最小X、Y坐标调用画布的canvasToTempFilePath导出图像。
遇到问题以及解决方案：
1. 在调用小程序的位置API时，发现获取5次平均值是0
原因：小程序的API有些是多线程的，因此在API后面的语句不一定后执行。
2. 画板无法覆盖到相机组件上：
原因：相机组件是源生组件，在上面只能覆盖cover-view和cover-image组件。
解决方法：画板也为源生组件，虽然按理来说可以覆盖。但是在页面首次加载中，相机会在画板的上面。第二次加载时，画布才可以覆盖到相机组建上面。因此，在开始界面调用一次相机，在第二界面就可以在上面覆盖画布了。
3. 在画布上调用drawImage绘制照片的部分图像时有问题。
原因：没找到
解决方案：将整张图绘制到画布中进行部分截取，这个在IOS系统中是可以的。在Android系统有问题。
4. 画布中导出图像中没有darwImage在画布上绘制的图。
原因：drawImage绘图需要时间。
解决方案：设置一个两秒的定时器。
5. 截图功能在安卓上可以运行，在IOS上无法点击
原因：微信在两个平台上采用的是不同的运行环境。在安卓上cover控件在画板上面，IOS中cover控件在画板下面。
解决方案：在相机控件的下方添加控件，同时调用drawImage时画板坐标乘上一个比例。（其画板坐标单位是像素）
6. 在API内用this指针发现无法给Page中数据赋值
原因：在部分API中，this指针可能不指向页面实例。
解决方法：先用that把this指针的值保存起来，在API内部用that。
7. 在函数中给page中的字符串和对象赋值时跳出函数范围，其值变为空
原因：这应该和程序执行的内存机制有关
解决方法：在给变量申请一个空间，如 str：new string（）。之后赋值时问题便会解决。
8. 画板的drawImage绘制图形问题
原因：经过测试drawImage中的单位确实是像素。不过手机的像素为360*560，照片的像素却为720*1136。
解决方案：无
9. 程序的涂鸦和识别分为两个窗口后。识别窗口会显示轨迹，但背景却是黑色。
原因：不明
解决方案：在识别窗口第一次调用drawImage时，现调用一下clearfill（）清空画布。
10. 记录轨迹
原因：前期我们是用点来描述用户的轨迹的，具体见边框绘制。但这样绘制出的点我们感觉贴的图不美观，之后想要改为用户自己绘制的轨迹
解决方案：在用户点击完成后先把用户的轨迹导入成一张透明图片，传入识别界面。然后贴在画板上。
微信小程序网络图片不显示怎么解决？
这样的情况，可以把微信的重要东西备份，然后清除数据，或是卸载掉该软件重新安装适合系统版本的该软件版本，这样应该可以恢复正常显示的