JS:图像上传实时操作、缩放、尺寸和裁剪

Posted

技术标签:

【中文标题】JS:图像上传实时操作、缩放、尺寸和裁剪【英文标题】:JS: Image upload live manipulation, scale, dimensions and crop 【发布时间】:2010-06-21 11:15:52 【问题描述】:

我正在创建一个 CMS,其中包含许多图像,用户可以将这些图像上传并附加到页面中的各个位置。

我正在尝试找到一个不错的,最好是基于 jquery 的插件或类似的插件,用于在允许裁剪之前缩放图像。

我已经实现了 jCrop http://deepliquid.com/content/Jcrop.html,效果很好。但是,如果用户上传大图像,则无法缩小图像以裁剪其中的一部分。

我知道可以使用 GD 来缩小图像,但最好在 javascript 界面中结合缩放和裁剪功能,以便在使用之前更好地了解他们对图像所做的操作保存它。

如果我创建一个自定义函数来更改可能绑定到滑块控件的图像的高度和宽度,我能否将数据传递到 GD 库中?这样我就可以在输出调整后的新图像之前一次性放下和缩放?

【问题讨论】:

【参考方案1】:

如果您可以强制要求使用支持 HTML5 的浏览器,此项目可能会解决您的所有问题: http://hacks.mozilla.org/2010/02/an-html5-offline-image-editor-and-uploader-application/

【讨论】:

以上是关于JS:图像上传实时操作、缩放、尺寸和裁剪的主要内容,如果未能解决你的问题,请参考以下文章

裁剪图像并将其调整为特定尺寸

使用 css 裁剪或缩放图像

如何使用 jquery 裁剪缩放的图像

缩放图像直到 X 或 Y 与容器相同,然后裁剪其余部分

CSS裁剪图像到特定尺寸

php图片上传类(支持缩放裁剪图片缩略功能)