这里会使用到移动端长按触发事件:var timeOutEvent=0; $(function(){                   &nbs" />

优搜集

读文章·学知识

如何使用html2canvas如何实现截图效果

4010 人参与 | 时间:2019-03-11 16:03:28

首先我们需要引入插件文件,如:

<script src=html2canvas/0.4.1/html2canvas.js">

这里会使用到移动端长按触发事件:

var timeOutEvent=0;

$(function(){

                        //长按事件

$("#touchArea").on({

touchstart: function(e){

  if(timeOutEvent==0){

  //$(".p3-btn").hide();

  html2canvas($("#touchArea1"), {  

height: $("#touchArea1").outerHeight() + 10,  

width: $("#touchArea1").outerWidth() + 10  ,

  background:"#009ed8",

onrendered: function(canvas) {

imgBlob = canvas.toDataURL('image/jpeg', 1.0); //将图片转为base64

//imgBlob = imgBlob.toString().substring(imgBlob.indexOf(",") + 1);//截取base64以便上传

console.log(imgBlob);

//$(".page3 .p1 img").attr("src",imgBlob);

//mySwiper.slideNext();

//$(".p3-btn").show();

//将值直接传给长按的位置

$(".inclass").css("display","none");

$(".inclass01").css("display","block");

$(".inclass01").html(''); 


}  

//可以带上宽高截取你所需要的部分内容 

}); 

timeOutEvent = timeOutEvent+1;

}

},

touchmove: function(){

return false;

},

touchend: function(){

return false; 

}

})

});


html2canvas插件下载链接:

html2canvas.zip



标签: 网站制作 网站前端开发 微信公众平台 微信公众号
来源:魏成博客,欢迎分享,(微信/电话:weicheng0526/18976961701)
网址:http://www.yousouji.com/index/detail/66.html
本站由魏成开发搭建,由魏成提供技术支持,内容采用互联网转载及站长个人分享的形式。本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站,予以删除QQ343420553。
导读
站内搜索
7天内热点
友情链接
Copyright © 2018-2050 优搜集 版权所有 | 版权声明 | 发展历程 | 广告投放 | 本站简介 | 站长QQ:343420553 | 粉丝交流QQ群:39324498
本站由魏成开发搭建,由魏成提供技术支持,内容采用互联网转载及站长个人分享的形式。本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站,予以删除QQ343420553。
琼ICP备13002698号-2