如何将一个网页内含网络地址合成图片并支持下载？

最新推荐文章于 2024-07-08 22:40:20 发布

鸿的世界

最新推荐文章于 2024-07-08 22:40:20 发布

阅读量105

点赞数

文章标签： html javascript css

本文链接：https://blog.csdn.net/weixin_55187334/article/details/129086729

版权

假如一个网页内容如下，内含有多个网络地址的图片，想要通过下载图片按钮下载指定元素内的效果，并且带上相关样式，那么就需要对网络图片地址的内容进行base64处理，通过改变src的网络地址成为 src="data:image/png;base64,...."，

注意：

1、如果要html合成图片中将图片通过CSS的引入方式可能会造成空白显示的情况，尽可能是用<img> 标签的 src 引入base64的图的形式。
2、下载按钮中超链接a标签注意必须要加download这个属性，用于下载时生成的图片的名称，不然下载会不起效果。

<html>
<head>
/*
*头部的html内容，注意引用JQUERY
*。。。。。。。。。。。。
*/
</head>
<body>
 <!---。。。其他网页模块内容或文字背景等。。。-->

<div class="main">
	<img src="网络图片地址0" class="netPic pimg" id="netPic0">
	<img src="网络图片地址1" class="netPic pimg" id="netPic1">
	<img src="网络图片地址2" class="netPic pimg" id="netPic2">
	<!---...更多的netPicX...-->
    <!---。。。其他网页模块内容或文字背景等。。。-->
</div>

<div style="display:none;" class="downImg"> 
	<a download="自定义下载html合成图的名称[重点].jpg" class="downHtmlImg">下载图片分享</a>			
</div>

 <!---。。。其他网页模块内容或文字背景等。。。-->

</body>
</html>

首先要在网页中引入html2canvas

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

然后在网页中加入<canvas id="c1" width="1" height="1"></canvas> 是为了判断是否支持canvas

接下来是要对网络地址进行生成base64 ,这里用到了 canvas 和Promise.all,加入如下JS内容就可以实现将当前网页指定模块进行合成图片，并下载了。

//判断浏览器是否支持canvas
	if(document.getElementById("c1").getContext){	
		function myBase64(img,isadd){
			function myBase64Image(img,width,height) {
				var canvas = document.createElement("canvas");
				canvas.width = width ? width : img.width;
				canvas.height = height ? height : img.height;
				var ctx = canvas.getContext("2d");
				ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
				
				//按照传参进行判断是否在每个网络图内写入文字
				if(isadd==1){	
					ctx.font = "50px Georgia";
					ctx.fillStyle = "#efefef";
					//后面俩参数是写入文字的相对X,Y
					ctx.fillText("写入的文字", canvas.width/3,canvas.height/2);
				}
				
				var dataURL = canvas.toDataURL();
				return dataURL;
			}
			var image = new Image();
			image .setAttribute('crossOrigin', 'anonymous')//解决跨域
			image.crossOrigin = '';
			image.src = img;
			
			return new Promise((resolve,reject)=>{
				image.onload =function (){
					resolve(myBase64Image(image));//将base64传给done上传处理					
				}
			});	
		}
		
	$(".downImg").hide();
	
	var aa = Promise.all([				
		this.myBase64('网络图片地址0'),
		this.myBase64('网络图片地址1'),
		this.myBase64('网络图片地址2'),
		/**
		* ......可填多个网络地址一次性执行.....
		*/
	]).then(res=>{
		// 分别将图片地址分别返回base64	
		var endid = 3;//需要执行成base64的网络图片地址总数,本次demo 3个网络图
		for(var id=0;id < endid;id++){
			//重新替换覆盖网络地址为base64,因网络地址合成canvas会是空白。
			$("#netPic"+id).attr('src',res[id]);	
			$("#netPic"+id).removeClass("pimg");	
		}
		//判断是否全部将图片都base64,如果是则可以合成当前需要生成的图片的模块比如：样式.main 体内的模块合成
		if(!$(".netPic").hasClass("pimg")){			
			html2canvas(document.querySelector(".main")).then(function (canvas) {				
			document .querySelector(".downHtmlImg") .setAttribute("href", canvas.toDataURL()) });
			$(".downImg").show();		
		}
	});

鸿的世界

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何将一个网页内含网络地址合成图片并支持下载？

如果要html合成图片中将图片通过CSS的引入方式可能会造成空白显示的情况，尽可能是用标签的 src 引入base64的图的形式。这里用到了 canvas 和Promise.all,
复制链接

扫一扫