如何在Bootstrap中裁剪GoogleAPI二维码图像？

Question

众所周知，谷歌提供免费 API，名为：developer.google.com

但是这个api有一些限制，我们无法根据我们的情况进行定制。但它对于小需求来说简单而有效。所以，我想做的是裁剪二维码，使其看起来合适。

示例如下：

网址：

<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=http%3A%2F%2Fwww.google.com%2F&choe=UTF-8" title="Link to Google.com" />

如上面的示例所示，您会看到它包含距离 QR 图像边缘相当大的填充（空格）。我想要的是从图像边缘删除（裁剪）这些空间，使其看起来像下面的示例：

引导程序：

   <tr>
         <th>QR Code</th>
          <td  class ="text-left">
          <img class="img-thumbnail img-responsive" src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=http%3A%2F%2Fwww.google.com%2F&choe=UTF-8" title="Link to Google.com" />

            </td>

   </tr>

输出：

目标：

是的，我知道 QR 生成器库将是更好的选择，但我的主要关注点是 Charts.googleapis，如果有人给出方向或建议，这将是一个很大的帮助。

Answer 1

纳乔特。我希望它仍然能够及时回答您的问题，当然对于许多会阅读它来寻找自己问题的解决方案的人来说也是如此。

如果您已经阅读了 API 文档（我想您已经阅读过），那么您肯定还没有找到关于如何控制 QR 代码图表的这一特定方面的明确解释。

答案是：您必须设置该chld参数，这是一个双参数，因为它还控制纠错级别和裕度。这两个子参数必须以“|”分隔。根据 API 文档，纠错级别参数可以采用以下值：

• L - [默认] 允许恢复高达 7% 的数据丢失；
• M - 允许恢复高达 15% 的数据丢失；
• Q - 允许恢复高达 25% 的数据丢失；
• H - 允许恢复高达 30% 的数据丢失；

数据丢失恢复能力会影响数据承载能力。数据丢失恢复能力越强，生成的 QR 码图像所携带的有用数据就越少。

反过来，margin 参数是“代码数据部分周围白色边框的宽度。这是以行为单位，而不是以像素为单位。......默认值为 4。” 一行对应于组成 QR 码的一个正方形的宽度。代码：

<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=http%3A%2F%2Fwww.google.com%2F&choe=UTF-8&chld=M|0" title="Link to Google.com" />

渲染0边距和中低错误恢复能力的图像： 0边距的二维码

感谢Mathew Sachin，他在博客中展示了此参数的用法。