H5 中html 页面存为图片并长按 保存

最近接到的一个新需求：页面一个静态H5，中间有一页是输入信息，然后跳转到最后一页，自动将页面生成图片，用户可以长按图片保存到手机上。

展示一下最后一页的样子：

 

刚拿到这个需求，在网上看了很多文章，最普遍的是使用 html2canvas + canvas2image  来实现。于是，跟着前人的脚步，踏上了一个不断采坑采坑采坑的旅程。

下面直接描述我在做这个需求过程中遇到的问题以及解决办法吧：

1.html2canvas 图片跨域：

这个问题网上很多解决办法：

这个是最常用的， 刚开始我只是加了红色框里面的这一句，但是并没有任何作用，依旧报错。后来看到有人说，加上前面那一句，所以果断在加进去。

这两句其实表达的是同一个意思：允许图片跨域。

当然，也有网友说，直接给一个空值就可以，我当时试了一下，并不ok~~~~.

 

 

2.多次使用canvas drawImage 方法图片展示问题

2.1 图片加载顺序问题

在我这个需求里面，肯定是文字描述以及二维码是展示在