如何将uni-app的canvas组件图片内容转成base64字符串？

分类：uni-app

uni_app base64 canvas

如何将uni-app的canvas组件图片内容转成base64字符串？
我看h5的canvas提供了toDataURL的方法可以获得，而uni-app的canvas用哪个方法可以获得？

H5的如下：
var img = canvas.toDataURL("image/jpeg", 0.5); // toDataUrl可以接收2个参数，参数一：图片类型，参数二：图片质量0-1（不传默认为0.92）
//document.getElementById('img').setAttribute("src", img) // 将base64格式图片显示到页面上

2018-10-13 15:58 1 条评论负责人:无分享

5 个回复

marathon - marathon

问题解决了：
1，需要使用plus：io
2，需要一个技巧：临时保存
view：
<view class="page-section">
<canvas class="canvas-element" canvas-id="canvas"></canvas>

js：
//临时保存后进行base64化
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: 360,
height: 240,
canvasId: 'canvas',
success: function(rest) {
var savedFilePath = rest.tempFilePath;//相对路径
var path=plus.io.convertLocalFileSystemURL(savedFilePath);//绝对路径
var fileReader = new plus.io.FileReader();
fileReader.readAsDataURL(path);
fileReader.onloadend = function(evt) {//读取文件成功完成的回调函数
console.log(evt.target.result);//输出base64内容
}
}
});
//base64转图像
base64Img:function(data){
var bitmap = new plus.nativeObj.Bitmap("syt");
bitmap.loadBase64Data(data,
function(e){
console.log("加载Base64图片数据成功");
var savedFilePath = "_doc/uniapp_temp/canvas/"+new Date().getTime()+".png";
var path=plus.io.convertLocalFileSystemURL(savedFilePath);
bitmap.save(path,{},function(){
context.drawImage(savedFilePath, 0, 0,360,240);
context.draw(true);
},function(){});
},
function(e){
console.log('加载Base64图片数据失败：'+JSON.stringify(e));
});
}