图片跨域代理| 微信| 跨域|images.weserv.nl/docs/

最新推荐文章于 2025-05-06 13:55:58 发布
最新推荐文章于 2025-05-06 13:55:58 发布
阅读量1.9k 收藏 2
点赞数 1
文章标签： 前端 小程序
原文链接：https://images.weserv.nl/docs
版权

产品介绍

wsrv.nl 是一种图像缓存和调整大小服务。我们的服务器会调整您的图像大小，将其缓存到全球，然后显示出来。

  • 我们支持多种图像格式，包括 JPEG、PNG、BMP、GIF、TIFF、WebP、PDF 和 SVG。甚至还支持动画 WebP 和 GIF 图像。
  • 我们支持 IPv6，提供双栈服务，并支持仅限 IPv6 的源主机。
  • 对于通过 TLS/SSL 的安全连接，可以使用 https://wsrv.nl/。这对于在 HTTPS 网站上嵌入 HTTP 图像非常有用。可以通过在主机名前面加上 https:// 来使用 HTTPS 源主机。
  • CDN 由 Cloudflare 提供。图像被缓存并直接从200+ 全球数据中心。这确保了最快的加载时间和最佳性能。

How it works 运作方式

传递图像 URL 和一组参数。然后，wsrv.nl 将获取图像，调整其大小，缓存并显示它。下次请求到来时，它将提供缓存的版本。

<img src="//wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&w=300&h=300">

快速参考

Quick reference

NameGETDescription
Widthw设置图像的宽度（以像素为单位）[info][width]
Heighth设置图像的高度（以像素为单位）[info][height]
Device pixel ratiodpr设置图像的输出密度[info][dpr]
Fitfit设置图像如何拟合其目标尺寸[info][fit]
Contain backgroundcbg设置使用 &fit=contain 时的背景颜色。[info][contain-bg]
Without enlargementwe不要放大图像[info][without-enlargement]
Alignment positiona设置图像的对齐方式[info][alignment-position]
Rectangle cropcrop将图像裁剪为特定尺寸[info][rectangle-crop]
Pre-resize cropprecrop调整大小前的作物行为[info][rectangle-crop]
Trimtrim修剪所有边缘的“无聊”像素[info][trim]
Maskingmask从预定义列表中设置掩码类型[info][mask]
Mask trimmtrim从蒙版中删除剩余的空格[info][mask-trim]
Mask backgroundmbg设置蒙版的背景色[info][mask-bg]
Flipflip围绕垂直 Y 轴翻转图像[info][flip]
Flopflop围绕水平 X 轴翻移图像[info][flop]
Rotationro旋转图像[info][rotation]
Rotation backgroundrbg设置以任意角度旋转时的背景颜色[info][rotation-bg]
Backgroundbg设置图像的背景色[info][background]
Blurblur为图像添加模糊效果[info][blur]
Contrastcon调整图像对比度[info][contrast]
Filterfilt对图像应用滤镜效果[info][filter]
Gammagam调整图像灰度系数[info][gamma]
Modulatemod使用亮度、饱和度和色调旋转来转换图像[info][modulate]
Saturationsat调整图像的饱和度[info][saturation]
Hue rotationhue对图像应用色相旋转[info][hue-rotation]
Sharpensharp锐化图像[info][sharpen]
Tinttint为图像着色[info][tint]
Adaptive filteraf一种可以在压缩之前应用的筛选算法[info][adaptive-filter]
Base64 (data URL)encoding对要直接在 -tag 中使用的 src= 图像进行编码[info][base64]
Cache-Controlmaxage浏览器应缓存图像多长时间[info][cache-control]
Compression levellzlib 压缩级别[info][compression-level]
Default imagedefault当加载图像时出现问题，重定向到默认图像[info][default]
Filenamefilename指定文件名[info][filename]
Interlace / progressiveil向 GIF 和 PNG 添加隔行扫描。JPEG 变得渐进式[info][interlace-progressive]
Number of pagesn选择要呈现的页数[info][n-pages]
Outputoutput将图像编码为特定格式[info][output]
Pagepage加载给定页面[info][page]
Qualityq定义图像的质量[info][quality]

