将页面保存成图片并长按保存图片html2canvas+mui

大脸盘猫猫
387 阅读5分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

参考 ：

1.JS - 使用 html2canvas 将页面保存成图片（或对指定元素截图）

2.js将canvas保存成图片并下载

3.使用mui实现长按保存图片_Ctrl30-CSDN博客

我做的一个需要生成二维码 并长按保存图片的页面，用了mui+html2canvas+qrcode

qrcode.js生成二维码插件

测试时发现微信和手机浏览器都有自己的长按图片保存功能，所以说不需要使用别的了

新的html

		<div class="mui-content">
			<div class="mui-content-padded" id="boxWrap"  style="margin: 5px;" >
				<div class="XyPic" id="capture">
					<img src="/images/校友证书.jpg" style="width: 100%;"  />
					<div id="name"><?=$name ?></div>
					<div id="bianhao">SJZXY<span style="color: red;"><?=$id ?></span></div>					
					<div id="qrcode"></div>
					<div id="baoc">
						长按保存图片<br/>分享到朋友圈
					</div>	
					<div id="canvasWrap">
						
					</div>									
				</div>

			</div>
			


		</div>

css

		<style>
			.XyPic{
				width: 7.3rem;
				height: 10.94rem;
				position: relative;
				z-index: 9;
			}
			#name{
				font-size: 36px;
				font-weight: 400;
				color: black;
				position: absolute;
				top: 3.58rem;
				left:2.8rem;
			}
			#bianhao{
				font-size: 18px;
				font-weight: 400;				
				position: absolute;
				bottom: 2rem;
				left:5rem;				
			}
			#qrcode{
/* 				width: 2.5rem;
				height: 2.5rem; */
				position: absolute;
				bottom: 2.4rem;
				left:1rem;					
			}
			#baoc{
				font-size: 11px;				
				color:#365C84 ;
				position: absolute;
				bottom: 1.7rem;
				left:1.2rem;					
			}
			#canvasWrap{
				position: absolute;
				top: 0;
				z-index: 99;
			}
		</style>

js

		<script src="../js/mui.min.js"></script>
		<script src="../js/qrcode.js"></script>
		<script type="text/javascript" src="../js/html2canvas.js"></script>
		<script>
			document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
			mui.init( { gestureConfig:{
						tap: true, //默认为true
						doubletap: true, //默认为false
						longtap: true, //默认为false
						swipe: true, //默认为true
						drag: true, //默认为true
						hold:true,//默认为false，不监听
						release:false//默认为false，不监听
					}});

			window.onload =function(){
				// 生成二维码
				var qrcode = new QRCode(document.getElementById("qrcode"), {
					width : 100,//设置宽高
					height : 100
				});
				qrcode.makeCode("http://www.xiaoyou.sjzlg.com:7070");

				html2canvas(document.querySelector("#capture")).then(canvas => {
					var img = document.createElement("img");
					img.src = canvas.toDataURL("image/png"); // 将canvas转换成img的src流
					img.style.cssText = "width: 100%;"
					document.querySelector("#canvasWrap").appendChild(img);				 
				  
				});
				
			   
	    	}
	    </script>

下面时旧的

html部分

		<div class="mui-content">
			<div class="mui-content-padded" style="margin: 5px;" >
				<div class="XyPic" id="capture">
					<img src="/images/校友证书.jpg" style="width: 100%;"  />
					<div id="name">于志强</div>
					<div id="bianhao">SJZXY<span style="color: red;">0001</span></div>					
					<div id="qrcode"></div>
					<div id="baoc">
						长按保存图片<br/>分享到朋友圈
					</div>					
				</div>
				
			</div>

