Question

我使用jasny bootstrap在我的页面中包含图片上传。见http://jasny.github.io/bootstrap/javascript/#fileinput

我的问题：我想将此图像保存到像PouchDB这样的Javascript数据库中 - 所以我认为我唯一的选择是使用Base64（http://pouchdb.com/guides/attachments.html - 我将使用webservices将此图像复制到另一个网站，所以我认为它必须是base64）。但是如何将图像转换为base64字符串格式？

Answer 1

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 );
});

Answer 2

您可能还会发现blob-util有用。它有imgSrcToBlob()方法，它接受<img> src并将其转换为HTML5 Blob，还可以将其转换为base64，二进制字符串，ArrayBuffer等。

图像上传到HTML5中的base64

2 个答案: