将HTML页面生成图片

Today,客户又又又提出一个需求:"这个页面我要一个图片,要能下载的图片!"

把html页面变成图片这个应该不是太难,于是我只能去百度查我需要的答案,百度上好多前辈给了一个html2canvas这个东西.

这是对它的介绍:

html2canvas通过获取页面的DOM和元素的样式信息，并将其渲染成canvas图片，从而实现给页面截图的功能。

其实它的用法非常简单,有的博客直接给出了详细的步骤,而我只是将其照抄下来并变成我的东西而已,在此写下来防止以后再用到,

一, 导入html2canvas.min.js

大家可以去html2canvas官网看看 http://html2canvas.hertzen.com/

可以看到上边给了两个js,可以下载的, but,我下载了这两个文件之后发现不能用,why?js中好像有好多中文,总之格式不对,导入之后报了许多错误,没办法,只能自己找下载的地方,于是我到这个网站里边下载js http://www.downza.cn/soft/213349.html 不过不要下错了,好几个下载按钮都是下载的.exe文件,

下载下来的是一个压缩文件,我们可以去压缩文件的dist目录下找到这个js 将其导入到我们项目中,并且

二,写js方法

这是我的页面

这是我的代码

点击生成图片之后即可将本html页面生成图片如图:

三,你以为这就完了?wait~~

这个图片竟然生成到html的下边了

我要的效果是跳转到这个页面的时候直接看到的是一个图片了,

我的思路是介个样子的:底下的js方法不用点击事件,当跳转到这个页面的时候直接生成图片并将html页面隐藏. 哦,beatiful!

于是我的代码变成了这样

我的页面变成了这样

你们看,这直接就成为了一个图片,并且我的html页面也被隐藏了.

ok,把测试代码copy到自己项目里就ok了,不说了,我有点飘了~~~~~~~

对了,这个还支持动态的html页面哦,比如页面有从后台传来的值,这些都是没有关系的呦!

更新-----------------------------------

我自以为很牛逼的完成了这个功能,两天后收到客户的反馈:"这个图片像素真鸡儿低,啥都看不清,还不如html页面呢!"

我还能怎样,继续改呗,

之后我再网上发现好多用html2cnavas的都出现了这个问题,好像是需要把canvas画布的宽高扩大为原来的二倍再缩小,具体原因我也想不起来了.

于是我更换了我的代码如下:

$(document).ready(function(){
		var w = $(".m-box").width();  
		var h = $(".m-box").height();//要将 canvas 的宽高设置成容器宽高的 2 倍  
		var canvas = document.createElement("canvas");  
	    canvas.width = w * 2;  
	    canvas.height = h * 2;  
	    canvas.style.width = w + "px";  
	    canvas.style.height = h + "px"; 
		var context = canvas.getContext("2d");//然后将画布缩放，将图像放大两倍画到画布上  
	    context.scale(2,2);  
	    html2canvas(document.body, {canvas: canvas,
	    	onrendered: function(canvas) {  
	    		var dataUrl = canvas.toDataURL();
	            var newImg = document.createElement("img");
	            newImg.src =  dataUrl;
	            document.body.appendChild(newImg);
	            $("img").css({
	                "width": canvas.width / 2 + "px",
	                "height": canvas.height / 2 + "px",
	            })
	    	}  
	    }); 
	    $(".m-box").attr("style","display:none");
	})

之前的代码可以不要了,(".m-box")是我的最大div,

ok,图片果然变得非常清晰,

好吧,就这样了

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

更

好吧,我就知道事情不会那么简单就结束了,客户要下载这张图片

这个怎么办呢,因为这个图片是用canvas生成的,如果我的本地有这张图片那么下载它轻而易举,这个html页面只有一个img标签

于是我又参考了文章底部的博客,无需经过后端,直接在html页面下载

function save(){
		// 图片导出为 png 格式
		var type = 'png';
		var imgData = document.getElementsByTagName("img")[0].src;
		var _fixType = function(type) {
		    type = type.toLowerCase().replace(/jpg/i, 'jpeg');
		    var r = type.match(/png|jpeg|bmp|gif/)[0];
		    return 'image/' + r;
		};
		// 加工image data，替换mime type
		imgData = imgData.replace(_fixType(type),'image/octet-stream');
		/**
		 * 在本地进行文件保存
		 * @param  {String} data     要保存到本地的图片数据
		 * @param  {String} filename 文件名
		 */
		var saveFile = function(data, filename){
		    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
		    save_link.href = data;
		    save_link.download = filename;
		    var event = document.createEvent('MouseEvents');
		    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
		    save_link.dispatchEvent(event);
		};
		// 下载后的问题名
		var filename = 'card_' + (new Date()).getTime() + '.' + type;
		// download
		saveFile(imgData,filename);
	}

只需要一个点击事件就可以了,因为我需要用户进入这个页面看到的是图片和下载按钮,所以下载按钮先隐藏,之后显示就行了

参考: --------https://blog.csdn.net/maoxin604/article/details/22938453

参考: --------https://blog.csdn.net/lingfeng928/article/details/54140910

将HTML页面生成图片

猜你喜欢