JavaScript 拖放照片缩放裁剪器

发布于 2024-07-14 00:44:18 字数 360 浏览 6 评论 0原文

我在页面上有一个任意大小的图像。 作为输出,我需要一个固定大小的图像,例如 90x120px。 我希望用户通过将大图像拖放到 90x120px “窗口”后面来选择图像区域。 该窗口将指定生成的图像。 类似的事情是在 Facebook 图片上传 中实现的。

一旦获得裁剪坐标,我就知道如何在后端处理图像,这没问题。 我想我需要在隐藏表单字段中发布裁剪坐标。 用户的拖放操作应该使 JavaScript 填充字段,对吧? 我是 JS 新手,所以分步指南会有很大帮助。

I have an image of arbitrary size on the page. As an output I need an image of a fixed size, say 90x120px. I would like the user to chose the area of the image by drag-and-dropping the big image behind the 90x120px 'window'. The window would specify the resulting image. Something like this is implemented at facebook image upload.

I know how to deal with the image at backend as soon as I get the cropping coordinates, no problem with that. I guess I need to post the cropping coordinates in hidden form fields. User's drag-and-dropping action should make JavaScript populate the fields, right? I am new to JS, so a step-by-step guide would help a lot.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

温柔戏命师 2024-07-21 00:44:18

对于裁剪,请使用 jQueryJcrop

For cropping, use jQuery and Jcrop.

浊酒尽余欢 2024-07-21 00:44:18
  1. Familiarize yourself with jQuery. It will save yourself time in any js/dhtml project
  2. http://interface.eyecon.ro/demos/drag.html http://interface.eyecon.ro/demos/resize.html http://interface.eyecon.ro/download
  3. ???
  4. Profit
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文