高级教程
1. 快速搬家
1.1 概述
得图云提供的镜像存储为用户的数据搬家提供了一个良好的方式。在设置镜像时分为未设置域名和已设置域名两种情况。
如果您已经为您的站点设置好域名，即中转域名，则可以在得图云空间管理的空间配置中设置镜像存储,如下图所示：
输入中转域名：
得图云为您提供了两种搬家方式，即：Apache方式、IIS方式和Nginx方式
搬家方案的最终效果如下：
（1）当用户请求源网站数据时，数据被重定向到得图目标空间。
（2）由于得图目标空间设置了镜像到中转域名，数据请求又转到中转域名。
（3）由于中转域名指向源网站，所以会取到源网站的数据。
（4）在访问的同时，由于镜像的作用会把源网站的数据自动同步到得图云目标空间。
1.2 Apache方式
准备需要
（1）需设置好一个域名指向源网站，我们把这个域名称为中转域名。
（2）在得图云创建目标空间。
操作方式
配置 httpd.conf 文件，在文件最后添加以下内容：
RewriteEngine on
RewriteCond %{HTTP_HOST} ^yy.detuyun.com
RewriteRule ^(.*\.(jpg|jpeg|gif|png))$ http://detuyun.img.detuyun.com/$1 [R,NC,L]
其中yy.detuyun.com为源站点域名，http://detuyun.img.detuyun.com为得图云空间的域名。
1.3 IIS方式
准备需要
（1）需设置好一个域名指向源网站，我们把这个域名称为中转域名。
（2）服务器安装配置文件 rewrite.msi 文件，安装此项后在服务器IIS管理器中将会增加URL重写功能。
双击安装
（3）在得图云创建目标空间。
搬家方式
下面您可以快速的进行搬家了
第一步，配置URL重写，将源网站的图片类请求，添加重定向规则到得图云目标空间。
（1）打开url重写
（2）配置url
（3）添加规则
（4）设置规则
第二步，配置得图云目标空间的镜像到中转域名。
（1）添加条件
（2）重定向设置
第三步，配置完成。
1.4 Nginx方式
准备需要
（1）需设置好一个域名指向源网站，我们把这个域名称为中转域名。
（2）在得图云创建目标空间。
操作方式
配置 nginx.conf 文件，修改如下：
location ~* ^.+\.(jpg|png|jpeg|gif)$ {
if ($http_host = "www.ouwei.cn") {
rewrite ^(.*)$ http://ouwei.img.detuyun.com$1;
}
}
其中www.ouwei.cn为源站点域名，http://ouwei.img.detuyun.com为得图云空间的域名。
2. 响应式图片输出
响应式图片是一种应用在手机首页的新技术。它能根据手机屏幕的比例响应式地并可靠地展示图片。
该项技术的目的是在响应式布局的页面上传送最佳的、前后联系的图片尺寸。它神奇地实现了图片在不同分辨率的屏幕上的适应。理论上，利用该技术，开发者们能用HTML语言实现图片在手机上的最佳优化，使得拥有大屏幕分辨率的用户们得到合适的大尺寸图片。而这些都不需要对图片大小和浏览器尺寸进行手工的调整。
简介
下载“adaptiveimages.js”,然后将其引用到你的HTML的Head标签中；
img标签提供默认的显示尺寸，能适应大屏幕桌面。src标签传递了各种图片的尺寸，在“?”后设置图片的显示模式宽高。“imageView”后的参数表示模式，模式1表示指定宽，高按比例缩小；模式2表示指定高，宽按比例缩小；模式3表示同时指定宽高，取最大面积。你可以根据需要设定不同的尺寸。
<img:adaptive>
<source src="http://atest.img.detuyun.cn/demo.jpg?imageView/1/w/200/h/200" media = "only screen and (max-width: 300px)" />
<source src="http://atest.img.detuyun.cn/demo.jpg?imageView/1/w/400/h/400" media = "only screen and (min-width: 500px)"/>
<source src="http://atest.img.detuyun.cn/demo.jpg?imageView/1/w/800/h/800" media = "only screen and (min-width: 800px)"/>
<img src="http://atest.img.detuyun.cn/demo.jpg?imageView/1/w/400/h/800"/>
</img:adaptive>
工作原理
当你下载adaptiveimages.js后，该js会测试你的屏幕大小，如果是大屏幕，则将大尺寸的元素插入到页面的头部信息中，引导接下来的所有图片、脚本、样式表通过一个虚拟的目录执行。因为该请求要传递到服务器，.htaccess文件会判断该请求是否为响应式图片，然后将该响应式图片的请求立即重定向到其真实尺寸，而非响应式图片的请求则会通过URL重写到适合的地方。
支持的浏览器
Safari (电脑桌面, iPhone, iPad), Chrome, Internet Explorer, Opera. Firefox
不支持JavaScript脚本的浏览器
不支持JavaScript脚本的浏览器或是移动设备会根据src属性接收到原始图片。
服务器端优化
脚本会保留一个cookie值，使你加载之后的页面时能将合适的资源加载进来而不需要加载所有的脚本信息。
3. 图片处理
3.1 概述
无论你的网页是否支持动态图片上传，在上传静态图片或是在社交网站上展示个人图片，你可能需要对图片进行编辑使之能与站点的图像设计相匹配。
得图云提供了优秀的编辑工具，使您能方便地转换任何格式和尺寸的图片。
你可以有多种方法对图片进行裁剪或调整大小。你可以将你的用户指向一个包含图片转换说明的URL地址，然后进行图片编辑。在任何时间，你都能对需要转变的图片进行编辑，也能灵活地创建所有的转变图片，并通过CDN传送给你的用户。
你可以指定图片需要的高度和宽度，定义图片裁剪的方式，并且选择符合你需要的图片格式。你也可以使用我们的基于裁剪技术的脸部识别功能。由于图片转换的操作复杂，你也可以使用控制台程序实现命名转换，你甚至可以对你的图片进行一系列的转换操作。
3.2 图片尺寸调整
改变图片尺寸的操作非常简单：直接传递宽度和高度的参数值。先建立动态资源网址，传递“w”和“h”的参数值。
如图1，下面的URL指向了一张400×300像素的动态创建的图片，它是根据图片名为“sample”，大小为570×400的上传图片进行设置的，现将宽的值设置为400，高的值设置为300：
http://sample.img.detuyun.cn/sample.jpg?imageview/3/w/400/h/300
图1 大小为400×300像素
你可以使用任何比原始图片小的整数值来设置宽度和高度。你不需要按照原图比例改变图片大小。你可以根据需要得到各种尺寸的图片。如果需要，你也可以将设置后的图片导出作为新的图片资源。当你对图片进行设置时，上传的原始图片不会发生任何改变。
你也可以根据百分比来调整图片。通过传递小数值，你能够得到需要的图片。你也可以只设置宽或高中的一个值。
如图2，下面的url指向了一张宽和高分别为原图60%和50%的图片，宽的值设置为0.6，高的值设置为0.5：
http://sample.img.detuyun.cn/sample.jpg?imageview/3/w/0.6/h/0.5
图2 大小为342×200像素
如图3，下面的url指向了一张按原图比例缩小50%的图片，只将宽的值设置为0.5
http://sample.img.detuyun.cn/sample.jpg?imageview/1/w/0.5
图3 大小为285×200像素
图片尺寸调整有三种模式：
模式 1：指定宽，高按比例缩小（数字小于1时，取百分比，如0.5，则取50%）
如图4，设置宽为500，高为100，url地址为http://sample.img.detuyun.cn/sample.jpg?imageview/1/w/500/h/100
图4 大小为500×351像素
模式 2：指定高，宽按比例缩小（数字小于1时，取百分比，如0.5，则取50%）
如图5，设置宽为500，高为100，url地址为http://sample.img.detuyun.cn/sample.jpg?imageview/2/w/500/h/100
图5 大小为143×100像素
模式 3：同时指定宽高，取最大面积（保持原有比例，不变形）
如图6，设置宽的值为500，高的值为100，url地址为http://sample.img.detuyun.cn/sample.jpg?imageview/3/w/500/h/100
图6 大小为500×100像素
注意：
（1）将图片按百分比设置时，设置的值必须小于1大于0
（2）设置的宽或高大于原图的值时，宽或高默认为原图的值
3.3 裁剪模式
当你需要得到上传图片的较小尺寸,你需要考虑如何裁剪才能获得最适合的图片。
通过crop参数，选择你需要的裁剪模式。得图存支持所有标准的裁剪和尺寸调整模式。以下陈列支持的模式及其例子。
（1） 拉伸（scale）
参数：c_scale：图片不保留原有图片比例的情况下，完全按照指定的宽高进行调整，原始图片的所有部分都可见，但会被拉伸或者压缩；
如图7，将图片拉伸为100×150（原图为570×400）
http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_100,h_150,c_scale
图7 大小为100×150
（2） 适应（fit）
参数：c_fit：改变图像的大小，以适应给定的宽度和高度，同时保持原始比例。原始图片的所有部分全部可视，并且转换后的宽高不超过给定的宽高值。然而，为了保持原始比例，实际的宽高可能会比规定值要小。
如图8，将图片的尺寸设置为100×150，为了适应原图的尺寸570×400，最终得到的尺寸为100×70
http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_100,h_150,c_fit
图8 大小为100×70
（3）填充（fill）
参数：c_fill：创建指定宽高的图片，填充整个区域，同时保持原始图片的宽高比例。如果指定的宽高比例与原始比例不同，那么只显示原始图片的一部分。此模式需要配合重力参数进行使用，以确定填充的部位。
如图9，将图片尺寸设置为100×150，得到214×150的填充图片。
http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_100,h_150,c_fill
图9 大小为214×150
（4） 【需要支持】限制（limit）
参数：c_limit：限制模式是用于创建不超过给定的宽度或高度的图像。如果原始图像小于给定的限制，生成的图像和原始图像相同，如果原始图像大于给定的限制，将调整大小并保持图像原始比例（类似于适应模式）
（5） 留白（pad）
参数：c_pad：改变图像大小填充指定的宽高的区域，同时保持图像原始比例，无法填充满的直接留白。此模式需要配合重力参数进行使用，以确定图片的真实填充位置及留白位置
如图10，将图片设置为100×150，得到100×150的有留白的图片
http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_100,h_150,c_pad
图10 大小为100×150
（6） 裁剪（crop）
参数：c_crop：用于从原始图像中获取指定宽高的一部分图像，配合重力参数来确定裁剪的部位。宽高可以通过小于1的数字表示，如0.4表示取原始宽或者高的40%。
如图11，裁剪了一张100×150的图片
http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_100,h_150
图11 大小为100×150
你也可以根据重力参数设置裁剪的位置，如图12
http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_100,h_150,g_south
图12 大小为100×150
你也可以通过设置小于1的小数来截取图片百分比图片，如图13，设置宽高分别为0.6和0.3，即宽为60%，高为30%，从底部开始截取
http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_0.6,h_0.3,g_south
图13 大小为342×120
（7） 固定坐标裁剪（Fixed coordinates cropping）
从原始图像中获取指定坐标且指定宽高的图像，这里需要用到 x,y参数进行定位。
如图14，创建从坐标（120,100）开始截取100×150的图片
http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_100,h_150,x_120,y_100
图14 大小为100×150
3.4 格式转换
上传到得图存的静态或动态图片有许多不同的格式。为了能将图片更好地展示在自己网站上，你也许需要将它们转换格式。
如果你需要展示照片，并且希望能快速地加载，那么你需要图片质量较低的JPG格式。如果你的图片是只有很少几种色彩的绘图，那么GIF格式比较适合。当然，如果你需要展示高质量的背景透明的图片时，PNG格式（24位）格式无疑是最适合的选择。
你可以便捷地将图片改成你想要的格式。得图存目前支持的格式有：JPG,PNG,GIF,WEBP。
参数：type
如图15，将格式为JPG的图片转换PNG格式的图片
http://sample.img.detuyun.cn/sample.jpg?imageview/type/png
图15 sample15.png
如果你想创建一张质量较低的JPG格式的图片（当你需要快速加载快而不追求图片质量时），通过给质量参数q传递数值可以实现。参数值的范围为0（质量最低）~100（质量最高）。
如图16，创建了一张裁剪大小为400×300，图片质量为10的图片
http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_400,h_300/q/10
图16 大小为400×300
你可以发现图片的质量明显降低了。
3.5 图片特效
（1）多种高级滤镜功能
目前已经支持的滤镜效果如下：
1）黑白照效果：只有黑、白两种色彩
参数：monochrome
如图17，创建了一张裁剪大小为400×300的黑白照片
http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_400,h_300/monochrome
图17 大小为400×300
2）炭笔效果：形成炭笔或者铅笔画的效果
参数：charcoal
如图18，创建了一张裁剪大小为400×300的炭笔效果的图片
http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_400,h_300/charcoal
图18 大小为400×300
3）散射毛玻璃效果
参数：spread
如图19，创建了一张裁剪大小为400×300的散射毛玻璃效果的图片
http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_400,h_300/spread
图19 大小为400×300
4）漩涡效果：漩涡以图片的中心作为参照，把图片扭转，形成漩涡的效果
参数：swirl
如图20，创建了一张裁剪大小为400×300的漩涡效果的图片
http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_400,h_300/swirl
图20 大小为400×300
5）凸起效果：照片的四周会有一个5*5的边 参数：raise
如图21，创建了一张具有凸起效果的图片
http://sample.img.detuyun.cn/sample.jpg?imageview/raise
图21 大小为570×400
（2）图片锐化
参数：sharp
http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_400,h_300/sharp
（3）图片质量
参数：q，取值范围1~100
http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_400,h_300/q/10
（4）图片方向
1)图片旋转
参数：rotate，数值：0-360
http://sample.img.detuyun.cn/sample.jpg?imageview/1/w/0.5/rotate/20
2)图片翻转
a. 水平翻转
参数：flop，无值参数
http://sample.img.detuyun.cn/sample.jpg?imageview/1/w/0.5/flop
b. 垂直翻转
参数：flip，无值参数
http://sample.img.detuyun.cn/sample.jpg?imageview/1/w/0.5/flip
（5）文字水印
参数：front
3.6 启用自动webp
参数：autowebp
值：1表示启用 ； 0表示不启用
示例：http://sample.img.detuyun.cn/sample.jpg?imageview/autowebp/1
3.7 参数特效
| 参数 | URL参数 | 作用 | 参数值 | 意义 | 例子 | 描述 |
| 模式 | 设置调整图片尺寸的模式 | 1 | 模式1，指定宽，高按比例缩小 | http://sample.img.detuyun.cn/sample.jpg?imageview/1/w/500/h/100 | 设置模式1下宽为500px，高为100px的图片 | |
| 2 | 模式2，指定高，宽按比例缩小 | http://sample.img.detuyun.cn/sample.jpg?imageview/2/w/500/h/100 | 设置模式2下宽为500px，高为100px的图片 | |||
| 3 | 模式3，同时指定宽高，取最大面积 | http://sample.img.detuyun.cn/sample.jpg?imageview/3/w/500/h/100 | 设置模式3下宽为500px，高为100px的图片 | |||
| 宽 | w | 设置图片宽度 | 范围1~原图宽的整数（如400 | 图片宽度的像素值 | http://sample.img.detuyun.cn/sample.jpg?imageview/3/w/400/h/300 | 设置模式3下宽为400px，高为300px的图片 |
| <1且>0的小数（如0.6） | 图片宽度的百分比 | http://sample.img.detuyun.cn/sample.jpg?imageview/3/w/0.6/h/0.5 | 设置模式3下宽度为原宽度的60%，高为原高度的50%的图片 | |||
| 高 | h | 设置图片高度 | 范围1~原图高的整数（如300） | 图片高度的像素值 | http://sample.img.detuyun.cn/sample.jpg?imageview/3/w/400/h/300 | 设置模式3下宽为400px，高为300px的图片 |
| <1且>0的小数（如0.6） | 图片高度的百分比 | http://sample.img.detuyun.cn/sample.jpg?imageview/3/w/0.6/h/0.5 | 设置模式3下宽度为原宽度的60%，高为原高度的50%的图片 | |||
| 裁剪 | crop | 对图片进行裁剪 | crop | 默认裁剪 | http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_100,h_150 | 截取原图中间部分宽为100px，高为150px的图片 |
| c_scale | 拉伸 | http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_100,h_150,c_scale | 将图片尺寸设置成给定的尺寸，原图所有部分都可见，但是可能发生变形 | |||
| c_fit | 适应 | http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_100,h_150,c_fit | 创建一张适应给定宽高的图片，同时保持原始比例，原图所有部分都可见，但是宽高可能比给定值小 | |||
| c_fill | 填充 | http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_100,h_150,c_fill | 创建一张适应给定宽高的图片，并填充整个区域，同时保持原图的宽高比例。若给定宽高比例与原图不同，则显示原图的部分。 | |||
| c_pad | 留白 | http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_100,h_150,c_pad | 改变图像大小，填充指定宽高的区域，同时保持原图比例，无法填充满的直接留白。 | |||
| c_crop | 裁剪 | http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_100,h_150,c_crop | 用于从原始图片中截取指定宽高的一部分图片 | |||
| 重力参数 | g | 指定获取图片的方位 | g_north | 从顶部开始截取 | http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_0.5,h_0.5,c_crop,g_north | 创建一张从顶部开始截取的宽高分别为原图50%的图片 |
| g_south | 从底部开始截取 | http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_0.5,h_0.5,c_crop,g_south | 创建一张从底部开始截取的宽高分别为原图50%的图片 | |||
| g_east | 从右边开始截取 | http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_0.5,h_0.5,c_crop,g_east | 创建一张从右边开始截取的宽高分别为原图50%的图片 | |||
| g_west | 从左边开始截取 | http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_0.5,h_0.5,c_crop,g_west | 创建一张从左边开始截取的宽高分别为原图50%的图片 | |||
| g_center | 截取中间部分 | http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_0.5,h_0.5,c_crop,g_center | 创建一张从中间开始截取的宽高分别为原图50%的图片 | |||
| 坐标 | x | 指定获取图片的位置，坐标原点在图片中心 | 范围：-(原图宽+裁剪宽)/2 ~ +(原图宽+裁剪宽)/2 | 指定水平位置，正方向向右 | http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_100,h_150,c_crop,x_120,y_100 | 创建一张从坐标（120,100）开始截取的100×150px的图片 |
| y | 范围：-(原图高+裁剪高)/2 ~ +(原图高+裁剪高)/2 | 指定垂直位置，正方向下 | ||||
| 格式 | type | 转换图片格式 | jpg | 将图片转换为jpg格式 | http://sample.img.detuyun.cn/sample.jpg?imageview/type/jpg | 创建一张jpg格式的图片 |
| png | 将图片转换为png格式 | http://sample.img.detuyun.cn/sample.jpg?imageview/type/png | 创建一张png格式的图片 | |||
| gif | 将图片转换为gif格式 | http://sample.img.detuyun.cn/sample.jpg?imageview/type/gif | 创建一张gif格式的图片 | |||
| webp | 将图片转换为webp格式 | http://sample.img.detuyun.cn/sample.jpg?imageview/type/webp | 创建一张webp格式的图片 | |||
| 黑白效果 | monochrome | 设置图片黑白效果 | monochrome | 设置成黑白效果 | http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_400,h_300/monochrome | 创建一张有黑白效果的图片 |
| 炭笔效果 | charcoal | 将图片设置为炭笔效果 | charcoal | 设置炭笔效果 | http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_400,h_300/charcoal | 创建一张有炭笔效果的图片 |
| 散射毛玻璃效果 | spread | 将图片设置为散射毛玻璃效果 | spread | 设置散射毛玻璃效果 | http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_400,h_300/spread | 创建一张有散射毛玻璃效果的图片 |
| 漩涡效果 | swirl | 将图片设置为漩涡效果 | swirl | 设置漩涡效果 | http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_400,h_300/swirl | 创建一张有漩涡效果的图片 |
| 凸起效果 | raise | 将图片设置为凸起效果 | raise | 设置凸起效果 | http://sample.img.detuyun.cn/sample.jpg?imageview/raise | 图片的四周将出现一个5×5px的边 |
| 锐化 | sharp | 将图片锐化 | sharp | 设置图片锐化效果 | http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_400,h_300/sharp | 创建一张有锐化效果的图片 |
| 质量 | q | 设置图片质量 | 取值范围1~100 | 取值越大，图片越清晰 | http://sample.img.detuyun.cn/sample.jpg?imageview/crop/w_400,h_300/q/10 | 裁剪一张400×300px，质量为10的图片 |
| 旋转 | rotate | 将图片旋转一定角度 | 取值范围0~360 | 按顺时针方向旋转 | http://sample.img.detuyun.cn/sample.jpg?imageview/1/w/0.5/rotate/20 | 创建一张顺时针旋转20度的图片 |
| 翻转 | flop | 将图片进行翻转处理 | flop | 水平翻转 | http://sample.img.detuyun.cn/sample.jpg?imageview/1/w/0.5/flop | 创建一张水平翻转的图片 |
| flip | flop | 垂直翻转 | http://sample.img.detuyun.cn/sample.jpg?imageview/1/w/0.5/flip | 创建一张垂直翻转的图片 | ||
| 水印 | font | 给图片添加文字水印 | c_(0x000000~0xffffff或对应的英文颜色名) | 文字颜色 | http://sample.img.detuyun.cn/sample.jpg?imageview/1/w/0.6/font/c_pink,s_40,t_detu,x_10,y_40 | 创建一张大小为原图60%的图片，并添加文字为“detu”、粉红色、40像素大小的水印 |
| s_（像素值） | 文字大小 | |||||
| x_(0~给定图片宽度) | 水印的水平位置 | |||||
| y_(0~给定图片高度) | 水印的垂直位置 | |||||
| image | 添加图片水印 | url | 水印图片地址 | http://sample.img.detuyun.com/sample.jpg?imageView/image/atest%2fpro-3d.png/dissolve/100/gravity/NorthEast/dx/0/dy/0 | 创建了一张添加了图片水印效果的图片，透明度为100，放置位置为右上，横轴边距和纵轴边距都为0 | |
| dissolve | 透明度（0~100） | |||||
| gravity（方位名称） | 水印图片方位 | |||||
| dx（0~图片宽度） | 横轴边距 | |||||
| dy（0~图片高度） | 纵轴边距 | |||||
| 自动webp | autowebp | 启用 | 1 | 启用自动webp | http://sample.img.detuyun.cn/sample.jpg?imageview/autowebp/1 | 启用自动webp功能 |
| 关闭 | 0 | 关闭自动webp | http://sample.img.detuyun.cn/sample.jpg?imageview/autowebp/0 | 关闭自动webp功能 | ||