`

基于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生成带二维码的活动海报"提供了一个纯前端解决方案,使得开发者无需后端支持也能快速实现此类功能。html2canvas是一个JavaScript库,它能够将网页的DOM(文档对象模型)渲染为图片,从而解决...

    基于html2canvas将当前页面保存为图片Demo

    在"基于html2canvas将当前页面保存为图片Demo"的项目中,你将找到html2canvas的插件脚本和一个简单的示例Demo。这个Demo可以帮助开发者快速理解和使用html2canvas。下面我们将详细讨论这个知识点: 1. **...

    js移动端页面生成图片demo(基于html2Canvas.js).zip

    "js移动端页面生成图片demo(基于html2Canvas.js).zip"是一个示例项目,它演示了如何利用html2Canvas.js这个JavaScript库在移动端实现这一功能。下面我们将深入探讨相关知识点。 1. **html2Canvas.js**: 这是一个...

    html2canvas(1.0.0)

    例如,社交媒体平台的“生成长图”功能,电商网站的商品详情页保存为图片,以及教育平台的在线笔记等。 总的来说,html2canvas是前端开发中的一个重要工具,它让浏览器具备了将网页内容转化为图像的能力,极大地...

    html2canvas生成图片demo.zip

    关于生成海报,html2canvas可以帮助开发者将网页上的内容组合成一张设计精美的图片,常用于电商、社交媒体分享等功能。例如,你可以动态组合产品图片、价格、描述等信息,生成一张自定义的分享海报。 至于Base64,...

    html2canvas实现将dom生成图片并保存至本地

    HTML2canvas是一个JavaScript库,它的主要功能是将网页的DOM结构转换为Canvas图像,从而能够进一步将这些图像保存为图片格式,例如JPEG、PNG等。这个过程通常被称为DOM截图或者网页截图。它允许用户在不借助服务器端...

    html2canvas.js 长按页面保存为图片的功能实现

    长按页面保存为图片的功能实现html2canvas.js 长按页面保存为图片的功能实现html2canvas.js 长按页面保存为图片的功能实现html2canvas.js 长按页面保存为图片的功能实现html2canvas.js 长按页面保存为图片的功能...

    html2canvas.js 下载

    在当今的Web开发中,用户界面的交互性和可分享性越来越重要,而html2canvas.js正是实现这些功能的关键工具。这个JavaScript库允许开发者将网页的HTML结构及其CSS样式转换为Canvas元素,进而可以进一步转化为图像,...

    html2canvas 指定div转图片.zip

    在给定的"html2canvas 指定div转图片.zip"压缩包中,包含了一个名为"index5.html"的示例文件,我们可以基于此深入探讨HTML2canvas的使用方法和相关技术。 首先,HTML2canvas的使用通常分为以下几个步骤: 1. 引...

    html2canvas将HTML内容写入Canvas生成图片.rar

    HTML2canvas是一个JavaScript库,它的主要功能是在用户的浏览器上将HTML内容捕获并转换为Canvas图像,进而可以进一步转化为图片格式,如JPEG、PNG或SVG。这个强大的工具为开发者提供了一种无需服务器参与的方式,就...

    html2canvas实现js截图+模拟摄像头拍照

    `html2canvas` 是一个开源的JavaScript库,它的主要作用是将HTML页面渲染为Canvas对象,进而可以将其转换为图片。这个过程通常被称为“屏幕截图”或“DOM截图”。通过这个库,开发者可以在用户的浏览器上直接生成...

    html2Canvas演示

    3. **数据可视化**:动态生成基于HTML和CSS的数据图表,然后导出为图片。 4. **打印预览**:在无插件的情况下提供网页打印预览。 在压缩包文件中,`index.html`可能是包含html2Canvas使用示例的网页,`images`目录...

    html2canvas.js

    在前端开发中,有时我们需要将网页内容转换为图片进行保存或分享,这时html2canvas.js这个JavaScript库就派上了用场。html2canvas.js是一款强大的工具,它允许我们在浏览器环境中将HTML元素转化为Canvas图像,进一步...

    Katexhe和html2canvas公式转图片

    总结来说,Katex和html2canvas的组合提供了一种高效且灵活的方法,将LaTeX公式转换为Base64图片,使得公式可以在不依赖特定库的情况下进行分享和存储。这对于需要大量使用数学公式的Web应用程序尤其重要,提高了用户...

    HTML2canvas截图

    HTML2canvas是一个JavaScript库,它允许开发者在浏览器中将HTML内容转换为Canvas图像,进而可以进行...虽然存在一些限制和挑战,但通过合理的优化和调试,HTML2canvas可以成为Web应用中捕获和分享动态内容的强大工具。

    html2canvas代码包括

    HTML2Canvas的工作原理基于这样一个事实:浏览器的Canvas元素可以用于绘制2D图形,而HTML2Canvas就是通过读取DOM(文档对象模型)结构,将HTML元素转换成Canvas上的图形。它解析HTML和CSS样式,然后在Canvas上逐像素...

    基于html2canvasjspdf导出更加清晰的图片以及pdf

    "基于html2canvas jspdf导出更加清晰的图片以及pdf"是一个这样的解决方案,它结合了两个强大的JavaScript库,html2canvas和jspdf,用于在浏览器端实现这个功能。下面我们将深入探讨这两个库以及如何使用它们来提升...

    html2canvas-0.4.1.zip

    html2canvas是一个基于浏览器的解决方案,它可以将HTML元素转换为Canvas图像,进而可以被保存为JPEG、PNG或SVG格式。这个过程完全在客户端进行,无需服务器参与,因此在处理敏感信息或提高用户体验方面具有显著优势...

    html5在线编辑器基于canvas实现

    基于Canvas实现的HTML5编辑器,更进一步地利用了HTML5的Canvas元素,这是一种用于在网页上绘制图形的JavaScript API。Canvas提供了一种动态、灵活的方式来创建和修改图像,使其成为构建富媒体应用和复杂交互式编辑...

Global site tag (gtag.js) - Google Analytics