前端截取url成图片

最新推荐文章于 2025-06-21 16:40:57 发布

bj123nimab

最新推荐文章于 2025-06-21 16:40:57 发布

阅读量1.2k

点赞数

分类专栏： vb2005xu自己动手系列文章标签：前端 javascript ViewUI

vb2005xu自己动手系列专栏收录该内容

174 篇文章

订阅专栏

本文介绍了一种通过Google API将URL转换为图片的方法。利用提供的API，可以为指定的URL生成包含截图的JSON响应。示例代码展示了如何用jQuery发起请求，并处理返回的数据以显示截图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有些小需求需要将 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

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: "`desktop`": Fetch and analyze the URL for desktop browsers "`mobile`": Fetch and analyze the URL for mobile devices

<!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>