如何使用 html2canvas 处理下载外部图像？

Question

我有一个包含几本书封面的页面和一个下载所有封面的按钮。

图书封面采用字符串格式，是一个 Google 图书网址。我是这样填充的：

<section ref="capture" id="my-node">
  <figure v-for="book in books" :key="book.id">
    <img :src="book.thumbnail" :alt="`Book ${book.title}`" />
  </figure>
  <button type="button" @click="download">html2canvas</button>
</section>

要下载书籍封面，我正在调用以下函数：

download() {
  html2canvas(this.$refs["capture"], { allowTaint: true })
    .then((canvas) => {
      let link = document.createElement("a");
      link.download = "Livrero.png";
      link.href = canvas.toDataURL("image/png");
      link.click();
    })
},

Books 是一个包含 thumbnail 属性的对象，其值如下：https://books.google.com/books/content?id=_i6bDeoCQzsC&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api

让我更困惑的是，如果我使用类似于这样的值：https://images-na.ssl-images-amazon.com/images/I/41xShlnTZTL._SX218_BO1,204,203,200_QL40_FMwebp_.jpg 一切都会正常工作，但不幸的是，该项目目前不允许这样做。

---

以前我在html2canvas 中使用属性useCORS: true，但是它返回了CORS 策略错误。因此，当我删除它时，我不再出现此错误并开始收到以下错误：

DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement':
Tainted canvases may not be exported.

有人建议我使用http://html2canvas.hertzen.com/proxy/来完成任务，但是因为我使用的是Vue.js，所以我不知道如何应用。

Answer 1

这是浏览器内容政策的问题。没有简单的解决方案。

浏览器不允许您使用来自不同来源的内容（图像），而这些内容并未明确允许。

对于useCORS: true，预计服务器（带有远程资源）会使用适当的access-control-allow-origin 标头进行响应。您的亚马逊链接可以，这就是它起作用的原因。

使用allowTaint: true，它接受图像，但拒绝让您对生成的画布图像执行任何操作，因为它现在被视为tainted。

由于您无法让第 3 方服务器发送适当的 CORS 标头，因此您必须运行自己的 CORS 代理。

要运行the official documentation 中提到的html2canvas-proxy，您需要安装它

npm install html2canvas-proxy --save

创建一个启动 JavaScript 文件

var proxy = require('html2canvas-proxy');
var express = require('express');
const port = 8000;

var app = express();
app.use('/', proxy());
app.listen(port, () => {
  console.log(`html2canvas-proxy listening on port ${port}`)
})

然后在html2canvas 中使用proxy 选项

html2canvas(this.$refs["capture"], {
    proxy: "http://localhost:8000",
})
.then((canvas) => {
  // ...
})

但是对于生产来说，这个简单的代理也不是很好，因为它允许任何人使用它作为 CORS 代理，如果您还没有运行 Express Node.js 服务器，您可能不需要单独的服务器。