html2canvas遇到的坑,图片模糊,报Error loading image

最近业务上遇到需要把div的内容生成图片,查了一下,比较好的js插件是html2canvas,

用下来也确实比较简单,但遇到一些坑,比如生成的图片比较模糊,或者报Error loading image 

1.一开始用的0.5.0-beta4的版本,生成的图片很模糊,网上一大堆解决方案,但其实只要用新一点的版本就能解决问题。

2.于是我找了最新的版本下载地址v1.0.0-rc.5,虽然生成的图片清晰了,但发现会报Error loading image 。

3.最终解决方案是用了v1.0.0-alpha.9这个版本,问题解决,图片清晰也不报错了。

以下是测试代码

<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="html2canvas.min.js"></script>
<link rel="stylesheet"
	href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script
	src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

	<!-- 按钮触发模态框 -->
	<button class="btn btn-primary btn-lg" onclick="m()">开始演示模态框</button>
	<!-- 模态框(Modal) -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">×</button>
					<h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4>
				</div>
				<div class="modal-body">
					<div style="background: #fff;">
						<div>1</div>
						<div>2</div>
						<div>3</div>
						<div>4</div>
					</div>
					<div id="imgDiv" style="position: absolute; background: #eee;">
						<img id="imgId" class="imgDiv_img" src="" style="width: 100%;" />
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="button" class="btn btn-primary" onclick="d()">
						生成图片</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
	<script type="text/javascript">
		function m() {
			$("#myModal").modal("show");
		}

		function d() {

			html2canvas(document.querySelector("#myModal")).then(
					function(canvas) {
						var imgUri = canvas.toDataURL("image/jpeg", 1); // 获取生成的图片的url
						$(".imgDiv_img").attr("src", imgUri)
					})
		}
	</script>
</body>
</html>

 

