html2canvas 跨域问题

在使用Vue和html2canvas进行截图时，可能会遇到跨域问题。这是由于浏览器的同源策略所导致的安全限制。当你尝试将html2canvas应用于跨域的图片时，浏览器会阻止截图操作。

解决这个问题的一种方法是使用代理服务器。你可以在你的服务器上设置一个代理，将请求发送到目标图片的服务器，并将响应返回给前端。这样，前端的请求就不会涉及跨域问题了。

以下是一个使用代理服务器解决跨域问题的示例代码：

1. 在你的Vue项目中创建一个代理配置文件 `vue.config.js`（如果已经存在，请忽略）。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://目标图片的服务器地址',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

2. 在你的Vue组件中使用代理服务器进行截图。

import html2canvas from 'html2canvas';

export default {
  methods: {
    async captureScreenshot() {
      try {
        const canvas = await html2canvas(document.getElementById('target'), {
          useCORS: true,
          proxy: '/api' // 使用代理服务器
        });
        const image = canvas.toDataURL('image/png');
        // 处理截图后的操作
      } catch (error) {
        console.error('截图失败：', error);
      }
    }
  }
}

在上面的代码中，我们通过设置 `proxy` 选项为 `/api`，将请求发送到代理服务器。然后，代理服务器会将请求转发到目标图片的服务器，并将响应返回给前端。

需要注意的是，你需要将 `http://目标图片的服务器地址` 替换为实际的目标图片服务器地址。

希望以上解决方案能帮助到你！如果你还有其他问题，请随时提问。