图片上传demo:http://jaedemo.demo.jaeapp.com/function/imgupload
由于原来的图片组件分配的存储空间较小,且后续扩容比较麻烦,所以我们建议用户使用新的图片组件接口,原来的图片组件的接口依然可以用,但还是建议统一使用新接口,接口的产生的数据也统一迁移到新接口
目前图片上传服务仅提供简单的图片上传功能,开发者在需要图片上传服务的页面加入input标签,浏览者选择图片后,图片将会被上传到开发者指定页面处理,开发者可以在图片上传页面中获得上传结果,以JSON的格式返回:
input标签
在需要图片上传的位置如以下格式加入input标签
<input type="file" class="J_TCajaUploadImg" name="file" data-url="/upload.php" />
说明:
开发者无需将input标签包裹在form表单中,图片上传将创建单独的iframe以异步的方式上传。
input标签type属性值必须为"file"
input标签class属性值必须为"J_TCajaUploadImg"
input标签data-url属性值为处理图片上传的页面地址
input标签name属性必写,值无特殊要求。
图片上传接口
数据结构
<?php
resource ImgResponse {
public short getStatus();
public boolean isSuccess();
public Img getResult();
public String getErrorMsg();
public void setStatus(short status);
public void setSuccess(boolean success);
public void setResult(Img result);
public void setErrorMsg(String errorMsg);
};
resource Img {
public Long userId;
public Long id;
public String name;
public Long dirId;
public Long size;
public Integer type;
public String url;
public Integer status;
public Integer safe;
public Integer openStatus;
public Date fileModified;
public Integer deleted;
public Date gmtCreate;
public Date gmtModified;
public String md5;
public String shortUrl;
public String fullUrl;
public String checkSum;
};
resource ImgDir {
public Long id;
public String name;
public Long parentId;
}
?>
$imgService->uzUpload($path [,$option])
参数:
$path string 必填 图片保存路径
$option ImgOptions 可选 图片处理选项
返回值:
以ImgResponse类型返回图片上传结果。
开发者选择图片后,图片会立即以异步的方式提交到上传页面,开发者需要在上传页面调用$imgService的uzUpload函数完成上传,函数会返回ImgResponse类型的上传结果。
说明:文件路径,由文件目录和文件名组成,路径必须是以'/'开头的绝对路径,若未定义文件名,将默认使用上传文件的文件名。若路径不存在,如果option中打开自动创建目录,则将按路径创建对应目录,否则返回错误。文件允许重名,但目录不可以。
开发者在自己定义的上传页面(比如:upload.php)中调用$imgService->uzUpload("/test.jpg", NULL);开始上传。
调用ImgResponse对象的isSuccess()判定上传是否成功。
调用ImgResponse对象的getStatus()得到上传的状态码。
调用ImgResponse对象的getResult()得到Img类型的图片信息,包含图片的名字,ID,URL,大小等。
图片处理选项尚未开发。
$imgService->getUZImgById($imgId)
参数:
$imgId int 必填 指定图片id
返回值:
若存在Id为$imgId的图片,以Img类型返回该图片的信息;否则返回NULL。
$imgService->deleteUZImgById($imgId)
参数:
$imgId int 必填 指定图片id
返回值:
以ImgResponse类型返回删除图片结果。
$imgService->getUZImgList($dirId)
参数:
$dirId int 必填 指定目录id
返回值:
Img类型的数组。
根据目录Id获得该目录下所有图片信息。
$imgService->getUZImgDirList($dirId)
参数:
$dirId int 必填 指定目录id
返回值:
ImgDir类型的数组。
$imgService->createUZDir($dirName, $parentPath)
参数:
$dirName string 必填 需要生成的图片目录名称
$parentPath string 必填 目录所处路径
返回值:
ImgResponse类型对象
在parentPath路径下创建名为dirName的目录,parentPath必须是已存在的目录。
$imgService->getUZDir($dirPath)
参数:
$dirPath string 必填 目录路径
返回值:
ImgResponse类型对象
根据目录路径返回目录信息。
$imgService->getUZDirById($dirId)
参数:
$dirId int 必填 目录ID
返回值:
ImgResponse类型对象
根据目录编号返回目录信息。
前端页面获取上传结果
开发者可以在图片上传处理页面中输出自己需要的信息,这些信息会反馈到前端页面,前端页面可以按以下形式监听cajaupload获得反馈:
GS.addListener('cajaupload',function(data){});
其中data.content就是后台返回的信息。
说明:
如果是使用JSON形式返回,可以调用KISSY.JSON.parse(data.content);得到JSON对象。
新增接口
$imgService->uzTransformUrl($url,$path [,$option])
这个接口是用来将外部图片转换成内部图片的接口,其中url为外部图片的url,如:https://www.google.com.hk/logos/doodles/2013/raymond-loewys-120th-birthday-ca-fr-us-nl-uk-ie-6388231276855296-hp.jpg
其余参数说明与上传接口一致
2013-11-22新增接口
$imgService->getImgList($dirId, currentPage,pageSize)
$imgService->getUZImgList($dirId, currentPage,pageSize)
其中currentPage和pageSize必须大于0,pageSize小于等于50
返回的对象为
<?php
resource Page{
private int currentPage = 1;//当前页初始值为第一页
private int pageSize = 15;//初始页大小15
private int totalCount ;//初始0
/**
* 是否有下一页
* @return
*/
public boolean hasNextPage(){
int p = totalCount / pageSize;
return currentPage < (totalCount % pageSize == 0 ? p : ++p) ? true : false;
}
/**
* 是否有前一页
* @return
*/
public boolean hasPrePage(){
return currentPage > 1;//第一页的时候没有前一页
}
/**
* 拿到第一页的页号
* @return
*/
public int getFirstPageNumber(){//第一页是1
return 1;
}
/**
* 获取下一页页号
* @return
*/
public int getNextPageNumber(){
return ++currentPage;
}
/**
* 获取前一页的页号
* @return
*/
public int getPrePageNumber(){
return currentPage > 1 ? currentPage - 1 : 1;//小于等于1的时候前一页页号直接返回1
}
/**
* 获取最后一页页号
* @return
*/
public int getLastPageNumber(){
int p = totalCount / pageSize;
return totalCount % pageSize == 0 ? p : ++p;
}
/**
* 获取当前页的查询结果
* <br>如果不存在结果,则返回empty的List
* @return Img的列表
*/
public List getResultList() {
return resultList == null ? new ArrayList<T>() : resultList;
}
/**
* 获取当前页页号
* @return
*/
public int getCurrentPage() {
return currentPage;
}
/**
* 获取每页大小
* @return
*/
public int getPageSize() {
return pageSize;
}
/**
* 获取总记录数
* @return
*/
public int getTotalCount() {
return totalCount;
}
public void setResultList(List<Img> result) {
this.resultList = result;
}
public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public void setTotalCount(int totalCount) {
this.totalCount = totalCount;
}
};
?>
获取结果可以就可以获取到图片列表
$imgService->getUZImgList($dirId, currentPage,pageSize) ->getResultList()
获取图片总数
$imgService->getUZImgList($dirId, currentPage,pageSize)->getTotalCount()
使用返回的图片cdn地址,我们可以对图片进行处理,包括 按长边缩放、等比缩放、图片的缩放剪裁、图片的非缩放剪裁、图片的质量调整等,下面详细介绍一下这些方法的使用方式。
1. 使用步骤
使用 提供的图片上传服务上传图片到cdn,得到返回的图片地址,
比如http://img02.taobaocdn.com/imgextra/i2/436168931/T25A8GX4tXXXXXXXXX_!!436168931-0-jianzhan.jpg
通过对返回的图片地址进行url拼接,进行功能的配置,格式如:http://xxxx.jpg_宽x高.jpg,比如,http://img02.taobaocdn.com/imgextra/i2/436168931/T25A8GX4tXXXXXXXXX_!!436168931-0-jianzhan.jpg_310x310.jpg
特别注意的是:①缩放主要针对.jpg或.jpge图片,因此.gif图片也会被缩放成.jpg格式。 ②缩放尺寸并不是支持所有格式,支持的 大小格式,请参考 “图片尺寸规格表”。
2.长边缩放
按照图片的高和宽中边长更长的一方进行缩放,比如宽为500高为200的图片,则按照宽进行缩放。在cdn返回的图片url后面添加 "_WIDTHxHEIGHT.jpg"
3.等比缩放(10000 表示尺寸不限制)
_620x10000 这种配置表示使用者希望图片的宽适应在一个620的空间中, 对于高是多少, 不限制. 只要缩放后的图跟原图等比就好.
_10000x220.jpg 也是类似, 使用者希望图片的高适应在一个220的空间中, 对于宽不做限制.
比如 http://img02.taobaocdn.com/imgextra/i2/436168931/T25A8GX4tXXXXXXXXX_!!436168931-0-jianzhan.jpg_310x310.jpg_620x10000.jpg
http://img02.taobaocdn.com/imgextra/i2/436168931/T25A8GX4tXXXXXXXXX_!!436168931-0-jianzhan.jpg_310x310.jpg_10000x220.jpg
4.图片的缩放剪裁
上述图片缩放, 总是不改变原图的长宽比, 不对原图做裁剪的. 比如一个300*400的图片, 缩成100*100的格式的时候, 会按照长边能放到100*100这个区域去进行缩放. 所以300*400的图片会被缩成 75*100. 如果想要按照短边适应缩放后的区域, 对长边多出来的部分裁剪, 则需要使用缩放裁剪(xz)功能.
比如: http://img02.taobaocdn.com/imgextra/i2/436168931/T25A8GX4tXXXXXXXXX_!!436168931-0-jianzhan.jpg_310x310.jpg_640x640xz.jpg
5.图片质量调整
除了可以对图片进行缩放外, 也可以降低图片质量, 从而减小网络流量, 加快图片的访问速度. 要调整图片质量只需要在原uri中增加图片质量调节参数(q或者Q)。
比如:调整图片质量为原来的90% http://img02.taobaocdn.com/imgextra/i2/436168931/T25A8GX4tXXXXXXXXX_!!436168931-0-jianzhan.jpg_q90.jpg
经过缩放的图片也可以进行质量调整, 如,http://img02.taobaocdn.com/imgextra/i2/436168931/T25A8GX4tXXXXXXXXX_!!436168931-0-jianzhan.jpg_310x310.jpg_640x640q90.jpg
说明:质量参数Q和q是有区别的.Q是绝对值, q是相对值. 比如一个原图的质量已经被调节成90%. 则增加Q90后缀, 图片不会发生变化, 增加q90, 则会被调节成 90% * 90% = 81%.