有些小需求需要将 url 转成图片, 直接使用 google的 api即可
https://developers.google.com/speed/docs/insights/v2/reference/pagespeedapi/runpagespeed
Request
HTTP request
GET https://www.googleapis.com/pagespeedonline/v2/runPagespeed
Parameters
Required query parameters | ||
url |
string |
The URL to fetch and analyze |
Optional query parameters | ||
filter_third_party_resources |
boolean |
Indicates if third party resources should be filtered out before PageSpeed analysis. (Default: false ) |
locale |
string |
The locale used to localize formatted results |
rule |
string |
A PageSpeed rule to run; if none are given, all rules are run |
screenshot |
boolean |
Indicates if binary data containing a screenshot should be included (Default: false ) |
strategy |
string |
The analysis strategy to use Acceptable values are:
|
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>IIIII</title> <style> body { /*background: #BADA55;*/ } </style> <script src="//cdn.bootcss.com/jquery/1.11.2/jquery.js"></script> </head> <body> <ul> <img data-url="http://vb2005xu.iteye.com"/> <img data-url="https://www.oschina.net/p/rocket-chat"/> <img data-url="http://alloyteam.github.io/AlloyTimer/"/> </ul> </body> <script> $(window).load(function() { $('img[data-url]').each(function() { $.ajax({ url: 'https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=' + $(this).data('url') + '&screenshot=true&strategy=mobile', context: this, type: 'GET', dataType: 'json', success: function(data) { data = data.screenshot.data.replace(/_/g, '/').replace(/-/g, '+'); $(this).attr('src', 'data:image/jpeg;base64,' + data); } }); }); }); </script> </html>
相关推荐
前端程序员不愿意(技术不行)使用canvs截取图片分享到微信朋友圈 准备工作 *unix系统安装可执行文件,phantomjs添加到系统环境变量 检验phantomjs安装是否成功,在终端中运行$: phantomjs不报错,则安装成功 安装go ...
cropper非常强大,做出的图片裁剪插件不失真,可用于裁剪图片,banner,头像等等
给盒子设置边框后背景颜色和背景图片都会延伸到边框下面(其本质是系统自动从图片上截取一部分拼接到border下面)。 常用的背景图片: .jpg 不支持动画,不支持透明,渐进显示,颜色丰富,有损 .png 不支持动画,...
另外,您可以使用类的工具截取屏幕截图。 FireShot有免费选项,因此您无需购买。 然后根据需要裁剪/优化/编辑图像,将其添加到项目中,并更新上图中的文件路径。 注意:添加屏幕快照时,请删除此注释和上面的段落...
前端导师-满足着陆页解决方案 这是“一种解决方案。 前端导师挑战可帮助您构建现实的项目,从而提高您的编码技能。 目录 注意:删除此注释并根据您保留的内容更新目录。...解决方案URL:在此处添加解决方案URL 实
另外,您可以使用类的工具截取屏幕截图。 FireShot有免费选项,因此您无需购买。 然后根据需要裁剪/优化/编辑图像,将其添加到项目中,并更新上图中的文件路径。 注意:添加屏幕快照时,请删除此注释和上面的段落...
前端向导-具有两列布局解决方案的Fylo登录页面 这是的解决方案,它。 前端导师挑战可帮助您构建现实的项目,从而提高您的编码技能。 目录 注意:删除此注释并根据您保留的内容更新目录。...解决方案URL:
前端导师-单一价格网格组件解决方案这是的解决方案。 前端导师挑战可帮助您构建现实的项目,从而提高您的编码技能。目录注意:删除此注释并根据您保留的内容更新目录。...链接解决方案URL: 实时站点URL:我的过程
发现-史密尔这是的解决方案。...吞噬者解决方案URL: 实时站点URL:我的过程内置 -JS库 -React框架-PWA 适用于样式适用于地图我学到的是Nossos Maiores Aprendizados 要查看如何添加代码段,请参见下文: < h1> Some ...
另外,您可以使用FireShot之类的工具截取屏幕截图。 FireShot有免费选项,因此您无需购买。 然后根据需要裁剪/优化/编辑图像,将其添加到项目中,并更新上图中的文件路径。 注意:添加屏幕快照时,请删除此注释和...
5、播放最前端:支持播放影片时对于播放器显示在屏幕最前端的设置,您可在看影片的时候进行其他电脑操作。 6、兼容主流影视媒体格式播放:兼容主流影视媒体格式文件的本地播放,并不断更新中… 7、边下边播功能:...
前端导师-Typemaster启动前登陆页面解决方案这是的解决方案。 前端导师挑战可帮助您构建现实的项目,从而提高您的编码技能。... 链接解决方案URL:在此处添加解决方案URL 实时站点URL:在此处添加实时站点URL
另外,您可以使用FireShot之类的工具截取屏幕截图。 FireShot有免费选项,因此您无需购买。 然后根据需要裁剪/优化/编辑图像,将其添加到项目中,并更新上图中的文件路径。 注意:添加屏幕快照时,请删除此注释和...
前端导师-个人资料卡组件解决方案这是的的解决方案。 前端导师挑战可帮助您构建现实的项目,从而提高您的编码技能。... 链接解决方案URL:在此处添加解决方案URL 实时站点URL:在此处添加实时站点URL 我的过程
前端导师-个人资料卡组件解决方案这是的的解决方案。 前端导师挑战可帮助您构建现实的项目,从而提高您的编码技能。... 链接解决方案URL:在此处添加解决方案URL 实时站点URL:在此处添加实时站点URL 我的过程
另外,您可以使用类的工具截取屏幕截图。 FireShot有免费选项,因此您无需购买。 然后根据需要裁剪/优化/编辑图像,将其添加到项目中,并更新上图中的文件路径。 注意:添加屏幕快照时,请删除此注释和上面的段落。...
另外,您可以使用类的工具截取屏幕截图。 FireShot有免费选项,因此您无需购买。 然后根据需要裁剪/优化/编辑图像,将其添加到项目中,并更新上图中的文件路径。 注意:添加屏幕快照时,请删除此注释和上面的段落...
前端导师-满足着陆页解决方案 这是“一种解决方案。 前端导师挑战可帮助您构建现实的项目,从而提高您的编码技能。 目录 注意:删除此注释并根据您保留的内容更新目录。...解决方案URL:在此处添加解决方案URL 实
另外,您可以使用类的工具截取屏幕截图。 FireShot有免费选项,因此您无需购买。 然后根据需要裁剪/优化/编辑图像,将其添加到项目中,并更新上图中的文件路径。 注意:添加屏幕快照时,请删除此注释和上面的段落...
另外,您可以使用类的工具截取屏幕截图。 FireShot有免费选项,因此您无需购买。然后根据需要裁剪/优化/编辑图像,将其添加到项目中,并更新上图中的文件路径。注意:添加屏幕快照时,请删除此注释和上面的段落。...