将相机捕获图像转换为 base64 - Ionic
convert camera capture image to base64 - Ionic
我已经按照这个小提琴手示例图像到Base64。当我使用直接图像路径链接时,它工作正常,但是当我传递相机图像时它失败了。
Camera.getPicture().then(function(imageURI) {
var imageUrl = "http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png";
convertImgToDataURLviaCanvas(imageUrl, function(base64Img) {
alert(base64Img);
});
var result = convertImgToDataURLviaCanvas(imageURI);
}, function(err) {
alert(err);
}, {
quality: 75,
targetWidth: 320,
targetHeight: 320,
pictureSource: navigator.camera.PictureSourceType.PHOTOLIBRARY,
destinationType: navigator.camera.DestinationType.FILE_URI,
saveToPhotoAlbum: true
});
function convertImgToDataURLviaCanvas(url, callback, outputFormat) {
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function() {
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
alert(dataURL + "GANESH" + outputFormat);
callback(dataURL);
alert('5');
canvas = null;
};
img.src = url;
}
在这里,如果我给图像的直接路径它的工作,但当我使用相机图像时它不起作用。帮帮我伙计们..提前谢谢。
无需编写自己的base64转换器。一旦您设置了属性Camera.DestinationType.DATA_URL
,该插件将为您完成此操作
destinationType : Camera.DestinationType.DATA_URL
设置属性后,Camera.getPicture()
现在将返回照片的base64
版本。
Camera.getPicture().then(function(imageURI) {
console.log(imageURI) //base64 photo
});
虽然我同意使用DATA_URL是最简单的答案,但它确实有一个主要缺点。来自离子相机所基于的cordova插件相机文档:
DATA_URL可能会占用大量内存,并导致应用崩溃或内存不足错误。尽可能使用FILE_URI或NATIVE_URI
从本质上讲,在 RAM 较低(或后台内存使用率较高)的手机上,您的应用程序有可能在垃圾回收期间被杀死并重新启动,因为从技术上讲,当打开本机相机时,它处于后台(暂停)。
但是,避免DATA_URL更像是一种创可贴,因为其他数据源仍然容易受到相同问题的影响,尽管由于内存使用率较低,问题较少。关于 Android 生命周期的 cordova 文档提供了有关该问题的更多详细信息:
https://cordova.apache.org/docs/en/latest/guide/platforms/android/#lifecycle-guide
问题(可能)是以下行:
img.crossOrigin = 'Anonymous';
本文档解释说,该方法toDataUrl()
不适用于"受污染的画布"。当您crossOrigin
将画布设置为"匿名"时,画布会受到污染。
我还没有测试过这个理论。只需阅读文档。
- Html页面上的多个Base64图像和平滑加载
- 正在将base64 jpeg从input-type=file上传到服务器
- 正则表达式在字符串中找到base64
- 无法在Ionic select中预先选择最后一个选项
- 如何使用jquery将base64图像路径转换为真实路径
- 如何在Ionic Android中将Javascript注入到web视图中
- Ionic和angularjs嵌套步骤应用程序
- 如何在Ionic2测试版中包含Ionic.io服务
- Ionic-item在导航栏中进行双向数据绑定
- 无法在Cordova 4.0 ios中将jpg/jpeg图像转换为Base64
- 如何在不在本地下载的情况下将url中提供的文件(pdf/doc)转换为json/string/base64格式
- SqlStorage Ionic 2作为服务/提供程序
- Ionic V1.3-标签-带条件的徽章样式<离子选项卡>
- 为什么当我尝试在Ionic中使用列表时会出现此JavaScript错误
- base64编码的图像比intranet中的常规图像好吗
- using LocalStorage ionic 2
- 从Base64 Ionic编码和解码图像
- 将相机捕获图像转换为 base64 - Ionic
- 将图像保存为Base64时,应用程序在Ionic视图中崩溃
- 我如何保存base64图像文件在cordova / ionic或上传到服务器