今天要分享的是用html2canvas根据自己的需求生成截图，并且修复html2canvas截图模糊，以及绕过服务器图片保存至本地。　　

　　只需要短短的几行代码，就能根据所需的dom截图，是不是很方便，但是生成的图片模糊

//直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊

			html2canvas(document.querySelector('div')).then(function(canvas) {

            		document.body.appendChild(canvas);

      	 	 })

　　

常见的解决方案是，生成一个多倍的画布，然后将其放在较小的容器内，这样就解决了截屏模糊的尴尬。

还有一个问题是怎么将图片绕过服务器保存至本地，canvas有个toDataURL的方法，然后a标签有个download属性，感觉简直天造之和。当然微信中屏蔽下载，可以借助微信的webview中的一个内置规则，只要是a标签(不含href属性)里面嵌套Img的，可以正常呼出保存至手机和分享给朋友的菜单栏。

以下是简单的demo

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			*{

				margin: 0;

			}

			.test{

				width: 100px;

				height: 100px;

				text-align: center;

				line-height: 100px;

				background-color: #87CEEB;

				display: inline-block;

				vertical-align:top;

			}

			canvas{

				margin-right: 5px;

			}

			.down{

				float: right;

   				 margin: 40px 10px;

			}

		</style>

	</head>

	<body>

	<a class="down" href="" download="downImg">下载</a>

	<div class="test">测试</div>

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

<script>

	//直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊

	html2canvas(document.querySelector('div')).then(function(canvas) {

    		document.body.appendChild(canvas);

 	 })

	//创建一个新的canvas

	var canvas2 = document.createElement("canvas");

	let _canvas = document.querySelector('div');

	var w = parseInt(window.getComputedStyle(_canvas).width);

	var h = parseInt(window.getComputedStyle(_canvas).height);

	//将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了

	canvas2.width = w * 2;

	canvas2.height = h * 2;

	canvas2.style.width = w + "px";

	canvas2.style.height = h + "px";

	//可以按照自己的需求，对context的参数修改,translate指的是偏移量

	//	var context = canvas.getContext("2d");

	//	context.translate(0,0);

	var context = canvas2.getContext("2d");

	context.scale(2,2);

	 html2canvas(document.querySelector('div'),{canvas:canvas2}).then(function(canvas) {

    		document.body.appendChild(canvas);

    		//canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载

    		document.querySelector(".down").setAttribute('href',canvas.toDataURL());

 	 });

</script>

	</body>

</html>

　　

js截图及绕过服务器图片保存至本地（html2canvas）的更多相关文章

  1. 2018-5-22-SublimeText-粘贴图片保存到本地

    title author date CreateTime categories SublimeText 粘贴图片保存到本地 lindexi 2018-05-22 15:15:26 +0800 2018 ...

  2. 微信小程序图片保存到本地

    微信小程序图片保存到本地是一个常用功能: 这里讲解下完整实现思路: 因为微信官方的授权只弹一次,用户拒绝后再次调用,就需要结合button组件的微信开放能力来调起,以下方案在微信各种授权中可参考. w ...

  3. php 获取远程图片保存到本地

    php 获取远程图片保存到本地 使用两个函数 1.获取远程文件 2.把图片保存到本地 /** * 获取远程图片并把它保存到本地 * $url 是远程图片的完整URL地址,不能为空. */ functi ...

  4. iOS 将图片保存到本地

    //将图片保存到本地 + (void)SaveImageToLocal:(UIImage*)image Keys:(NSString*)key {     NSUserDefaults* prefer ...

  5. iOS-iOS调用相机调用相册【将图片保存到本地相册】

    设置头部代理 <UINavigationControllerDelegate, UIImagePickerControllerDelegate> 1.调用相机 检测前置摄像头是否可用 - ...

  6. Android View转为图片保存为本地文件，异步监听回调操作结果；

    把手机上的一个View或ViewGroup转为Bitmap,再把Bitmap保存为.png格式的图片: 由于View转Bitmap.和Bitmap转图片都是耗时操作,(生成一个1M的图片大约500ms ...

  7. React Native之图片保存到本地相册(ios android)

    React Native之图片保存到本地相册(ios android) 一,需求分析 1,react native保存网络图片到相册,iOS端可以用RN自带的CameraRoll完美解决,但是andr ...

  8. FFmpeg解码视频帧为jpg图片保存到本地

    FFmpeg解码视频帧为jpg图片保存到本地 - CSDN博客 https://blog.csdn.net/qq_28284547/article/details/78151635

  9. java将base64解析图片保存到本地。

    将base64解析图片保存到本地的两个方法 /** * base64转图片 * @param base64str base64码 * @param savePath 图片路径 * @return */ ...

随机推荐

  1. 第43节：Java学前要点

    Java学前要点 01 学习Java,有人推荐去培训,有人说没用,其实有钱的,不知道如何学,或者逼不得已去的就可以,也有人自己为了不花这些钱,而选择自学,我觉得也行. 现在大部分人学东西要学的好,都是 ...

  2. Aseprite入门：第一个gif动图

    前言:Aseprite入门教程 1.新建图片: 选择新建文件,然后选定宽高和颜色及背景类型,点击OK进行图片的创建: 2.绘制一个基础图形,为了方便还是选用球形: 填充上颜色: 美化(添加阴影增加小球 ...

  3. 几种归一化方法的概念及python实现

    一 (0,1)标准化: 这是最简单也是最容易想到的方法,通过遍历feature vector里的每一个数据,将Max和Min的记录下来,并通过Max-Min作为基数(即Min=0,Max=1)进行数据 ...

  4. node的安装及基本使用！

    一.node的基本安装和使用 1.什么是node.js 答:node.js是JavaScript运行环境.实际上它是Google  V8引擎进行了封装.V8引擎执行JavaScript的速度非常的 快 ...

  5. python(leetcode)-66加一问题

    给定一个由整数组成的非空数组所表示的非负整数,在该数的基础上加一. 最高位数字存放在数组的首位, 数组中每个元素只存储一个数字. 你可以假设除了整数 0 之外,这个整数不会以零开头. 示例 1: 输入 ...

  6. python中np.multiply（）、np.dot（）和星号（*）三种乘法运算的区别（转）

    为了区分三种乘法运算的规则,具体分析如下: import numpy as np 1. np.multiply()函数 函数作用 数组和矩阵对应位置相乘,输出与相乘数组/矩阵的大小一致 1.1数组场景 ...

  7. springBoot(9)---定时任务,异步任务

    定时任务,异步任务 一.定时任务 1.步骤: 1:在启动类上写@EnableScheduling注解 2:在要定时任务的类上写@component 3:在要定时执行的方法上写@Scheduled(fi ...

  8. Selenuim自动化测试模型

    本章内容: 概念介绍 自动化测试模型 一.概念 自动化测试库.框架.工具之间的区别: 库是由代码集合成的一个产品,供程序员调用,面向对象的代码组织形成的库叫类库,面向过程的代码组织形成的库叫函数库. ...

  9. 微软新动向之Android和IOS应用 visual studio 2015 Cordova[原创]

    自萨蒂亚·纳德拉(Satya Nadella)上任微软CEO以来,可谓是惊喜不断,仿佛让世界尤其是我们.net程序员心中又燃起了希望.先是免费提供 iOS 版和安卓版 Office:然后在 xbox ...

  10. 物流一站式查询之TrackingMore篇

    连载篇提前看 物流一站式查询之TrackingMore篇 物流一站式查询之顺丰接口篇 物流一站式查询之快递100篇 快递查询接口 目前提供快递查询的接口平台有: Trackingmore 快递100 ...