js部分

		<script src="../js/mui.min.js"></script>
		<script src="../js/qrcode.js"></script>
		<script type="text/javascript" src="../js/html2canvas.js"></script>
		<script>
			document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
			mui.init( { gestureConfig:{
						tap: true, //默认为true
						doubletap: true, //默认为false
						longtap: true, //默认为false
						swipe: true, //默认为true
						drag: true, //默认为true
						hold:true,//默认为false，不监听
						release:false//默认为false，不监听
					}});

			window.onload =function(){
				// 生成二维码
				var qrcode = new QRCode(document.getElementById("qrcode"), {
					width : 100,//设置宽高
					height : 100
				});
				qrcode.makeCode("http://www.baidu.com");
			   
			}
			


		document.addEventListener("longtap", function(event) { 
			var name = event.target.tagName; 
			if(name === "IMG") { 
				html2canvas(document.querySelector("#capture")).then(canvas => {
					downLoad(saveAsJPG(canvas));
				  // document.body.appendChild(canvas)
				});
				
			} 
		}); 

		function saveAsJPG(canvas) {
			return canvas.toDataURL("image/jpeg");
		};	

		function downLoad(url){
			var oA = document.createElement("a");
			oA.download = '校友证';// 设置下载的文件名，默认是'下载'
			oA.href = url;
			document.body.appendChild(oA);
			oA.click();
			oA.remove(); // 下载之后把创建的元素删除
		};	  
			  

  		  
		</script>

一：JS - 使用 html2canvas 将页面保存成图片（或对指定元素截图）

    有时我们需要实现在浏览器端直接对整个或部分页面进行截屏，比如移动端常见的“长按网页保存为图片”功能。这个借助 html2canvas 这个第三方 js 库即可实现，下面通过样例演示其如何使用。

一、基本介绍

1，什么是 html2canvas

  • html2canvas 可以通过获取 HTML 的某个元素，然后生成 Canvas，从而让用户保存为图片。
  • html2canvas 工作原理是将当页面渲染成一个 Canvas 图片，通过读取 DOM 并将不同的样式应用到这些元素上。
  • html2canvas 不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。

2，适用的浏览器

只要浏览器支持 Canvas 即可，包括：Firefox 3.5+、Google Chrome、Opera 新的版本、IE9 以上的浏览器。

3，注意事项

当然并不是所有的页面元素都可以进行转换的，下面是不支持的情况：

  • 不支持 iframe
  • 不支持跨域图片（可以先将线上图片转换成 base64，然后用 base64 作为图片路径）
  • 不支持 flash
  • 不支持 transform、transition 过渡、animation 动画（备注：transform 初始布局是可以的，但是不能参与动画类的操作）

4，安装配置

（1）首先到官网将 html2canvas.js 下载到本地。

（2）然后在页面中将其引用即可。

1<script type=``"text/javascript" src=``"js/html2canvas.js"``></script>

二、基本用法

1，将整个页面转成 Canvas

（1）效果图

  • 点击“开始生成”按钮后，会将整个页面渲染成一个 canvas，并将这个 canvas 添加到页面尾部。
  • 右键点击生成的 canvas，可以将其作为图片保存到本地。

原文:JS - 使用 html2canvas 将页面保存成图片（或对指定元素截图）​编辑

（2）样例代码

1234567891011121314151617181920212223<!DOCTYPE html>``<html>``  ``<head>``    ``<meta charset=``"utf-8"``>``    ``<title>hangge.com</title>``  ``</head>``  ``<body style=``"margin:0px"``>``    ``<div id=``"capture" style=``"padding: 10px; background: #f5da55; width: 200px;"``>``      ``<h4 style=``"color: #000; "``>欢迎访问 hangge.com</h4>``    ``</div>``    ``<button type=``"button" name=``"button" onclick=``"convert()"``>开始生成</button>``    ``<br>``    ``<script type=``"text/javascript" src=``"js/html2canvas.js"``></script>``    ``<script type=``"text/javascript"``>``      ``//开始转换``      ``function convert() {``        ``html2canvas(document.body).then(canvas => {``          ``document.body.appendChild(canvas)``        ``});``      ``}``    ``</script>``  ``</body>``</html>

2，将指定 DOM 元素转成 Canvas

下面样例只将按钮上方的 div 渲染成 Canvas。

原文:JS - 使用 html2canvas 将页面保存成图片（或对指定元素截图）​编辑