Size 大小

控制需要调整图像大小的方式。您可以同时使用和 &w= &h= 参数，也可以仅使用其中一个参数：另一个维度会自动更新。

Width &w= 宽度 &w=

设置图像的宽度（以像素为单位）

<img src="//wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&w=300">

在这里插入图片描述

Height &h= 高度 &h=

设置图像的高度（以像素为单位）

<img src="//wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&h=300">

在这里插入图片描述

设备像素比 &dpr=

设备像素比用于在 CSS 像素和设备像素之间轻松转换。这使得在各种设备上以正确的像素密度显示图像成为可能，例如带有 Retina 显示屏的 Apple 设备和 Android 设备。必须指定宽度和/或高度，此参数才能正常工作。使用介于 和 8 之间的 1 值。

<img src="//wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&h=144&dpr=2">

在这里插入图片描述

Fit

控制图像如何拟合到其目标尺寸。以下是几个示例。其中一些值基于 object-fit CSS 属性。

Inside &fit=inside 内部 &fit=内部

默认。 保留纵横比，将图像大小调整为尽可能大，同时确保其尺寸小于或等于指定的尺寸。

<img src="//wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&w=300&h=300&fit=inside">

在这里插入图片描述

Outside &fit=outside Outside &fit=外部

保留纵横比，将图像大小调整为尽可能小，同时确保其尺寸大于或等于指定的尺寸

<img src="//wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&w=300&h=300&fit=outside">

在这里插入图片描述

Cover &fit=cover Cover &fit=封面

裁剪图像以覆盖两个提供的尺寸。

<img src="//wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&w=300&h=300&fit=cover">

在这里插入图片描述

Fill &fit=fill Fill &fit=填充

忽略输入的纵横比，并拉伸到两个提供的尺寸。

<img src="//wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&w=300&h=300&fit=fill">

在这里插入图片描述

Contain &fit=contain Contain &fit=包含

嵌入到两个提供的维度中。可以使用 &cbg= 用背景色填充剩余空间。有关支持的颜色格式，请参阅此处。
更多信息： Issue #80 - 需要适合的信箱图像。

<img src="//wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&w=300&h=300&fit=contain&cbg=black">

在这里插入图片描述

没有放大 &we

如果宽度或高度已经小于指定的尺寸，请不要放大。

<img src="//wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&w=300&h=300&fit=inside&we">

Crop 作物

控制图像的对齐方式。

对齐位置 &a=

设置 &fit=cover 或 &fit=contain 时应如何对齐图像。还应指定 &w= 和 &h= 参数。

Position-based 基于位置

控制裁剪的起始位置。设置后 &fit=contain ，它决定了图像在其框内的位置。
有效参数：

  • center: default
  • top
  • right
  • bottom
  • left
  • top-left
  • bottom-left
  • bottom-right
  • top-right
    有关详细信息，请参阅我们的 GitHub 问题跟踪器上的建议：问题 #24 - 对齐。
<img src="//wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&w=300&h=300&fit=cover&a=top">

在这里插入图片描述

焦点 &a=focal

您可以使用焦点更具体地了解对齐方式。这可以使用水平 （ ） 和垂直 （ ） 偏移十进制值（介于 和 之间（包括 0.0 和 1.0 之间的浮点数 &fpx= &fpy= ）进行设置。默认值为 0.5 ，或图像的中心。

<img src="//wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&w=300&h=300&fit=cover&a=focal&fpy=0.45">

在这里插入图片描述

智能裁剪 &a=[entropy,attention]

一种基于策略的实验性方法，通过删除无聊的部分来裁剪图像。这仅适用于 &fit=cover .
详细信息：问题 #90 - 添加对智能裁剪的支持。

  • entropy: 专注于具有最高Shannon熵的区域。
  • attention: 专注于具有最高亮度频率、颜色饱和度和皮肤色调存在的区域