韦东山老师为啥要录升级版嵌入式视频?<br /><br /> 200x年左右嵌入式Linux在全世界、在中国刚刚兴起。<br /> 我记得我2005年进入中兴时全部门人正在努力学习Linux。<br /> 在2008年我写了一本书《嵌入式Linux应用开发完全手册》。<br /> 它大概内容是:裸机、U-boot、Linux内核、Linux设备驱动。<br /> 那时还没有这样讲解整个系统<br /> 芯片厂家Linux开发包也还不完善从bootloader到内核再到设备驱动都不完善。<br /> 有全系统开发能力人也很少。<br /> 于是这书也就恰逢其时变成了畅销书。<br /> 我也根据这个思路录制了视频:裸机、U-boot、Linux内核、Linux设备驱动。<br /> 收获些许名声带领很多人进入Linux世界。<br /><br /><strong>11年过去了嵌入式Linux世界发生了翻天覆地变化</strong><br /><br /> ① 基本系统能用<br /><br /> 芯片厂家都会提供完整U-boot、Linux内核、芯片上硬件资源驱动。<br /> 方案厂家会做一些定制比如加上某个WIFI模块会添加这个WIFI模块驱动。<br /> 你可以使用厂家原始方案或是使用/借鉴方案商方案做出一个“能用”产品。<br /><br /> ② 基础驱动弱化;高级驱动专业化<br /><br /> 基础驱动比如GPIO、UART、SPI、I2C、LCD、MMC等有了太多书籍、视频、示例代码修修改改总是可以用。<br /> 很多所谓驱动工程师实际上就是“调参工程师”。<br /> 我们群里有名火哥提出了一个概念:这些驱动就起一个“hardware enable”作用。<br /> 高级驱动比如USB、PCIE、HDMI、MIPI、GPU、WIFI、蓝牙、摄像头、声卡。<br /><br /> 体系非常复杂很少有人能讲清楚很多时候只是一笔带过。<br /> 配置一下应用层工具就了事能用就成。<br /> 这些高级驱动工作中需要专门人来负责非常专业。<br /> 他们是某一块专家比如摄像头专家、音频专家。<br /><br /> ③ 项目为王<br /> 你到一个公司是把产品做出来会涉及APP到内核到驱动全流程。<br /> 中小公司玩不起华为中兴配置需要是全面手。<br /> 大公司里只负责很小很小一块镙丝钉位置也不太稳固啊。<br /> 所以如果你不是立志成为某方面专家那就做一个全栈工程师吧。<br /><br /> ④ 调试很重要<br /> 都说代码是3分写7分调各种调试调优技术可以为你升职加薪加一把火。<br /> 基于上述4点我录制全新视频将有这些特点:<br /> 1. 快速入门<br /> 2. 实战项目<br /> 3. 驱动大全<br /> 4. 专题<br /> 5. 授人以渔<br /> 6. 要做任务<br /> 另外我们会使用多款芯片同时录制先讲通用原理再单独讲各个板子操作。<br /> 这些芯片涵盖主流芯片公司主流芯片让你学习工作无缝对接。<br /><img src="https://img-bss.csdn.net/201911180753564269.jpg" alt="" /><br /><br /><br /><br /> 1.快速入门<br /> 入门讲究是快速入门之后再慢慢深入<br /> 特别是对于急着找工作学生对于业余时间挑灯夜读工作了一定要快!<br /> 再从裸机、U-boot、内核、驱动这样路线学习就不适合了时间就拉得太长了。<br /> 搞不好学了后面忘了前面。<br /> 并且实际工作中并不需要你去弄懂U-boot会用就行:U-boot比驱动还复杂。<br /><br /> 讲哪些内容?<br /><img src="https://img-bss.csdn.net/201911180754297078.png" alt="" /><br /><br /> 怎么讲呢?<br /><br /> 混着讲<br /> 比如先讲LED APP知道APP怎么调用驱动再讲LED硬件原理和裸机最后讲驱动编写。<br /> 这样可以快速掌握嵌入式Linux整套开发流程<br /> 不必像以前那样光学习裸机就花上1、2个月。<br /> 而里面裸机课程也会让你在掌握硬件操作同时把单片机也学会了。<br /><br /> 讲基础技能<br /><br /> 中断、休眠-唤醒、异步通知、阻塞、内存映射等等机制会配合驱动和APP来讲解。<br /> 这些技能是嵌入式Linux开发基础。<br /> 而这些驱动只会涉及LED、按制、LCD等几个驱动。<br /> 掌握了这些输入、输出驱动和对应APP后你已经具备基本开发能力了。<br /><br /> 讲配置<br /> 我们从厂家、从方案公司基本上都可以拿到一套完整开发环境怎么去配置它?<br /> 需要懂shell和python等配置脚本。<br /><br /><br /> 效果效率优先<br /> 以前我都是现场写代码、现场写文档字写得慢降低了学习效率。<br /> 这次效果与效率统一考虑不再追求所有东西都现场写。<br /> 容易地方可先写好代码文档地方现场写。<br /><br /> 2.实战项目<br /> 会讲解这样涉及linux网关/服务器相关项目(不限于请多提建议):<br />  <img src="https://img-bss.csdn.net/201911180754541383.jpg" alt="" />            <br />       <br /> 定位为:快速掌握项目开发经验丰满简历。<br /> 涉及每一部分都会讲比如如果涉及蓝牙在这里只会讲怎么使用让你能写出程序;如果要深入可以看后面蓝牙专题。<br /><br /> 3. 驱动大全<br /> 包括基础驱动、高级驱动。<br /> 这些驱动都是独立成章深入讲解。<br /> 虽然基础驱动弱化了但是作为Linux系统开发人员这是必备技能并且从驱动去理解内核是一个好方法。<br /> 在讲解这些驱动时会把驱动运行环境比如内核调度进程线程等概念也讲出来这样就可以搭建一个知识体系。<br /> 没有这些知识体系对驱动理解就太肤浅了等于在Linux框架下写裸机一叶障目不见泰山。<br /> 定位为:工具、字典用到再学习。<br /><br /> 4. 专题<br /> 想深入学习任何内容都可独立为专题。<br /> 比如U-boot专题、内核内存管理专题、systemtap调试专题。<br />
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页