JavaScript 拖放照片缩放裁剪器
我在页面上有一个任意大小的图像。 作为输出,我需要一个固定大小的图像,例如 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
对于裁剪,请使用 jQuery 和 Jcrop。
For cropping, use jQuery and Jcrop.