图片上传到 base64 HTML5
Image upload to base64 in HTML5
我正在使用 jasny bootstrap 在我的页面中包含图片上传。参见 http://jasny.github.io/bootstrap/javascript/#fileinput
我的问题:我想将这张图片保存到像 PouchDB 这样的 Javascript 数据库中 - 所以我认为我唯一的选择是使用 Base64(http://pouchdb.com/guides/attachments.html - 我将使用网络服务来复制这张图片图片到另一个网站,所以我认为它必须是 base64)。但是如何将图片转换为base64字符串格式呢?
HTML :
<input type='file' id="asd" />
<img id="img" src="" />
<div id="base"></div>
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 );
});
您可能还会发现 blob-util 很有用。它有一个 imgSrcToBlob()
方法,该方法接受 <img>
src 并将其转换为 HTML5 Blob,还可以将其转换为 base64、二进制字符串、ArrayBuffer 等
我正在使用 jasny bootstrap 在我的页面中包含图片上传。参见 http://jasny.github.io/bootstrap/javascript/#fileinput
我的问题:我想将这张图片保存到像 PouchDB 这样的 Javascript 数据库中 - 所以我认为我唯一的选择是使用 Base64(http://pouchdb.com/guides/attachments.html - 我将使用网络服务来复制这张图片图片到另一个网站,所以我认为它必须是 base64)。但是如何将图片转换为base64字符串格式呢?
HTML :
<input type='file' id="asd" />
<img id="img" src="" />
<div id="base"></div>
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 );
});
您可能还会发现 blob-util 很有用。它有一个 imgSrcToBlob()
方法,该方法接受 <img>
src 并将其转换为 HTML5 Blob,还可以将其转换为 base64、二进制字符串、ArrayBuffer 等