前几天公司接到一个在微信公众号中要开发一个做题的小游戏，里面大概内容是做八道题，根据答对多少题，最后生成一个图片格式的聘书。微信默认长按图片可以发给好友，点击分享可以分享到朋友圈，但是不能直接将图片分享到朋友圈，需要先保存图片到本地才可以往朋友圈发，或者分享带链接的地址，微信默认分享朋友圈链接是没有缩略图的，自定义可以添加。

          首先项目使用的是vue.js写的界面，数据都是放到js中的，里面的题都是单选，每当有选中的选项就会跳到第二页，以此类推，知道最后一题，有选中的就会出现提交按钮，提交之后，根据答题对的个数，判断相应的职位，然后将职位回显到html页面上，然后通过 “html2canvas.js” 这么一个canvas插件将图片生成放到最顶层即可，这时候会出现一个问题，生成的图片不清晰，朕也是在网上各种教程超看，绝大多数人说将页面放大到两倍，生成图片缩小即可，可是我试了好多次最终失败告别了这个方案，决定放弃使用清晰的图片。后来想想，客户看到肯定回不满意，怎么办！ 怎么办！ 

         之后下班回到家，又做了个demo.各种测试。各种调试，依然失败，后来把页面顺便又看了一遍，突然发现head中有这么一句代码  “

        <meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no” />”

        这段代码相信大家都不陌生，过多的不解释了， 我把这段代码修改成 “<meta name=”viewport” content=”user-scalable=no” />”  神奇的事情就发生了，再次生成图片的时候图片居然和html一样清晰，我反复试了好多次，对页面没什么影响，ok，搞定，大快人心啊！这个坑我用了两天时间解决

       

版权声明：本文为wanghuoya原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/wanghuoya/p/9262151.html