<img src="//wsrv.nl/?url=wsrv.nl/puppy.jpg&w=300&h=300&fit=cover&a=attention">

在这里插入图片描述

矩形裁剪 &c[x,y,w,h]=

在任何其他调整大小操作后将图像裁剪为特定尺寸。

TIP
You can use &precrop, for a pre-resize crop behaviour. See Issue #176 - Combine cropping with resizing for more information.
您可以使用 &precrop ，来预调整裁剪行为的大小。有关详细信息，请参阅问题 #176 - 将裁剪与调整大小相结合。

<img src="//wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&cx=680&cy=500&cw=300&ch=300">

在这里插入图片描述

Trim &trim=

从包含与左上角像素相似的值的所有边缘修剪“无聊”像素。在任何调整大小操作之前进行修整。使用 介于 和 254 之间的 1 值来定义容差级别，以修剪掉相似的颜色值。也可以指定 just &trim ，默认为容差级别为 10
更多信息： Issue #39 - 能够删除黑/白空格。

<img src="//wsrv.nl/?url=wsrv.nl/transparency_demo.png&w=300&trim=10">

在这里插入图片描述

Mask 面具

。。。

Orientation 取向

。。。

Adjustment 调整

Format 格式

控制图像的输出属性。

自适应滤波器 &af

使用自适应行筛选来减小 PNG 文件大小。仅当输出图像为 时， png 这才有效。

Base64（数据 URL）&encoding=base64

对要直接在 -tag 的 src= 中使用的图像进行编码。使用此链接查看输出结果。

More info: Issue #59 - Return image base64 encoded.

<img src="//wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&crop=100,100,720,530&encoding=base64">

缓存控制 &maxage=

定义浏览器应缓存图像的时间。这将更改 max-age Cache-Control HTTP 标头。
我们将“远期到期”定义为默认 1 年。可以使用以下后缀以天、周、月和年为单位指定持续时间：

<img src="//wsrv.nl?url=wsrv.nl/lichtenstein.jpg&w=100&maxage=31d">

zlib 压缩级别。使用介于 （no Deflate） 和 9 （maximum Deflate） 之间的 0 值。缺省值为 6 。仅当输出图像为 时， png 这才有效。

默认图片 &default=

如果加载图像时出现问题，则会显示错误。但是，可能需要传递默认图像，而不是向用户提供损坏的图像。
详细信息：问题 #37 - 如果找不到图像的 URL，则返回默认图像。
URL 不得包含 default 查询字符串（如果包含，则将忽略）。

<img src="//wsrv.nl/?url=example.org/noimage.jpg&default=ssl:wsrv.nl%2F%3Furl%3Dwsrv.nl/lichtenstein.jpg%26w%3D300">

在这里插入图片描述

文件名 &filename=

指定标头中返回的 Content-Disposition 文件名。文件名只能包含字母数字字符。
详细信息：问题 #122 - 指定文件名。

隔行扫描 / 逐行扫描 &il

将隔行扫描添加到 GIF 和 PNG。JPEG 变得渐进。
详细信息：问题 #50 - 添加参数以使用渐进式 JPEG。

<img src="//wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&w=300&il">

在这里插入图片描述

Number of pages &n=

选择要呈现的页数。缺省值为 1 。设置为 -1 表示“直到文档末尾”。

TIP
-1 will be useful if you need to resize an animated WebP or GIF image.
-1 如果您需要调整动画 WebP 或 GIF 图像的大小，将很有用。

<img src="//wsrv.nl/?url=wsrv.nl/banana.webp&h=300&output=gif&n=-1">

在这里插入图片描述

输出 &output=

将图像编码为特定格式。接受 jpg 、 、 、 png gif tiff webp 或 json 。如果未给出任何参数，则将遵循原始图像格式。
详细信息：问题 #62 - 格式转换。

<img src="//wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&w=300&output=webp">

在这里插入图片描述

Page &page=

