du__fei@126.com
du__fei@126.com
  • 发布:2018-10-13 15:58
  • 更新:2018-12-03 16:53
  • 阅读:2846

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

分类:uni-app

如何将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 条评论 分享
已邀请:
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));
});
}

  • 1451478031@qq.com

    这个ios上可行吗?我的为啥不行呢

    2018-12-06 17:58

  • Dexc

    小程序如何解决??

    2019-01-18 16:18

柯南彬

柯南彬 - 大家来找茬!

不要在uni-app上处理转码,直接在后端处理好base64,返回前端,直接用

du__fei@126.com

du__fei@126.com (作者)

后台接口是三方定的,需要的是base64图片格式,原生HTML5的canvas可以的,我想在前端转换如何实现?还有如何在canvas中显示base64格式图片数据?

marathon

marathon

解决了没有?我也遇到同样的问题。

要回复问题请先登录注册