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

我有一张表格。当用户单击“保存”时，我希望获取他/她选择的图像，并将其转换为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>

$（'#i_文件'）。更改（函数（事件）{
var tmppath=URL.createObjectURL（event.target.files[0]）；
$（“img”）.fadeIn（“fast”）.attr（'src'，URL.createObjectURL（event.target.files[0]）；
$（“disp#tmp_path”）.html（“临时路径（复制它并尝试在浏览器地址栏中粘贴它）-->[“+tmppath+”]”；
$type=pathinfo（tmppath，pathinfo_扩展名）；
$data=文件\获取\内容（$path）；
$base64='data:image/'.$type.'；base64'.base64_encode（$data）；
console.log（$base64）；
});

不能使用javascript直接将图像转换为base64编码，但可以将图像绘制到二维HTML5画布上，然后使用javascript将画布绘制的图像转换为base64编码

您可以通过3个步骤实现这一点：

将所选图像的完整版本加载到页面（如果该图像不是页面上现有的元素）

将新加载的图像复制到HTML5画布元素

将画布转换为base-64数据URL

工作示例：

var body=document.getElementsByTagName（'body'）[0]；
函数convertImage（）{
this.crossOrigin='Anonymous'；
var canvas=document.createElement（'canvas'）；
canvas.width=this.width；
canvas.height=this.height；
var canvasContext=canvas.getContext（'2d'）；
drawImage（this，0，0）；
var base64URL=canvas.toDataURL（）；
var段落=document.createElement（'p'）；
paragration.textContent=base64URL；
正文.儿童（第段）；
}
函数loadImage（）{
var image=document.createElement（'img'）；
image.setAttribute（'src'，'http://placehold.it/140x200');
setAttribute（'alt'，'Placeholder image'）；
附体子体（图像）；
image.addEventListener（'load'，convertImage，false）；
}
window.addEventListener（'load'，loadImage，false）
img，canvas，p{
显示：内联块；
右边距：12px；
宽度：140px；
高度：200px；
}
p{
字体大小：9px；
溢出：滚动；
}
不能使用javascript直接将图像转换为base64编码，但可以将图像绘制到二维HTML5画布上，然后使用javascript将画布绘制的图像转换为base64编码

您可以通过3个步骤实现这一点：

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


var body=document.getElementsByTagName（'body'）[0]；
函数convertImage（）{
this.crossOrigin='Anonymous'；
var canvas=document.createElement（'canvas'）；
canvas.width=this.width；
canvas.height=this.height；
var canvasContext=canvas.getContext（'2d'）；
drawImage（this，0，0）；
var base64URL=canvas.toDataURL（）；
var段落=document.createElement（'p'）；
paragration.textContent=base64URL；
正文.儿童（第段）；
}
函数loadImage（）{
var image=document.createElement（'img'）；
image.setAttribute（'src'，'http://placehold.it/140x200');
setAttribute（'alt'，'Placeholder image'）；
附体子体（图像）；
image.addEventListener（'load'，convertImage，false）；
}
window.addEventListener（'load'，loadImage，false）
img，canvas，p{
显示：内联块；
右边距：12px；
宽度：140px；
高度：200px；
}
p{
字体大小：9px；
溢出：滚动；
}
您已经尝试了什么？更新了我的代码
php
在
元素中的作用是什么？你说的“退回那个”是什么意思？使用
FileReader
，请参阅$data=file\u get\u contents（$path）？在脚本中？这可能会有帮助。您已经尝试了什么？更新了我的代码在
元素中
php
的用途是什么？你说的“退回那个”是什么意思？使用
FileReader
，请参阅$data=file\u get\u contents（$path）？在脚本中？这可能会有帮助，OP正在读取从
对象检索到的
文件
对象，而不是请求新图像文件。OP正在读取从
对象检索到的
文件
对象，而不是请求新图像文件。