【微信H5开发】基于html2canvas实现(图文组合)图片长按即可保存(简单处理)

鉴于当前开发的功能比较简单 所以这里只涉及html5的canvas来实现功能,所以没有涉及很深的功能开发





    content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0">







订单回执
    href="${ctx}/resource/bootstrap-3.3.4-dist/css/bootstrap.css" />
    href="${ctx}/resource/css/base.css" />
    href="${ctx}/resource/css/gomeet.css" />
    href="${ctx}/resource/css/gomeet_wechat.css" />


    


    

        href="${ctx}/resource/jBox/Skins/GrayCool/jbox.css" />




    

        

        
            
                
                
            
            
            
                
            
            
                
            
            
            
                
            
        
订单编号

                    请选择以下方式之一进行付款,同时备注订单编号:
                        
1.银行转账至 中国建设银行 *********************
                        
2.支付宝直接转账至 ******************
                        
3.支付宝扫描下面二维码转账
                    

                

                    
                
长按可以保存订单图片

        

    

    




页面结果:

【微信H5开发】基于html2canvas实现(图文组合)图片长按即可保存(简单处理)_第1张图片

这里简单说一下一些需要配置的参数

    var box = document.getElementById("content");
    var el = document.getElementById("form1");
    var saveImg = document.getElementById("saveImg");

box、el 参数是设置你合成后的图片布局;saveImg 参数是最后生成图片的区域

好吧 简单说了一下 很容易实现的功能 谢谢

你可能感兴趣的:(JavaScript,HTML5,CSS,canvas,微信H5开发)