javascript - js实现图片裁切的效果后,如何将裁切的部分上传到服务器??

WBOY
發布: 2016-07-06 13:53:15
原創
969 人瀏覽過

js实现图片裁切的效果后,如何将裁切的图片上传到服务器??
由于js实现的裁切不过是一个效果而已,并没有对源文件做任何更改,且无法保存选取的部分到本地磁盘,那如何将用户裁切后的图片上传到服务器??

我的想法是:

  1. 上传源文件

  2. 上传裁切出来的图片的相关信息,包括相关坐标,裁切后图片的大小

  3. 通过php的gd函数库 对上传的原图片和相关信息进行实际的裁切,保存

不知道网络上,例如各种论坛上的头像设置等,是怎样实现的??

回复内容:

js实现图片裁切的效果后,如何将裁切的图片上传到服务器??
由于js实现的裁切不过是一个效果而已,并没有对源文件做任何更改,且无法保存选取的部分到本地磁盘,那如何将用户裁切后的图片上传到服务器??

我的想法是:

  1. 上传源文件

  2. 上传裁切出来的图片的相关信息,包括相关坐标,裁切后图片的大小

  3. 通过php的gd函数库 对上传的原图片和相关信息进行实际的裁切,保存

不知道网络上,例如各种论坛上的头像设置等,是怎样实现的??

最近自己写了个图片裁剪,其实大多数裁剪都是这个流程啦:
上传-> 预览 -> 确定裁剪参数(x,y,w,h,maxW,maxH)->提交到服务端,服务端php处理后生成新的图片地址

插件地址,比较轻量级的 https://github.com/Vanthink-UED/jquery.core.image.upload

目前裁切都是服务端进行的。
前端能做的是记录要裁切的左上角坐标(x,y)和宽高(w,h),然后在服务端根据这4个参数进行裁切和保存。

不考虑兼容性
1、通过canvas来获取剪切之后的图片数据
2、将图片数据上传到服务器

上github :https://github.com/baijunjie/jQuery-photoClip

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板