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

Question

我有一个表格。当用户单击保存时，我想获取 he/she 选择的图像并将其转换为 base64 和 return 。可能吗？

这是我目前的代码

<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 编码，但您可以将图像绘制到二维 HTML5 canvas 和然后使用 javascript.

将 canvas 绘制的图像转换为 base64 编码

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

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

工作示例：

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

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

p {
font-size: 9px;
overflow: scroll;
}

N.B.上面的例子抛出安全错误，但是only因为CORS(Cross Origin Resource Sharing) 识别出示例中的图像是 外部源 - 开始编码 canvas 是一个安全问题其中有从外部源写入的内容。

如果绘制到 canvas 的图像来自同一来源，则不会出现安全错误。

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

How can I convert an image to base64 using input field when user clicks save

javascript

jquery

base64

file-upload

image