拥抱前端分享的神器：html2canvas 让图片分享触手可及

HTML2Canvas 简介

HTML2Canvas 是一款前端 JavaScript 库，可以将 HTML 元素转换为 Canvas 元素。Canvas 元素是一个位图画布，可以绘制图形、文本、图像等元素。通过将 HTML 元素转换为 Canvas 元素，我们可以将 HTML 元素的内容导出为图片。HTML2Canvas 在前端图片分享中非常有用，因为它可以将任何 HTML 元素的内容导出为图片，包括文字、图片、表格、图表等。

使用 HTML2Canvas 生成分享图片

使用 HTML2Canvas 生成分享图片非常简单，只需要几行代码即可。

<div id="container">
  <h1>Hello World!</h1>
  <img src="image.png">
</div>

<script>
  html2canvas(document.getElementById('container')).then(function(canvas) {
    var img = canvas.toDataURL('image/png');
    window.open(img);
  });
</script>

这段代码将 container 元素的内容导出为图片，并将其转换为 DataURL 格式。然后，将 DataURL 格式的图片通过 window.open() 函数打开。这样，就可以将 container 元素的内容分享到其他平台了。

CDN 图片不展示问题

在使用 HTML2Canvas 生成分享图片时，可能会遇到 CDN 图片不展示的问题。这是因为 CDN 图片的跨域访问可能会受到限制。为了解决这个问题，需要在服务器端设置 CORS 跨域访问头。CORS 跨域访问头允许浏览器从不同的域访问资源。

在服务器端设置 CORS 跨域访问头的方法如下：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type

设置好 CORS 跨域访问头后，就可以正常使用 HTML2Canvas 生成分享图片了。

结论

HTML2Canvas 是一款非常强大的前端 JavaScript 库，可以轻松实现图片的分享。通过使用 HTML2Canvas，我们可以将任何 HTML 元素的内容导出为图片，并将其分享到其他平台。在使用 HTML2Canvas 生成分享图片时，可能会遇到 CDN 图片不展示的问题。这是因为 CDN 图片的跨域访问可能会受到限制。为了解决这个问题，需要在服务器端设置 CORS 跨域访问头。设置好 CORS 跨域访问头后，就可以正常使用 HTML2Canvas 生成分享图片了。