Question

我有一张表格。当用户单击“保存”时，我想获取他/她选择的图像并将其转换为base64并返回该图像。有可能吗？

这是我目前的代码

<script src="jquery-2.1.4.min.js"></script>
<input type="file" id="i_file" value=""> 
<input type="button" id="i_submit" value="Submit">
<br>
<img src="" width="200" style="display:none;" />
<br>
<div id="disp_tmp_path"></div>

<script type="text/javascript">
    $('#i_file').change( function(event) {
        var tmppath = URL.createObjectURL(event.target.files[0]);
        $("img").fadeIn("fast").attr('src',URL.createObjectURL(event.target.files[0]));

        $("#disp_tmp_path").html("Temporary Path(Copy it and try pasting it in browser address bar) --> <strong>["+tmppath+"]</strong>");

        $type = pathinfo(tmppath, PATHINFO_EXTENSION);
        $data = file_get_contents($path);
        $base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
        console.log($base64);

    });
</script>

Answer 1

您无法使用javascript直接将图片转换为base64编码，但可以将图像绘制到2维HTML5画布上，然后转换使用javascript将画布绘制的图像转换为base64编码。

您可以通过3个步骤来解决此问题：

将所选图像的完整版加载到页面中（如果它不是页面上的现有元素）;
将新加载的图像复制到HTML5画布元素
将画布转换为base-64数据URL

工作示例：

＆＃13;

var body = document.getElementsByTagName('body')[0];

function convertImage() {
    this.crossOrigin = 'Anonymous';
    var canvas = document.createElement('canvas');
    canvas.width = this.width;
    canvas.height = this.height;
    var canvasContext = canvas.getContext('2d');
    canvasContext.drawImage(this, 0, 0);

    var base64URL = canvas.toDataURL();
    var paragraph = document.createElement('p');
    paragraph.textContent = base64URL;
    body.appendChild(paragraph);
}


function loadImage() {
    var image = document.createElement('img');
    image.setAttribute('src','http://placehold.it/140x200');
    image.setAttribute('alt','Placeholder Image');
    body.appendChild(image);
    image.addEventListener('load',convertImage,false);
}

window.addEventListener('load',loadImage,false);

＆＃13;

img, canvas, p {
display: inline-block;
margin-right: 12px;
width: 140px;
height: 200px;
}

p {
font-size: 9px;
overflow: scroll;
}

＆＃13;

NB 以上示例引发安全性错误，但only因为 CORS （跨源资源共享）会识别出示例中的图像是外部源 - 开始编码从外部源写入内容的画布是一个安全问题。

如果绘制到画布的图像来自同一原点，则不会出现安全性错误。

当用户单击保存时，如何使用输入字段将图像转换为base64

1 个答案: