我正在为网站设置典型的个人资料图片上传和裁剪功能。我正在看别人如何设置它,我发现有很多人设法有一个输入类型=“文件”,它不仅允许选择文件,还调用 PHP 或 JS 来显示图像。
在完成图像选择后,我完全坚持如何让它做一些事情。
是否有任何人有关于如何执行此操作的链接或建议?
您可以实现此目的的一种方法是将文件转换为 blob,然后使用 HTML5 canvas呈现它。示例:http://www.html5rocks.com/en/tutorials/file/dndfiles/
canvas
另一种选择是在更改文件输入后发出 AJAX 请求。做你需要的任何服务器处理(裁剪,保存,etc.)然后返回 AJAX 调用文件的路径。然后只需将新的<img src='filepath.jpg' />附加到 DOM。
<img src='filepath.jpg' />
我会使用 AJAX 上传图像,使用 API 接收图像。保存图像后,API-method 将返回图像的路径。
然后,您可以使用从 API-method 收到的路径显示图像。
2 回答
您可以实现此目的的一种方法是将文件转换为 blob,然后使用 HTML5
canvas
呈现它。示例:http://www.html5rocks.com/en/tutorials/file/dndfiles/另一种选择是在更改文件输入后发出 AJAX 请求。做你需要的任何服务器处理(裁剪,保存,etc.)然后返回 AJAX 调用文件的路径。然后只需将新的
<img src='filepath.jpg' />
附加到 DOM。我会使用 AJAX 上传图像,使用 API 接收图像。保存图像后,API-method 将返回图像的路径。
然后,您可以使用从 API-method 收到的路径显示图像。