草庐IT

html2canvas用法即踩坑记录（小程序uniapp框架）

绚丽烟火487 2023-08-20 原文

在写项目的时候遇到了一个问题，就是需要把生成出来的表格生成图片，可以让用户直接保存下来。之前倒是使用过canvas生成图片，但是需要完全手写，而且样式也没有很多种。

如何使用JS截取HTML页面为图片呢，下面为大家介绍一款JS截图插件html2canvas

html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏。

html2canvas可以将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。

在官网上粘贴过来的，因为官网是英文，我是按照我自己的理解去写的描述。如果有误差，欢迎大家指正。

属性默认值描述
allowTaintfalse是否允许跨原点图像污染画布
backgroundColor#ffffff画布背景颜色，如果没有在DOM中指定。为透明设置null
canvasnull现有的画布元素用作绘图的基础
foreignObjectRenderingfalse如果浏览器支持，是否使用ForeignObject呈现
imageTimeout15000加载图像的超时(以毫秒为单位)。设置为0以禁用超时。
ignoreElements(element) => false从呈现中删除匹配元素的谓词函数。
loggingtrue为调试目的启用日志记录
onclonenull回调函数，该函数在复制文档以进行呈现时调用，可用于修改将呈现的内容而不影响原始源文档。
proxynullUrl到用于加载跨源图像的代理。如果为空，则不会加载跨源图像。
removeContainertrue是否清理html2canvas临时创建的克隆DOM元素
scalewindow.devicePixelRatio用于渲染的比例。默认为浏览器设备像素比。
useCORSfalse是否尝试使用CORS从服务器加载映像
width

Element width

画布的宽度
heightElement height画布的高度
xElement x-offset裁剪画布x轴的坐标
yElement y-offset裁剪画布y轴的坐标
scrollXElement scrollX渲染元素时使用的x轴滚动位置(例如，如果元素使用position: fixed)
scrollY

Element scrollY

渲染元素时使用的y轴滚动位置(例如，如果元素使用position: fixed)
windowWidth

Window.innerWidth

渲染元素时使用的窗口宽度，这可能会影响媒体查询等内容
windowHeightWindow.innerHeight渲染元素时使用的窗口高度，这可能会影响媒体查询等内容

实践案例运用

<template>
	<view>
		<!-- 排列三 -->
		<view class="creatImages" @click="createPoster" v-if="!imageData">一键成图</view>

		<!-- 这个标签是方便为截屏做的 -->
		<view class="jieping" id="jieping" ref="jieping" v-if="!imageData">
			<view class="">
				测试数据
			</view>
		</view>
		<view class="creatImg" v-if="imageData">
			<image :src="imageData" mode="widthFix"></image>
		</view>
	</view>

</template>

<script>
	import html2canvas from '@/node_modules/html2canvas'

	export default {
		data() {
			return {
				imageData: '',
			}
		},
		components: {
			html2canvas
		},
		methods: {
			createPoster() {
				uni.showLoading({
					title: '正在生成海报'
			 })
				let dom = document.querySelector('#jieping')
				console.log('noShow', dom)
				html2canvas(dom, {
					useCORS: true,
					scale: 2,
					height: document.getElementById('jieping').scrollHeight,
					windowHeight: document.getElementById('jieping').scrollHeight,
					dpi: 350
				}).then((canvas) => {
					uni.hideLoading()
					this.imageData = canvas.toDataURL('image/png', 1)
				})
			},
			

		}

	}
</script>

在 设定好的那个view里面就可以随意编辑了。生成图片是可以了，但是又发现了个新问题，生成图片后发现了一些用不到的元素，就想能不能把那些不想显示的元素去掉，解决方法如下：

在你想隐藏的那个view标签里面加上data-html2canvas-ignore="true"就可以了。

<view class="selectTab" v-if="noShow"  data-html2canvas-ignore="true">

这样运行就没有问题了

用法html2canvastdwidthstyle小程序uni-app前端vuehtml

有关html2canvas用法即踩坑记录（小程序uniapp框架）的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  3. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  4. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  5. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  6. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说，前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可，但要是匹配的code码比较多或者多个页面用到时，为了便于后期维护，后台就会使用字典表让前端匹配，下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs？{{method(a,b)}}可以看到，上述代码是一个调用方法传值的操作，在vue中很常见，多用于数据之间的转换，但由于微信小程序诸多限制的原因，你并不能优雅的这样操作，可能有人会说，为什么不用if判断实现呢？但是if判断的局限性在于如果存在数据量过大时，大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  7. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  8. 微信小程序开发入门与实战（Behaviors使用） - 2

    @作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序（🔥）目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中，用于实现

  9. TimeSformer：抛弃CNN的Transformer视频理解框架 - 2

    Transformers开始在视频识别领域的“猪突猛进”，各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解，本篇主要介绍了FBAI团队的TimeSformer，这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用，就请点赞、收藏、关注！paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

  10. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

随机推荐