vue3 html2canvas导出透明png图片
<template>
<div class="post">
<button @click="exportPNG">
下载图片
</button>
<div id="png">
<div id="myEcharts">
</div>
<div id="myEcharts2">
</div>
</div>
</div>
</template>
<script lang="js">
import {
defineComponent
}
from 'vue';
import * as echarts from "echarts";
import html2canvas from 'html2canvas';
export
default defineComponent({
data() {
return {
chart:
null,
loading: false,
post: null
};
},
created() {
// fetch the data when the view is created and the data is
// already being observed
this.fetchData();
},
watch: {
// call again the method if the route changes
'$route': 'fetchData'
},
mounted() {
this.initChart();
this.initChart2();
},
methods: {
fetchData() {
this.post = null;
this.loading = true;
fetch('weatherforecast').then(r = >r.json()).then(json = >{
this.post = json;
this.loading = false;
return;
});
},
initChart() {
console.log('initChart...');
let chart = echarts.init(document.getElementById("myEcharts"), "purple-passion");
chart.setOption({
backgroundColor: 'transparent',
title: {
text: "2021年各月份销售量（单位：件）",
left: "center",
},
xAxis: {
type: "category",
data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
},
tooltip: {
trigger: "axis"
},
yAxis: {
type: "value"
},
series: [{
data: [606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737],
type: "line",
smooth: true,
itemStyle: {
normal: {
label: {
show: true,
position: "top",
formatter: "{c}"
}
}
}
}],
toolbox: {
show: true,
orient: "vertical",
left: "right",
top: "center",
feature: {
saveAsImage: {
show: true
},
// 保存图表
},
},
});
window.onresize = function() {
chart.resize();
};
},
initChart2() {
console.log('initChart2...');
let chart = echarts.init(document.getElementById("myEcharts2"), "purple-passion");
chart.setOption({
backgroundColor: 'transparent',
title: {
text: "2021年各月份销份额",
left: "center",
},
xAxis: {
type: "category",
data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
},
tooltip: {
trigger: "axis"
},
yAxis: {
type: "value"
},
series: [{
data: [606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737],
type: "bar",
smooth: true,
itemStyle: {
normal: {
label: {
show: true,
position: "top",
formatter: "{c}"
}
}
}
}],
});
},
async exportPNG() {
console.log('exportPNG...');
const el = document.getElementById('png') console.log('el:', el)
// const canvasFalse = document.createElement('canvas')
const width = parseInt(window.getComputedStyle(el).width) const height = parseInt(window.getComputedStyle(el).height) console.log('width:', width, 'height:', height) let canvas = await this.autoPicture('png', {
width,
height
});
if (canvas) {
let oImg = new Image();
oImg = canvas; // 导出图片
console.log(oImg);
var oA = document.createElement('a');
oA.download = '分享内容'; // 设置下载的文件名，默认是'下载'
oA.href = oImg;
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
}
},
async autoPicture(el, options) {
let {
scale = 1,
allowTaint = false,
useCORS = true,
width = '375',
height = '649',
backgroundColor = null
} = options const id = document.getElementById(el);
const canvas = await html2canvas(id, {
scale,
//缩放比例,默认为1
allowTaint,
//是否允许跨域图像污染画布
useCORS,
//是否尝试使用CORS从服务器加载图像
width,
//画布的宽度
height,
//画布的高度
backgroundColor //画布的背景色，默认为透明
})
console.log(canvas);
return canvas.toDataURL('image/png')
}
}
});
</script>
<style>
.echarts-box, #myEcharts,#myEcharts2 { width: 400px; height: 400px; }
</style>
============ 欢迎各位老板打赏~ ===========
与本文相关的文章