123html2canvas(document.querySelector(``"#capture"``)).then(canvas => {``  ``document.body.appendChild(canvas)``});

3，将 Canvas 转换成 base64 形式

（1）上面样例生成 canvas 后，便直接显示在页面上进行预览。我们也可以将生成的 canvas 转成 base64 形式用于提交到后台，或者作为  元素的 src 属性来显示。

原文:JS - 使用 html2canvas 将页面保存成图片（或对指定元素截图）​编辑

1234html2canvas(document.querySelector(``"#capture"``)).then(canvas => {``  ``var imgUrl = canvas.toDataURL(``"image/png"``); ``// 将canvas转换成img的src流``  ``console.log(``"base64编码数据："``, imgUrl);``});


（2）转换时可以设置截图质量（0~1）

1234html2canvas(document.querySelector(``"#capture"``)).then(canvas => {``  ``var imgUrl = canvas.toDataURL(``"image/png"``, 1); ``// 此方法可以设置截图质量（0-1）``  ``console.log(``"base64编码数据："``, imgUrl);``});

三、进阶用法

1，设置生成的 Canvas 的高度和宽度

html2canvas 在使用时还有许多可选的配置参数，下面样例生成一个 75*75 的 canvas。

原文:JS - 使用 html2canvas 将页面保存成图片（或对指定元素截图）​编辑

123456html2canvas(document.querySelector(``"#capture"``),{``  ``width: 75,``  ``height: 75``}).then(canvas => {``  ``document.body.appendChild(canvas)``});

2，设置 Canvas 的背景色

（1）使用 backgroundColor 这个属性可以设置 canvas 的背景色：

  • 默认值为白色（#ffffff）
  • 如果想要背景透明，可以将其设为 null

（2）下面将背景色改成绿色

原文:JS - 使用 html2canvas 将页面保存成图片（或对指定元素截图）​编辑

1234567html2canvas(document.querySelector(``"#capture"``),{``  ``width: 240,``  ``height: 120,``  ``backgroundColor: ``"#00ff00"``}).then(canvas => {``  ``document.body.appendChild(canvas)``});

3，设置放大倍数

（1）使用 scale 属性可以修改渲染时的放大倍数（默认为 1），将其调大可以解决低分辨率设备下生成的图片模糊问题。

（2）下面是当 scale 设置为2时，生成的图片。

原文:JS - 使用 html2canvas 将页面保存成图片（或对指定元素截图）​编辑

12345html2canvas(document.querySelector(``"#capture"``),{``  ``scale: 2``}).then(canvas => {``  ``document.body.appendChild(canvas)``});

4，指定渲染的 Canvas

如果页面上原先就有个 canvas 元素，我们希望可以将图片绘制在它上面，可以使用 canvas 属性设置。

原文:JS - 使用 html2canvas 将页面保存成图片（或对指定元素截图）​编辑

1234567891011121314151617181920212223242526<!DOCTYPE html>``<html>``  ``<head>``    ``<meta charset=``"utf-8"``>``    ``<title>hangge.com</title>``  ``</head>``  ``<body style=``"margin:0px"``>``    ``<div id=``"capture" style=``"padding: 10px; background: #f5da55; width: 200px;"``>``      ``<h4 style=``"color: #000; "``>欢迎访问 hangge.com</h4>``    ``</div>``    ``<button type=``"button" name=``"button" onclick=``"convert()"``>开始生成</button>``    ``<br>``    ``<canvas id=``"myCanvas" width=``"220" height=``"84"``></canvas>``    ``<script type=``"text/javascript" src=``"js/html2canvas.js"``></script>``    ``<script type=``"text/javascript"``>``      ``//开始转换``      ``function convert() {``        ``html2canvas(document.querySelector(``"#capture"``),{``          ``canvas: document.querySelector(``"#myCanvas"``)``        ``}).then(canvas => {``        ``});``      ``}``    ``</script>``  ``</body>``</html>


web得胜

js将canvas保存成图片并下载

1234<``canvas id="canvas" width="400" height="400"></``canvas``>``<``div``>``    ``<``button id="save">保存</``button``>``</``div``>

　　

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465var arr = [``    ``{locations:[[0,0],[200,200],[0,400]],color:``"red"``},``    ``{locations:[[0,0],[400,0],[200,200]],color:``"orange"``},``    ``{locations:[[0,400],[100,300],[200,400]],color:``"yellow"``},``    ``{locations:[[100,300],[200,200],[300,300],[200,400]],color:``"green"``},``    ``{locations:[[300,100],[200,200],[300,300]],color:``"blue"``},``    ``{locations:[[300,100],[400,0],[400,200],[300,300]],color:``"indigo"``},``    ``{locations:[[200,400],[400,400],[400,200]],color:``"purple"``}``];``var oCanvas = document.getElementById(``"canvas"``);``var ctx = oCanvas.getContext(``"2d"``);``for``(``let i=0;i<arr.length;i++){``    ``draw(arr[i],ctx);``}``function draw(item,ctx){``    ``ctx.beginPath();``    ``ctx.moveTo(item.locations[0][0],item.locations[0][1]);``    ``for``(``let i = 0;i<item.locations.length;i++){``        ``let x = item.locations[i][0];``        ``let y = item.locations[i][1];``        ``ctx.lineTo(x,y);``        ``console.log(1234567)``    ``}``    ``ctx.closePath();``         ``ctx.fillStyle = item.color;``    ``ctx.fill();``         ``ctx.strokeStyle = ``"#000"``;``    ``ctx.lineWidth = 2;``    ``ctx.stroke();``}``var imgId = document.getElementById(``"imgId"``);``document.getElementById(``"save"``).onclick = ``function (){``    ``downLoad(saveAsPNG(canvas));``}``// 保存成png格式的图片``function saveAsPNG(canvas) {``    ``return canvas.toDataURL(``"image/png"``);``}``// 保存成jpg格式的图片``function saveAsJPG(canvas) {``    ``return canvas.toDataURL(``"image/jpeg"``);``}``// 保存成bmp格式的图片  目前浏览器支持性不好``function saveAsBMP(canvas) {``    ``return canvas.toDataURL(``"image/bmp"``);``}``/**`` ``* @author web得胜`` ``* @param {String} url 需要下载的文件地址`` ``* */``function downLoad(url){``    ``var oA = document.createElement(``"a"``);``    ``oA.download = ``''``;``// 设置下载的文件名，默认是'下载'``    ``oA.href = url;``    ``document.body.appendChild(oA);``    ``oA.click();``    ``oA.remove(); ``// 下载之后把创建的元素删除``}

　文中图片是个七巧板，如下:

　

​编辑

　　

首先初始化mui（longtap是我们要用到的，longtap默认为false，如果没有初始化为true，则长按事件无效）

 mui.init( { gestureConfig:{
tap: true, //默认为true
doubletap: true, //默认为false
longtap: true, //默认为false
swipe: true, //默认为true
drag: true, //默认为true
hold:true,//默认为false，不监听
release:false//默认为false，不监听
}});
//给需要长按保存图片的img标签设置 class='saveImg'
var divs = document.getElementsByClassName('saveImg');
for(var i = 0;i<divs.length;i++){
divs[i].addEventListener('longtap', function () {
//开启弹框
mui('#picture').popover('toggle');
var imgurl = this.src;
document.getElementById('saveImg').addEventListener('tap', function () {
var imgDtask = plus.downloader.createDownload(imgurl,{method:'GET'}, function (d,status) {
if(status == 200){
plus.gallery.save(d.filename, function () {//保存到相册
plus.io.resolveLocalFileSystemURL(d.filename, function (enpty) {
// 关闭弹框
mui('#picture').popover('toggle');
mui.toast('保存成功')
});

})
}else{
mui.toast('保存失败')
}
});
imgDtask.start();
});

})
}
<-- 弹框的html-->\

\             
    \                 
  • \                     保存图片\                 
    • \             
\             
    \                 
  • \                     取消\                 
    • \             
\         
\ ps：要引入mui的js和css

​

avatar
文章
阅读
粉丝