首先不会像其它文章一样把文档搬过来解释一边。而是在实际项目中实际使用来写。

目录

• 前言
• 一、用前须知
• 二、项目实际使用
• • 1、项目描述
  • 2、使用步骤
  • 3、图片跨域问题
  • 4、css样式问题
• 最后

---

前言

网上可以查到的方法有几种，有使用canvas截图的还有使用插件截图的。这里我是用html2canvas插件就是图它的比较易用，下面就是我实际使用和使用中遇到的坑来讲解一下。

---

一、用前须知

1、首先根据文档上的描述，它是根据页面上所展示的dom元素进行截图。
2、还有一定的限制，并不是所有的css样式都有作用。但是不用担心大部分是支持的。这是一个官方支持css属性的链接附上css属性支持列表
3、最重要的一点就是图片要是同源的。如果图片跨域就会导致截图之后图片丢失，我也遇到了，下面会说解决办法。

二、项目实际使用

1、项目描述

1、项目需求是根据页面所展示内容生成海报，并长按进行图片保存
2、页面中展示的海报是api返回（存在跨域问题）

2、使用步骤

1、页面中的主要结构自己写就好，每个需求不一样
2、安装

npm install html2canvas
import html2canvas from 'html2canvas';

3、使用

onMakePicture() {
	//这是选择你要进行截屏的dom
   const dom = this.$refs.picDom
   html2canvas(dom).then(function (canvas) {
     // console.log('canvas',canvas)
     const link = document.createElement("img");
     link.src = canvas.toDataURL();
     link.style.width = "100%";
     link.style.height = "100%";
     link.style.position = "absolute";
     link.style.top = "0";
     link.style.left = "0";
     dom.appendChild(link);
   });

 },

3、图片跨域问题

1、由于直接由api返回的图片为在线图片，所以必然跨域，所以可以想到的解决办法就是将图片转为base64，那转为base64的图片可以由前端转也可以由后端转。当然自己要试一试，可以是多方尝试，还是跨域，最后没办法还是请后端的同学转了，可以正常显示了。

4、css样式问题

1、我是将接口返回的图片使用background-image来设置的，这样显示没什么问题，但是发现在使用html2canvas的时候在电脑的浏览器中测试没有发现任何问题，也能正常生成图片，但是经过手机测试，发现没生成。可能是由于手机没有电脑处理速度快，在遍历dom元素时，由于图片的base64字符串太长，所以来不及渲染出来，所以导致背景图片丢失，所以猜用img标签，让在加载dom的时候就把背景图片加载好。
额外知识：
1、页面结构先加载，让你后时css。
2、html2canvas是通过遍历你所需要生成截图的dom元素进行构造的图片。

---

最后

附上文档链接：html2canvas

采坑一时爽，一直采坑一直爽。
如果有问题欢迎指出。
如果有帮助欢迎常来。

标签：跨域,dom,html2anvas,js,html2canvas,截屏,link,css,图片
来源： https://blog.csdn.net/qq_43205326/article/details/123078167