加载给定页面（用于 PDF、TIFF 和多尺寸 ICO 文件）。该值从零开始编号。对于多分辨率图像，可用于 -1 获取最大页面和 -2 最小页面。

质量 &q=

定义图像的质量。使用介于 和 100 之间的 1 值。缺省值为 80 .仅当输出图像为 jpg 或 tiff webp 时，这才有效。

<img src="//wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&w=300&q=20">

在这里插入图片描述

slongzhang_
关注
images：images.weserv.nl的源代码，将在您自己的服务器上使用
02-05
images：images.weserv.nl的源代码，将在您自己的服务器上使用
推荐一个高效能的图片处理利器：weserv/images
gitblog_00099的博客
05-13 660
推荐一个高效能的图片处理利器：weserv/images imagesSource code of wsrv.nl (formerly images.weserv.nl), to be used on your own server(s).项目地址:https://gitcode.com/gh_mirrors/ima/images weserv/images 是一个强大的开源图片服务，源自wsr...
imageproxy图片代理服务
nishuihan_liang的博客
07-13 1474
imageproxy是一个用go编写的缓存图片代理服务器。其特点：基本图像调整，例如调整大小、裁剪和旋转使用允许的主机列表或请求签名 (HMAC-SHA256) 进行访问控制支持 jpeg、png、webp（仅解码）、tiff 和 gif 图像格式（包括动画 gif）在内存中、磁盘上或使用 Amazon S3、Google Cloud Storage、Azure Storage 或 Redis 进行缓存易于部署，因为它是纯粹的。
如何跨域调用微信图片
chjuny的博客
12-22 1210
解决微信图片跨域调用
Java 爬虫微信公众号详情，并且破解微信图片跨域问题
流式计算它的年龄
06-17 803
第一步先爬取文章 public class SpiderUtil { // 微信公众号文章域名 private static final String WX_DOMAIN = "https://mp.weixin.qq.com"; // 文章返回前端统一key常量 private static final String KEY_TITLE = "title"; // 文章标题 private static final String KEY_COVER_URL =
iframe 嵌入第三方网站跨域，此图片来自微信公众平台 未经允许不可引用
aaagjy的博客
12-17 3649
1.使用cors-anywhere跨域问题 <iframe id="iFrame" style="width: 100%; height: 100%" frameborder="0" /> getUrl(url) { const http = window.location.protocol === 'http:' ? 'http:' : 'https:' // 调用跨域API let realurl = http + '//cors-anywhere.herokuapp.com/
探索高效图片服务：weserv/images深度解析与应用推荐
gitblog_00872的博客
08-23 553
探索高效图片服务：weserv/images深度解析与应用推荐 imagesSource code of wsrv.nl (formerly images.weserv.nl), to be used on your own server(s).项目地址:https://gitcode.com/gh_mirrors/ima/images 在数字时代，图片优化已成为提升网站性能和用户体验不可或缺的...
解决微信头像跨域问题
瑾析编程
09-29 3139
背景介绍 微信头像链接：http://thirdwx.qlogo.cn/mmopen/vi_32/xxxxxx 项目域名：http://xxx.xxx.com 现在要将页面生成图片，会报跨域问题 解决方案 将微信头像转成BASE64的文件 具体实现 JAVA 将图片URL转成BASE64 import java.io.ByteArrayOutputStream; import java.i...
vue.js使用代理和使用Nginx来解决跨域的问题
11-27
使用Nginx 反向代理解决跨域问题（vue.js使用代理去掉vue.js因为跨域而触发的options请求） 我们的项目还是需要node.js作为容器的 一、Windows 下安装Nginx （官网下载稳定版http://nginx.org/en/download.html） 二...
前后端分离后解决微信授权跨域、微信H5授权登录跨域的问题解决
weixin_51884295的博客
04-02 6537
前言： 我们之前做的微信授权登录流程是： 1.第一步：用同意授权，并获取code 2.第二步：通过code换取网页授权access_token 3.第三步：刷新access_token（如果需要） 4.第四步：拉取用户信息(需scope为 snsapi_userinfo) 以上操作都是在同源策略下完成是没有问题的 解决方案： 如果前后端分离，前端调后端接口获取授权信息的话，你想一步到位，那就会有跨域问题如下图 一步到位的流程如下： A前端->B后端拉取授权信息->引导
基于vue2的图片懒加载项目后台代理百度图片api接口实现滚动懒加载当前视图区域加载
08-11
基于vue2的图片懒加载项目，后台代理百度图片api接口，实现滚动懒加载，当前视图区域加载
详解vue-cli项目开发/生产环境代理实现跨域请求
01-19
跨域的方法很多，通常都需要后台配置，不过vue-cli创建的项目，可以直接利用node.js代理服务器，通过修改vue proxyTable接口实现跨域请求。在vue-cli项目中的config文件夹下的index.js配置文件中，修改前的dev： ...
vue-socket.io跨域问题有效解决方法
10-15
4. `changeOrigin: true`意味着在代理请求时，将会修改`Origin`头部，使得目标服务器认为请求来自其自身，从而允许跨域。 注意，以上配置仅适用于开发环境。在生产环境中，你需要确保你的后端服务器正确配置了CORS...
微信公众号文章跨域展示
2byte
05-16 2250
帮朋友做了个整站，更新新闻的时候他用不惯我写的后台，老是发微信公众号，让我帮忙发到网站上，我觉得太麻烦了，就写了个调用的方法。 微信公众号自带保护，不让跨域访问。 只能用http://cors-anywhere.herokuapp.com/跨域访问接口。 http://cors-anywhere.herokuapp.com/+公众号文章地址就可以得到文章的源代码，加以正则匹配就可以得到文章的标题，...
使用OpenResty进行图片代理（破解反盗链）
Fouy_风度玉门。
07-16 1557
今天在使用scrapy爬取网站的时候，因为网站的容量有限，不能拉取图片进行存储。但是源站的图片又存在着反盗链的限制，所以利用OpenResty做了一个图片代理的接口，实现了破解反盗链的功能。（如果你要问我为什么使用OpenResty来做，我会告诉你因为网站就是用OpenResty开发的） lua-resty-http 在OpenResty上面使用代理时，一般情况下会用proxy_pass或...
vue项目跨域问题（图片跨域）devServer.proxy代理失效时，nginx反向代理解决跨域问题
qq_44760347的博客
03-09 4234
vue项目跨域问题（图片跨域）devServer.proxy代理失效时，nginx反向代理解决跨域问题
推荐文章：imageproxy - 强大的图像处理代理服务器
gitblog_00017的博客
08-13 755
推荐文章：imageproxy - 强大的图像处理代理服务器 imageproxyA caching, resizing image proxy written in Go项目地址:https://gitcode.com/gh_mirrors/im/imageproxy 项目介绍 imageproxy 是一款用 Go 语言编写的缓存图像代理服务器。它提供了丰富的图像处理功能，包括调整大小、裁剪、...
nginx代理图片服务器
weixin_43186009的博客
01-26 4928
nginx config文件中配置图片的代理路径 #nginx代理图片服务器 root 配置物理路径 hosts设置127.0.0.1 image.leyou.com server { listen 80; server_name image.leyou.com; proxy_set_header X-Forwarded-Host $host; proxy_set_header X-Forwarded-Server $host; proxy_set_header X-
基于WebUI的深度学习模型部署与应用实践
最新发布
Programming Talk
05-06 669
随着深度学习技术的快速发展，如何将训练好的模型快速部署并提供友好的用户交互界面成为许多AI项目落地的关键。WebUI(Web User Interface)作为一种轻量级、跨平台的解决方案，正被广泛应用于各类AI模型的部署场景。本文将详细介绍基于Python生态构建WebUI的技术方案，包含完整的代码实现，并探讨在实际项目中的应用实践。本文详细介绍了基于Gradio构建深度学习WebUI的完整流程，从基础实现到生产部署，涵盖了实际项目中的关键技术和优化方案。二、基于Gradio的模型部署实践。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值