前台将某元素转成图片且下载

场景：

某客户需要同事下载前台页面某div元素转换成图片并下载 (不知道何前台,只是让我帮忙查询html2canvas使用方法,因为他忙的顾不上看 233333.)

想法:

需要把div转成图片但是一般这种需求个人目前知道只有echarts这种需求才有用到（接触的少勿喷！）,而且echarts插件已经自带有下载属性功能,不过正好自己想研究下,看了很多帖子觉得可取的也就是将div转换成canvas画布,然后获取画布的base64码存在a标签中,页面弄个button 点击事件触发a标签然后下载

实现：

<div id="main" style="width: 400px;height:200px;"></div>
<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例（开头：图表显示区域）
	var myChart = echarts.init(document.getElementById('main'));
	// 指定图表的配置项和数据（图表数据及样式配置）
	option = {
	    backgroundColor: 'rgba(255,255,255,1)',
	    toolbox: {
	        show : true,
	        feature : {
	            mark : {show: true},
	            restore : {show: true},
	            saveAsImage : {
	                show: true,
	                pixelRatio: 1,
	                title : '保存为图片',
	                type : 'png',
	                lang : ['点击保存']         
	            }
	        }
	    },
	    series : [
	        {
	            name:'业务指标',
	            type:'gauge',
	            detail : {formatter:'{value}%'},
	            data:[{value: 50, name: '完成率'}]
	        }
	    ]
	};
	myChart.setOption(option);
</script>

主要属性就是saveAsImage 属性
随便找了个官网案例：/examples/?c=gauge
还有需要说的是echarts获取base64码的方法是getDataURL()
如下方可以生成同样的图片可能没有背景色什么的

<div class="showImg"></div>
<script type="text/javascript">
	var picBase64Info = myChart.getDataURL(); 
	$(".showImg").html('<img src="'+picBase64Info+'"/>')
</script>

2.1基本原理实现：

<img id="ringoImage" alt="" src=""/></p>
<div><a onclick="down()" href="javascript:void(0);">下载图片</div>
<div class="base64"></div>

<script type="text/javascript">
/* 根据图片生成画布*/
function convertImageToCanvas(image) {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image, 0, 0);
    return canvas;
}
/* 下载图片*/
function down() {
    var sampleImage = document.getElementById("ringoImage"),
    canvas = convertImageToCanvas(sampleImage);
    url = canvas.toDataURL("image/png");//PNG格式
    //以下代码为下载此图片功能
    var triggerDownload = $("#download").attr("href", url).attr("download", "");
    triggerDownload[0].click();
}
</script>

将img图片塞进创建的canvas中画布，那么问题来了如果我是用的不是echarts，怎么将div转换成img格式?？？

2.2 html2canvas插件实现：解决上方疑问

首先先准备js文件：

<body>
    <div  style = " width: 500px;height: 200px;background: red;"></div>
    <button onclick="downloadBTN()">查询 </button>
    <a id="down_button">下载</a>
</body>
<script src=""></script>
<script src="-1.10."></script>
<script type="text/javascript">
    function downloadBTN(){
       html2canvas($("#test"), {
            onrendered: function (canvas) {
                $('#down_button').attr('href', canvas.toDataURL());
                console.log(canvas.toDataURL());
                $('#down_button').attr('download', '');
                //模拟a标签必须使用[0]  不能直接$('#').click()
                $('#down_button')[0].click();
            }
        });
    }
</script>

html2canvas是将你获取的元素id生成画布图，然后返回画布元素直接可以拿来使用其方法。

忠告：
如果做什么事都没有反对声，那么这个事绝对是不完美的
做什么事可以做不到，但是你听到这件事连想法都无是可怕可悲的

— 是梦终空断执念

秒客网

前台将某元素转成图片且下载

场景：

想法:

实现：

2.1基本原理实现：

2.2 html2canvas插件实现：解决上方疑问

相关文章