html2canvas手机上生成图片长按保存的实例

1. //切换图片
   
2. $(document).on('click', '.btn-replace', function(){
   
3.     var i = $(this).data('current')+1;
   
4.     if($('#card'+i).length<1){
   
5.         i = 1;
   
6.     }
   
7.     $('.card-poster').hide();
   
8.     $('.card-img').hide();
   
9.     $(this).data('current',i);
   
10.     createImage('#card'+i,'#img'+i);
    
11. });
    
12. //图片替换HTML
    
13. var createImage = function(cardId,imgId){
    
14.     $(cardId).show();
    
15.     var dom = $(cardId).get(0);
    
16.     var filename = (new Date()).getTime() + '.' + "png";
    
17.     html2canvas(dom,{
    
18.         scale: 2,
    
19.         allowTaint: true,
    
20.         useCORS: true
    
21.     }).then(function(canvas){
    
22.         var imgData = canvas.toDataURL('image/png');
    
23.         $(cardId).hide();
    
24.         $(imgId).attr('src',imgData).attr('alt',filename).css({'display':'block'});
    
25.     });
    
26. }

复制代码

HTML代码相关

1. <div class="fixed-top fixed-bg h-100 pt-1">
   
2.   <div class="card-list d-block mx-auto">
   
3.     <img class="card-img img-1" src="" alt="img1"/>
   
4.     <div class="card-html html-1">
   
5.       <h2 class="text-letter card-h2">折叠导航栏折叠1</h2>
   
6.       <h6 class="text-letter card-h6">【赏析】</h6>
   
7.       <p>通常，小屏幕上我们都会折叠导航栏，通过点击来显示导航选项。通常，小屏幕上我们都会折叠导航栏，通过点击来显示导航选项。</p>
   
8.     </div>
   
9.     <img class="card-img img-2" src="" alt="img2"/>
   
10.     <div class="card-html html-2">
    
11.       <h2 class="text-letter">折叠导航栏折叠1</h2>
    
12.       <h6 class="text-letter">【赏析】</h6>
    
13.       <p>通常，小屏幕上我们都会折叠导航栏，通过点击来显示导航选项。通常，小屏幕上我们都会折叠导航栏，通过点击来显示导航选项。</p>
    
14.     </div>
    
15.   </div>
    
16.   <p class="text-center pt-3">
    
17.     <a class="btn btn-secondary btn-sm rounded-pill mx-2 btn-close-preview" href="javascript:;" data-target=".fixed-bg">关闭预览</a>
    
18.     <a class="btn btn-primary btn-sm rounded-pill mx-2 btn-replace" href="javascript:;" data-current="1">换一张图</a>
    
19.     <a class="btn btn-primary btn-sm rounded-pill card-btn d-none" href="javascript:;" data-target=".html-1"><i class="iconfont icon-download"></i>保存图片</a>
    
20.   </p>
    
21.   <p class="text-center text-light small">长按图片保存到手机相册</p>
    
22. </div>

复制代码