Javascript 如何在上传之前从用户处裁剪图像/预览图像？

我想让用户上传他的照片

在他从本地计算机中选择图片后，我的最终目标是保存某些特定大小的图像的缩略图。 为了保持纵横比，我必须提示用户裁剪该图像，然后我将为其创建缩略图

为此，我想到了一种方法，首先上传图像，然后预览给用户 然后我会使用外部插件来裁剪图像 然后最后将其发送到服务器

我在预览图像时遇到问题。 一些消息来源建议这样做

<input type="file" onclick="preview(this)" >

但我只能在alert boxe.g中看到文件的最终图像名。abc.jpg，而不是整个路径，例如/home/blah/blah/abc.jpg

---

我有没有办法让用户预览图像，这样我就可以裁剪它，然后发送到服务器？或者我必须先将原始文件保存到服务器，然后只显示用户工具来裁剪他最近添加的图像。

您试图归档的内容实际上是不可能的：使用JavaScript从用户的本地计算机绘制图像。多么安全的问题啊

但在某些浏览器中，您只认为它是chrome，可以使用这种方法：

function preview()
{
 alert(this.value);
 //code to append the image content in some div.
}