使用 javascript 和cordova 2.2.0 将jpg/png 转换为base64
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15769951/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Convert jpg/png to base64 using javascript and cordova 2.2.0
提问by annemartijn
Application I'm working on
我正在处理的应用程序
I'm working on a Cordova 2.2.0 application that's used in a slow-(or none)internet environment.
It gains data from a CMS system.
this data (JSON) is stored locally on the mobile device using Cordova's filesystem. This provides data for moments this application doesn't have access to the internet.
我正在开发在慢速（或无）互联网环境中使用的 Cordova 2.2.0 应用程序。
它从 CMS 系统获取数据。此数据 (JSON) 使用Cordova 的文件系统本地存储在移动设备上。这提供了此应用程序无法访问互联网的时刻的数据。
Problem
问题
Data storage and recovery using Cordova's filesystem is working fine. The data stored to the filesystem is in JSON. After parsing this JSON it is converted to HTML. Problem is that this gives me IMG tags with an external source like this:
使用 Cordova 文件系统的数据存储和恢复工作正常。存储到文件系统的数据采用 JSON 格式。解析此 JSON 后，将其转换为 HTML。问题是这给了我带有外部源的 IMG 标签，如下所示：
<img src="http://www.SomeUrl.com/Images/SomeImage.jpg" id="someImage" />
I want to load this Image and convert it to base64 using JavaScript. If this is possible, I will be able to write it to the local filesystem for offline use. Something like this:
我想加载此图像并使用 JavaScript 将其转换为 base64。如果可能，我将能够将其写入本地文件系统以供离线使用。像这样的东西：
var imageFromURLToBase64(imageURL){
"use strict";
var image = doSomethingWithUrl(imageURL),
base64 = "";
//CONVERT IMAGE TO BASE64 HERE
return base64;
};
var imageUrl = $("#someImage").attr("src"),
base64 = imageFromURLToBase64(imageUrl);
//Store base64 image to local filesystem
help is highly appreciated!
P.S. cross origin requests are enabled on this server!
非常感谢帮助！
此服务器已启用 PS 跨域请求！
Alternatives
备择方案
If there's some better alternative for caching images out there, I'd be happy to hear about it. I've read a little bit about HTML cache manifest here, but I don't know if this suits my problem.
如果有更好的缓存图像的替代方法，我很高兴听到它。我读过有关HTML缓存清单一点点在这里，但我不知道这是否适合我的问题。
Duplicate question
重复问题
There are more people dealing with this problem, answers to those questions didn't solve my problem. this answeror this answerdon't tell me what's the best way to cache my images for a phonegap application. I wondered if there where better ways to encode images to base64, but my real question is: "What's the best way to store/cache my images for a phonegap application?"
有更多的人在处理这个问题，这些问题的答案并没有解决我的问题。这个答案或这个答案并没有告诉我为 phonegap 应用程序缓存我的图像的最佳方法是什么。我想知道是否有更好的方法将图像编码为 base64，但我真正的问题是：“为 phonegap 应用程序存储/缓存我的图像的最佳方法是什么？”
采纳答案by Ivan Chau
Idea
主意
Create canvas, load the image by using drawImageand use toDataURL()for the conversion to a base64-encoded string
创建canvas、加载图像并使用drawImage并toDataURL()用于转换为 base64 编码的字符串
Related Answer: Get image data in JavaScript?
Cautions
注意事项
Canvas creation and conversion may take some time.
画布创建和转换可能需要一些时间。
Some older Android phones does not support toDataURL()and pretend it is working by returning a useless string. data:,
一些较旧的 Android 手机不支持toDataURL()并通过返回无用的字符串来假装它正在工作。data:,
Another idea
另一个想法
Use readAsDataURLin FileReaderto read file and return data as a base64 encoded data url.
使用readAsDataURL在FileReader读取文件并返回数据为Base64编码传输数据的URL。
Related Answer: Phonegap encode image base64
相关答案：Phonegap 编码图片 base64
For caching, you can search on "Lazy load image".
对于缓存，您可以搜索“延迟加载图像”。
