`

基于html2canvas的长图分享

 
阅读更多
<span class="ui label yellow compacted basic" onclick="$('#set_campaign_modal').modal({allowMultiple: true}).modal('show');" style="cursor: pointer;">长图分享</span>

<div class="ui modal" id="set_campaign_modal"><i class="close icon"></i><img src="" alt="" class="down_img" style=" display: block;width: 100%; height: 100%;margin: 0 auto;"/></div>


<script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>

<script type="text/javascript">
	html2canvas($('.show_box')[0], {allowTaint : true,scale:1,taintTest:true,logging:false,useCORS:true}).then(function(canvas) {
	 $('.down_img').attr('src',canvas.toDataURL("image/png"));
	});
</script>
分享到:
评论

相关推荐

    基于html2canvas生成带二维码的活动海报

    基于html2canvas生成带二维码的活动海报;纯前端生成带二维码的活动海报,上手简单;README.md文件中注明了目录的结构及对应的文件。

    分享8款令人惊叹的HTML5 Canvas动画特效

    HTML5 3D动画实现起来非常方便,之前介绍过基于jQuery的3D旋转插件是利用多张多视角图片播放来实现的,而今天分享的这款HTML5 3D旋转动画是利用纯HTML5技术实现的,该动画实现了HTML5 Logo旋转的效果。 在线演示 ...

    HTML5 Canvas雾状火焰动画

    我们可以在Canvas上绘制很多图形,也可以利用HTML技术在Canvas上制作一些复杂的动画,之前我们也分享过一些基于HTML5 Canvas的火焰动画,例如这个HTML5 Canvas幻彩火焰文字特效和更早以前分享的HTML5 Canvas火焰燃烧...

    基于Taro框架的微信小程序canvas绘图组件

    基于 Taro 框架的微信小程序 canvas 绘图组件,封装了常用的操作,通过配置的方式生成分享图片

    HTML5 Canvas弹性文字动画

    在HTML5中,Canvas上不仅可以绘制图形和动画,还可以实现各种炫酷...这次我们给大家分享的也是一款基于HTML5 Canvas的文字动画,这款文字动画是将文字悬挂在富有弹性的细线上,用鼠标拖动文字即可让其在各个方向弹动。

    HTML Canvas火焰画笔动画

    之前我们为大家分享过很多关于火焰的HTML5动画,像这个HTML5 Canvas火焰文字...这次我们要介绍的这款基于HTML5 Canvas火焰动画非常特别,它是带火焰动画的画笔,画笔笔刷在画布上绘制时,线条带有火焰动画,非常不错。

    HTML5 Canvas星云动画特效

    这次我们要再来分享一款基于HTML5 Canvas的动画特效,这是一个星云动画效果,屏幕上会产生很多大大小小的光点,色彩斑斓,酷似宇宙的星云图。并且,在HTML5 Canvas上,星云图还是运动的,非常好看的一款HTML5动画。

    HTML5 Canvas闪亮的3D蓝宝石动画

    几天前,我们向大家分享过一款基于HTML5 Canvas的3D钻石动画,制作得十分逼真。今天我们要分享另外一个基于HTML5 Canvas的3D蓝宝石动画,我们可以通过鼠标的拖拽来实现蓝宝石的各个视角的观察,并且通过鼠标滚轮来...

    HTML5 Canvas 梦幻树生长动画

    今天我们要为大家分享一款基于HTML5 Canvas的动画特效,它是一颗逐渐生长的梦幻大树,生长过程中树枝将会产生随机的色彩,让整一棵大树显得非常具有梦幻的效果。本实例利用了HTML5 Canvas的动画技术,实现了渐变式...

    HTML5 Canvas 3D波浪翻滚动画

    之前我们分享过好几款基于HTML5 Canvas的波浪和水波纹动画,比如这款HTML5 3D波浪起伏动画特效和这款超酷无比的HTML5 WebGL水面水波荡漾特效。今天我们要介绍一款也是基于HTML5 Canvas的波浪翻滚动画,它同样有着3D...

    HTML5 Canvas五彩烟雾模拟动画

    之前我们利用HTML5技术在Canvas上模拟了很多东西,比如最近刚分享的HTML5 Canvas 多种炫酷3D...这次给大家带来的也是一款基于HTML5 Canvas的动画特效,它模拟了五彩烟雾的流动效果,这在Canvas上实现还是比较简单的。

    HTML5 Canvas冰川波浪起伏动画

    之前我们分享过很多基于HTML5 Canvas的水波动画,其中一款基于WebGL的水面水波荡漾特效相当绝妙。还有这款HTML5 Canvas 3D波浪翻滚动画也是非常不错。这次我们要带来的同样是一款基于HTML5 Canvas的波浪起伏动画,...

    HTML5 Canvas 3D球形文字标签云动画

    个人博客程序中经常会使用的一个功能叫标签云,就是把许多标签文字...今天要分享的就是一款基于HTML5 Canvas的3D球形标签云动画,你可以定义任意的文字,然后调用HTML5代码初始化一个3D的球形标签云,效果非常不错。

    超炫酷HTML5 Canvas 3D旋转地球动画

    这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转...另外我们也可以通过点击全屏按钮来全屏观看地球旋转动画,记得在很早以前我们也分享过一款基于HTML5 Canvas的地球动画,请看这里。

    HTML5 Canvas 3D绿色粒子动画

    HTML5 Canvas技术已经不是...这次我们给大家分享一款基于HTML5 Canvas的3D绿色粒子动画,效果和之前介绍的HTML5 Canvas和SVG实现的五彩万花筒动画比较类似。但是缺陷在于这个动画在某些版本的chrome上运行比较卡顿。

    HTML5 Canvas 3D天体运行动画

    今天我们要给大家分享一款基于HTML5 Canvas的3D星球天体运行动画,这里我们在Canvas画布上绘制了一颗较大的星球,然后在大星球周围有一圈很小的陨石区域,这些陨石会围绕着星球不停地旋转,而且配合黑色的背景后带有...

    15个超绚丽的HTML5 Canvas时钟动画特效

    之前我们有给大家介绍过很多基于...这次要分享的是15个超绚丽的HTML5 Canvas时钟动画特效,它们很多都有各自不同的外观,有几个时钟的造型还非常新颖奇特,因为是基于HTML5 Canvas的,所以你的浏览器需要支持HTML5。

    HTML5 Canvas 多种炫酷3D粒子图形动画

    在不久之前,我们分享过好几款基于HTML5 Canvas的粒子动画特效,都比较炫酷,比如这款HTML5 WebGL绚丽五彩流体模拟动画和HTML5 WebGL粒子爆炸动画。这次我们同样要分享另外一款HTML5 Canvas 多种炫酷3D粒子图形动画...

    HTML5 Canvas 液体流动样式Loading加载动画

    之前我们分享过很多基于jQuery和...今天我们要分享另外一款基于HTML5 Canvas的液体流动样式Loading加载动画,这款Loading动画在加载时会呈现液体流动的动画效果,并且由于和背景颜色的对比,也略微呈现发光的动画效果。

    HTML5 Canvas 3种不同风格的圆盘时钟

    这次我们要继续为大家分享一款基于HTML5 Canvas的圆盘时钟动画,和之前分享的这款HTML5 Canvas 圆形时钟动画类似,它也是基于HTML5的,但是这款时钟提供了3种不同的样式风格,而且时钟的大小可以自己控制。

Global site tag (gtag.js) - Google Analytics