小程序canvasToTempFilePath获取的图片地址在真机不显示???
wx.canvasToTempFilePath把当前画布指定区域的内容导出生成指定大小的图片。但是直接在真机使用生成的图片地址时发现图片无法显示,这是为啥子呢???请看下面的图片。
开发工具测试图:
真机测试图:
从上面的两个图可以发现在真机上是http://tmp/...
类型的图片,在真机上是wxfile://tmp/...
类型的图片,所以无法显示。那么如果要直接使用这个图片该咋办呢???
重点来了!!!
使用wx.canvasGetImageData获取 canvas 区域隐含的像素数据。然后将获取的像素数据通过wx.arrayBufferToBase64 转成base64就可以直接在真机上使用了,各位小伙伴可以参照下面的代码实现哦。
<view class="container">
<canvas style="width: 300px; height: 200px;" class="myCanvas" canvas-id="firstCanvas"></canvas>
<text class="text">{{img}}</text>
<!-- 如果要在真机打印或者在text中显示canvasToTempFilePath获取到的地址请注释掉下面这一句,不然你啥都看不到 -->
<image class="img" src="{{img}}"></image>
</view>
注意!!:必须有UPNG.js,点我获取UPNG.js
//index.js
//获取应用实例
var upng = require('../../utils/UPNG.js');
const app = getApp();
Page({
data: {
img:''
},
onLoad: function() {
},
canvasIdErrorCallback: function(e) {
console.error(e.detail.errMsg)
},
onReady: function(e) {
// 使用 wx.createContext 获取绘图上下文 context
var context = wx.createCanvasContext('firstCanvas');
const platform = wx.getSystemInfoSync().platform;
const that=this;
context.setStrokeStyle("#333333");
context.setFillStyle("#FFFF00");
// 绘制大圆脸
context.moveTo(210, 100);
context.arc(150, 100, 60, 0, 2 * Math.PI, true);
context.fill();
// 绘制嘴巴
context.moveTo(190, 100);
context.arc(150, 100, 40, 0, Math.PI, false);
context.stroke();
// 绘制左眼
context.moveTo(125, 80);
context.arc(120, 80, 5, 0, 2 * Math.PI, true);
context.stroke();
// 绘制右眼
context.moveTo(185, 80);
context.arc(180, 80, 5, 0, 2 * Math.PI, true);
context.stroke();
context.draw();
setTimeout(function(){
wx.canvasGetImageData({
canvasId: 'firstCanvas',
x: 0,
y: 0,
width: 250,
height: 250,
success (res) {
// console.log(res)
let pngData = upng.encode([res.data.buffer], res.width, res.height);
let bs64 = wx.arrayBufferToBase64(pngData);
that.setData({
img: 'data:image/jgp;base64,' + bs64
}, () => {
console.log(that.data.img)
})
// console.log(bs64)
}
})
// wx.canvasToTempFilePath({
// canvasId:'firstCanvas',
// success(res){
// console.log(res.tempFilePath)
// that.setData({
// img: res.tempFilePath
// },()=>{
// console.log(res.tempFilePath)
// })
// }
// })
})
}
})