html页面使用canvas保存为图片

html2canvas 官方GitHub https://github.com/niklasvh/html2canvas

Canvas2Image.js 第三方库 https://github.com/hongru/canvas2image

 

 生成图片的清晰度取决于html转换成的canvas的清晰度：

1. 将canvas的属性width和height属性放大为2倍（或者设置为devicePixelRatio倍），最后将canvas的CSS样式width和height设置为原先1倍的大小
2. 更改百分比布局为px布局（如果原先是百分比布局的话）
3. 关闭canvas默认的抗锯齿设置
4. 设置模糊元素的width和height为素材原有宽高，然后通过transform: scale进行缩放。这里scale的数值由具体需求决定。

 

含有跨域图片的配置：

由于canvas对于图片资源的同源限制，如果画布中包含跨域的图片资源则会污染画布，造成生成图片样式混乱或者html2canvas方法不执行等问题。

针对CDN中的图片的配置

要求CDN的图片配置好响应CORS头

开启html2canvas的useCORS配置项

针对微信用户头像的配置

如果需要将微信平台中的用户头像一并保存为图片，可通过配置服务端代理转发(forward)实现。 

 

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

		function htmlDomToImg(value) {
			var cntElem = $(value)[0]
			var shareContent = cntElem //需要截图的包裹的（原生的）DOM 对象
			var width = shareContent.offsetWidth //获取dom 宽度
			var height = shareContent.offsetHeight //获取dom 高度
			var canvas = document.createElement("canvas") //创建一个canvas节点
			var scale = 2 //定义任意放大倍数 支持小数
			canvas.width = width * scale //定义canvas 宽度 * 缩放
			canvas.height = height * scale //定义canvas 高度 * 缩放
			canvas.getContext("2d").scale(scale, scale) //获取 context,设置 scale缩放当前绘图至更大或更小
			var opts = {
				// html2canvas配置项
				scale: scale, // 添加的 scale 参数
				canvas: canvas, //自定义 canvas画布
				width: width, //canvas的宽度，dom 原始宽度
				height: height,
				background: "#1e9f", //canvas的背景颜色
				letterRendering: false, //在设置了字间距的时候有用
				logging: true, //日志开关，在console.log()中输出信息
				allowTaint: false, //否允许被污染,被污染的canvas不能再使用画布的 toBlob(), toDataURL() 或 getImageData() 方法，调用它们会抛出安全错误
				tainTest: true, //是否在渲染前测试图片
				timeout: 0, //图片加载延迟，默认延迟为0，单位毫秒
				useCORS: true // 【重要】开启跨域配置
			}
			// html转为canvas
			html2canvas(shareContent, opts).then(function(canvas) {
				
				var context = canvas.getContext('2d')
				// 【重要】关闭抗锯齿
				context.mozImageSmoothingEnabled = false
				context.webkitImageSmoothingEnabled = false
				context.msImageSmoothingEnabled = false
				context.imageSmoothingEnabled = false

				//  canvas转为图片
				// 【重要】默认转化的格式为png,也可设置为其他格式
				//  Canvas2Image.saveAsJPEG(canvasObj, width, height)  保存为本地图片
				var img = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height);

				$('.prize').append(img)
				$(img).css({
					"width": canvas.width / 2 + "px",
					"height": canvas.height / 2 + "px",
				}).addClass('f-full')
				
			})
		}

参考博文1

参考博文2