有些小需求需要将 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、边下边播功能：...
另外，您可以使用FireShot之类的工具截取屏幕截图。 FireShot有免费选项，因此您无需购买。 然后根据需要裁剪/优化/编辑图像，将其添加到项目中，并更新上图中的文件路径。 注意：添加屏幕快照时，请删除此注释和...
前端导师-Typemaster启动前登陆页面解决方案这是的解决方案。 前端导师挑战可帮助您构建现实的项目，从而提高您的编码技能。... 链接解决方案URL：在此处添加解决方案URL 实时站点URL：在此处添加实时站点URL
前端导师-个人资料卡组件解决方案这是的的解决方案。 前端导师挑战可帮助您构建现实的项目，从而提高您的编码技能。... 链接解决方案URL：在此处添加解决方案URL 实时站点URL：在此处添加实时站点URL 我的过程
前端导师-个人资料卡组件解决方案这是的的解决方案。 前端导师挑战可帮助您构建现实的项目，从而提高您的编码技能。... 链接解决方案URL：在此处添加解决方案URL 实时站点URL：在此处添加实时站点URL 我的过程
另外，您可以使用类的工具截取屏幕截图。 FireShot有免费选项，因此您无需购买。 然后根据需要裁剪/优化/编辑图像，将其添加到项目中，并更新上图中的文件路径。 注意：添加屏幕快照时，请删除此注释和上面的段落。...
另外，您可以使用类的工具截取屏幕截图。 FireShot有免费选项，因此您无需购买。 然后根据需要裁剪/优化/编辑图像，将其添加到项目中，并更新上图中的文件路径。 注意：添加屏幕快照时，请删除此注释和上面的段落...
前端导师-满足着陆页解决方案 这是“一种解决方案。 前端导师挑战可帮助您构建现实的项目，从而提高您的编码技能。 目录 注意：删除此注释并根据您保留的内容更新目录。...解决方案URL：在此处添加解决方案URL 实
另外，您可以使用类的工具截取屏幕截图。 FireShot有免费选项，因此您无需购买。 然后根据需要裁剪/优化/编辑图像，将其添加到项目中，并更新上图中的文件路径。 注意：添加屏幕快照时，请删除此注释和上面的段落...
另外，您可以使用类的工具截取屏幕截图。 FireShot有免费选项，因此您无需购买。然后根据需要裁剪/优化/编辑图像，将其添加到项目中，并更新上图中的文件路径。注意：添加屏幕快照时，请删除此注释和上面的段落。...