[英]Image upload to base64 in HTML5
I'm using jasny bootstrap to include image uploads in my page. 我正在使用jasny引导程序在页面中包含图像上传。 See http://jasny.github.io/bootstrap/javascript/#fileinput
参见http://jasny.github.io/bootstrap/javascript/#fileinput
My question: I want to save this image into a Javascript database like PouchDB - so I think my only option is to use Base64 ( http://pouchdb.com/guides/attachments.html - I will be using webservices to copy this image to another website, so I think it has to be base64). 我的问题:我想将此图像保存到PouchDB这样的Javascript数据库中-所以我认为我唯一的选择是使用Base64( http://pouchdb.com/guides/attachments.html-我将使用网络服务来复制该图像到另一个网站,所以我认为它必须是base64)。 But how can I convert the image to base64 string format?
但是,如何将图像转换为base64字符串格式?
HTML : HTML:
<input type='file' id="asd" />
<img id="img" src="" />
<div id="base"></div>
JS : JS:
function readImage(input) {
if ( input.files && input.files[0] ) {
var FR= new FileReader();
FR.onload = function(e) {
$('#img').attr( "src", e.target.result );
$('#base').text( e.target.result );
};
FR.readAsDataURL( input.files[0] );
}
}
$("#asd").change(function(){
readImage( this );
});
You may also find blob-util to be useful. 您可能还会发现blob-util有用。 It has an
imgSrcToBlob()
method that takes an <img>
src and converts it to an HTML5 Blob, and can also convert it to base64, binary string, ArrayBuffer, etc. 它具有
imgSrcToBlob()
方法,该方法采用<img>
src并将其转换为HTML5 Blob,还可以将其转换为base64,二进制字符串,ArrayBuffer等。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.