js配合html2canvas和canvas2image将dom元素转化成图片（如果对您有用点个赞吧）

最近遇到一个需求，是关于运势测试的，将用户信息保存在底部图上，在微信中长按保存信息会与图片一起被保留下来。
图示：

静态页面

image.png

保存下来的图片

image.png

我们需要用到的资源

• js
• https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js
• canvas2image.js
• base64.js
  网上都可以找到资源

心路历程

从完全不懂这个技术到做出来大约花了一天的时间，参考网上的资源大体完成了功能

代码

    
    
    
    
    
    


    

        

            
            

                2019年  用户名  您的
            
        
        
        
        

            
        
        

        
    
    
 
          
    


    
    

    



    

        
    
    

如果你要使用

把动态生成的canvas和最后生成的img的opcity都设为0，绝对定位到顶端，把canvas的index设置为-1，img高于dom的index，如页面中的 style ---> #thecanvas,#finalImg

注意

• 如果你发现你本地的图片无法动态生成到canvas中，你需要把这些图片资源放到服务器中，最好不要跨域（我同事测试说不启动服务也可以，我没有测过，有兴趣可以试试）
• 发现有时候定位也会导致canvas的生成没有图片只有文字，我把定位改成fixed就能正常出现图（后来发现问题原因：可能是因为图片没有加载出来，用户名信息是absolute定位上去，图片加载慢会导致var height = $("#view").height() = 0，canvas就没有高度，最后导致不能生成要保存的图片啦）
• 想法：可以看图片长宽比与手机窗口长宽比，计算出canvas需要的高度

git

https://github.com/gyn894654492/js-html2canvas-canvas2image-dom-