For some small needs, you need to convert the url into an image, just use google's api directly
https://developers.google.com/speed/docs/insights/v2/reference/pagespeedapi/runpagespeed
Request
HTTP request
GET https://www.googleapis.com/pagespeedonline/v2/runPagespeed
Parameters
Parameter name Value Description
| 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>