初接触H5的踩坑之旅

1、情景描述：

这部分可忽略，我只是话比较多而已啦。

最近，这不是快到2018年了嘛，为了迎接新的一年，我们公司接了一个项目（H5）,表演者是我，一个刚接触H5的前端小白。一开始吧，看到这个页面，觉得，哎呦，没那么难嘛，就两页，但是呢，没想到，里面有一些我从未接触甚至不知道的东西，就这样，我陷入了泥潭，不可自拔。

2、需求

首先，整个H5页面就两页，后来增加一页，所以总共三页。
第一页： 用户在输入框里输入文字（不是单行的哦，25字以内）
第二页： 用户在第一页点击生成按钮之后，进入第二页，第二页某个小区域显示用户输入的文字（单行或多行）。还有呢，第二页下方有两个按钮（长按保存和分享给小伙伴）。
第三页：这页呢，只有用户点击朋友分享的链接时才显示，这页就是你点击的那个朋友她所填写的内容生成的图片。

上面全是无关紧要的话，下面说需求咯

（1）输入框25字以内，如果用户换行输入，那么展现形式就展现用户输入的形式。（第二页那张放文字图片的区域呢，也就那么大，大概一行放7个字吧）
（2）用户长按名为长按保存图片的按钮（在显示用户文字图片的下方），可以出现微信、钉钉等自带的保存图片提示，来让用户保存图片。
点击分享，就引导用户分享咯。
（3）用户如果点击别人分享的链接，刚进去显示他的朋友输入的文本内容生成的图片。
（4）在微信、钉钉、微博使用

踩坑表演

反思：在此呢，本宝宝先自我反思一下，有些需求方提出的需求，首先做之前就要考虑到使用前端技术能不能实现，能实现的话需要花费的时间成本够不够，还有要学会和需求方沟通交流，并不是需求方说要做什么你就立马做什么，不考虑能不能做，需要多长时间。这是一个好朋友的某某某（大神一枚）给她说的，她又告诉我的，也不无道理吧，实际还是自己经验太少了。

我们下面来说我是如何踩坑和解决的，这几天我真的是心力交瘁啊。

1、用户输入文字（25字以内），可多行输入，将文字与背景图合一

这其实是个很麻烦的问题，如果想要做的完美的话，最终还是没有做完美，可直接跳到下个坑了。
因为人家要求用户如果输4行，图片的展示文字的形式也是四行。我就考虑到用textarea标签，没有去使用四个input什么的,展示图片的宽度只能让文字一行显示7个中文汉字，这里面的逻辑我花了好几天，也没有什么好的解决方案，最终在朋友的大神帮助下，给了我一些代码，凑合着还能用，比我自己写的好多了，这个代码我要好好研究一下，在此不说了，因为我也不太懂。

2、生成图片

如第一个问题，我可以获取到用户输入的内容，再根据一些算法得出每行要显示的内容，放到一个数组里。
然后呢，先建一个画布，将背景图片绘制上去，再将数组里的每行文字绘制上去，这样画布上就是我要的内容了吧，很好的是，canvas提供了toDataUrl()这个方法,可以将获得canvas的base64图片地址，这样你把这个base64地址放到img标签的src属性里，一个canvas生成图片就完成了啊。
画布的长宽可以通过获取手机屏幕的宽来动态添加哦！

3、canvas生成的图片模糊

我是生成图片了，但是画布生成的图片模糊怎么办，而且是在手机端看。一开始我把canvas放大了2倍，但还是模糊。
最终的解决办法是：
让canvas放到4倍，将背景图片也放到4倍，然后你想展示的那个img标签的宽高自己设个设计稿上要求的值，这样图片就清晰了。

4、长按保存图片

就说第二页吧，上方是用户输入文字的展示区，也就是一个img标签啦。下方离img标签一段距离的地方有个按钮叫长按保存，那这怎么办，用户手指长按img标签当然可以保存了，但是按钮在下方啊，我的做法是，哈哈哈，很蠢，但是我没想到其他的方法，就用这个了，哪位大神可以教教我吗？拜托拜托！
解决方案：
将你想要保存的图片img标签透明的设为0，然后z-index设置的比长按保存按钮高，将其定位到按钮上，覆盖住按钮，这样虽然用户看到的是按钮，但实际长按的是图片啊！这样不就可以长按保存了嘛。

5、钉钉上的坑（长按保存base64编码图片）

我不知道是不是我的错误操作，但是我尝试了之后就是不行啊。
微信上是可以的，但是钉钉上如果img标签的src是base64的话，用户长按img标签，是不会出现保存图片提示的，这怎么办，那我就调了一下后台给的接口，将base64编码的图片转为线上图片，这样钉钉也可以了，但是呢，请求接口也需要时间，所以体验肯定不如直接用base64好，这也没办法，总归是解决了。

6、微博上的坑（H5页面长按img标签没反应）

自己没发现，需求方说，为什么微博上长按保存图片没有用，然后我就去试了一下，结果呢，微博好像禁用了用户长按保存H5页面中img标签保存图片的功能，长按就是没有用，这可咋办，那就想办法呗，后来后台大神说要不用a标签的download属性吧，然后就去试试，在安卓上是好的，点击是可以去浏览器下载，但是ios就不行了，它不支持download属性耶，随之放弃。最终还是没有解决，就换了个很蠢的方案，那就是如果用户是微博访问的话，就让按钮上的内容变一下，不叫长按保存图片了，换成另一个方案，来引导用户截图，哈哈哈，还有这种操作？

做这个我才知道，原来可以判断用户是微信还是钉钉还是微博还是什么什么东东访问的啊，这个去自行百度吧。

还有这个需求一开始设计就不应该这样做了，因为微博不行呢，所以一开始就应该和需求方沟通好，我的错咯，可是臣妾当时不知道啊！

暂时只想到这些了，表演完毕，谢幕咯！