前端截图转Base64转Blob后上传，浏览器跨域问题以及解决

前端

2024-01-22 02:31:28

前端截图中的跨域陷阱与应对策略

随着互联网的蓬勃发展，前端截图已成为网页交互中不可或缺的功能。然而，在截图过程中，跨域问题就像一个隐匿的陷阱，悄然影响着截图数据的处理和传输。

跨域问题面面观

图片跨域

html2canvas作为前端截图的利器，却容易遭遇图片跨域的拦路虎。这是因为图片的跨域属性缺失，导致截图无法获取图片数据。此外，非系统字体的跨域访问限制以及外部样式表的阻隔也会影响截图质量。

Canvas跨域

html2canvas将页面元素转换为canvas时，跨域问题同样会如影随形。这可能是因为canvas本身跨域，或者是canvas中包含跨域元素（如图片、字体、样式表等）。

Blob跨域上传

截图转为Blob格式后，上传到服务器时又可能面临跨域的阻碍。这是因为服务器与截图所在页面不在同一域下，或者服务器未开启跨域请求支持。

解密跨域难题

解决图片跨域

设置crossorigin属性： 在img元素中设置crossorigin属性，并将其值设为anonymous，允许跨域获取图片数据。
允许字体文件跨域访问： 在服务器端设置CORS头，允许字体文件跨域访问。
开启样式表跨域访问： 在服务器端设置CORS头，允许样式表文件跨域访问。

解决Canvas跨域

使用CORS代理： CORS代理将跨域请求转发到服务器，返回符合CORS规范的响应，帮助解决Canvas跨域问题。
postMessage跨域通信： postMessage跨域通信允许不同域下的页面进行通信，可以将截图数据从一个页面发送到另一个页面。

解决Blob跨域上传

使用CORS代理： 和解决Canvas跨域一样，CORS代理也能帮助解决Blob跨域上传问题。
FormData跨域上传： FormData支持跨域请求，可以用来上传Blob数据。

代码示例

解决图片跨域

<img src="https://example.com/image.png" crossorigin="anonymous" />

解决Canvas跨域

使用CORS代理：

const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
const targetUrl = 'https://example.com/page-to-capture.html';

fetch(proxyUrl + targetUrl)
  .then(response => response.text())
  .then(html => {
    // 使用 html2canvas 将 HTML 转换为 Canvas
  })
  .catch(error => {
    // 处理错误
  });

使用postMessage跨域通信：

// 在截图页面
const otherWindow = window.open('', 'CaptureWindow');
otherWindow.postMessage({ message: 'capture' }, '*');

// 在接收截图的页面
window.addEventListener('message', event => {
  if (event.data.message === 'screenshot') {
    // 接收截图数据
  }
});