您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

javascript - 请教这些图片效果是如何做到的

2024/3/1 17:52:02发布15次查看
http://www.louisvuitton.cn/im...
打开上面图片地址,设置wid=500&hei=500可以改变图片的大小,请问是何种技术做的,谢谢。
回复内容: http://www.louisvuitton.cn/im...
打开上面图片地址,设置wid=500&hei=500可以改变图片的大小,请问是何种技术做的,谢谢。
从响应头看是服务端生成的,所以不是通过页面js控制的;后端根据url参数实时生成图片(比如gd库)
nginx图片裁剪,我以前遇到过,见这里
cdn
之前用过阿里云的, 云端处理图片, 在你传入参数之后, 根据参数对图片进行处理. 但图片必须是在服务器中.
https://www.aliyun.com/produc...
再php下有图片处理gd 这个可以做到处理图片大小的问题 创建一个空图层 然后把图片复制进去 生成 输出 就可以了
nginx对图片进行裁剪,配置里面提供了图片尺寸
如果你使用的是php的话,这里有1个项目就是关于这方面的可以直接拿去使用基于url的轻量级图片处理库
在服务器端取的传递的参数 根据相应属性生成一个 标签返回到前台
比如

给图片加上相应属性
服务器直接设置输出类型res.header('content-type', 'image/jpg');
比如下面这张图片,其地址为:http://bing.ioliu.cn/v1?w=500...
实现代码:https://github.com/xcss/bing/...
当然,上面是用nodejs写的,你想要的php版本也有:https://github.com/xcss/bing/...
/* * 直接输出图片到页面 */ function outputpic($url,$w,$h){ if($w&&$h){ $url = str_replace('1920x1080',$w.'x'.$h,$url); } header('content-type:image/jpeg'); $ch = curl_init(); curl_setopt($ch, curlopt_url, $url); curl_setopt($ch, curlopt_returntransfer, 0); curl_setopt($ch, curlopt_httpheader, array( 'user-agent: mozilla/5.0 (windows nt 6.2) applewebkit/537.36 (khtml, like gecko) chrome/34.0.1847.137 safari/537.36' )); curl_setopt($ch, curlopt_timeout,0);//忽略超时 curl_setopt($ch, curlopt_nobody, false); $str = curl_exec($ch); curl_close($ch); }
注:nodejs版本实现的是通过七牛云存储的图片处理实现的,传送门:http://developer.qiniu.com/co...
写了一串关于前端自适应图片大小的回答。写完才发现审错题了。。。
楼上说得对! ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄
什么gd库啊,nginx裁剪,有毛关系,不就是对不同的参数输出不同的图片吗?哪有什么技术可言?
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product