元素To图片演示

请参考以下元素：（这里案例Table）  官方文档

说明：1.引入dom-to-image.min.js；2.调用domtoimage.toJpeg(dom, param)方法；3.方法有toPng、toJpeg、toBlob、toSvg、toPixelData共5种。

原理：本质是将元素转为svg。故图片元素仅支持get且不能跨域。

兼容：1.对移动端兼容性不是很友好；2.不支持Safari；3.不支持IE。（本兼容文案摘自网络）

案例：

效果：

示例代码

HTML：

<div id="demo" class="layui-form">
</div>

JS：

<script src="https://lvbee.com.cn/fs/js/dom-to-image.min.js" type="text/javascript"></script>
function changeDomToImage() {
	var param = {};
	param['quality'] = 1;//质量0-1
	param['bgcolor'] = '#fff';//背景颜色
// 			param['width'] = 280;//宽度
	param['height'] = 200;//高度
	param['style'] = {margin:0,padding:'4px'};//追加样式
	
	var domObj = domtoimage.toJpeg(document.getElementById('demo'), param);
	domObj = domObj.then(function (dataUrl) {
		window.dataUrl = dataUrl;//存到全局变量，供下载时用。
		$("#my-dom-to-img").attr("src", dataUrl);
	});
	domObj = domObj.catch(function (error) {
		console.error('转图片失败!', error);
		layer.msg('插件转图片失败!');
	});
}

使用小技巧

1、如果转换不需要某些css样式(link)，可以使用js先“隐藏掉”指定css样式。

	
function operationLinkHrefAttr(isHide) {
	if (isHide) {
		$('link[href]').each(function() {
			var $me = $(this);
			$me.attr('data-href', $me.attr('href')).removeAttr('href');
		});
		return;
	}
	$('link[data-href]').each(function() {
		var $me = $(this);
		$me.attr('href', $me.attr('data-href')).removeAttr('data-href');
	});
}
// 使用：
operationLinkHrefAttr(true); //before
operationLinkHrefAttr(false); //after

2、在打印功能里，优先考虑转为image，再调用打印API。

operationLinkHrefAttr(true);
domtoimage.toJpeg(elem, param).then(function(dataUrl) {
	operationLinkHrefAttr(false);
	$parent.find('img').easyPrint({ ... });
});
//最后在...之后的回调里，$parent.remove();移除

更多请参考恶搞的使用。