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

Question

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

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

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

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

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

Answer 1

src表示 URL。

将其设置为服务器上的 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;