JavaScript在上传后在浏览器中加载用户的本地图像

Question

我需要让用户将一个图像从她的本地文​​件系统加载到浏览器中进行一些编辑。

我不想使用闪光灯或其他人。只有HTML和JavaScript。

所以我做的是让用户将图像上传到服务器，服务器返回文件的内容（使用php file_get_contents）。

现在我将图像文件的内容作为JavaScript中的字符串。我希望将此字符串分配给图像元素的src并显示出来。但是当我将它分配给src时，没有任何反应。

怎么了？解决方案是什么？

Answer 1

src表示网址。

将其设置为服务器上的URL，或使用Base64编码的图像：

<强> PHP：

$imagedata = file_get_contents($file);
$encoded = base64_encode($imagedata);
echo $encoded;

<强> JavaScript的：

var imageElem = document.getElementById('image');
var filetype = 'png'; // Set file type here
imageElem.src = 'data:image/' + filetype + ';base64,' + image;