echarts 图表/SVG 图片指定位置截取
- 1.前期准备
- 2.图片截取
- 3.关于drawImage参数
需求:如下图所示,需要固定头部legend信息
1.前期准备
echarts dom渲染容器
<div :id="'barchart' + id" class="charts" ref="barchart"></div>
- echart 图表渲染
- 取图表的echarts图片传给父组件
为什么使用setTimeout :
原因是因为防止 dom还没渲染完,echarts执行完了,会导致echarts空白的问题
myChart 为全局变量 是防止vue实时监听参数,导致浏览器卡顿或者崩溃
setTimeout(() => {
this.chartToBase64(myChart[this.id]).then((base64) => {
const direction = yAxis[0]?.type == "value" ? "l" : "p"; //PDF方向
const width = this.$refs.barchart.offsetWidth; //宽
const height = this.$refs.barchart.offsetHeight; //高
this.$emit("getBottomImag", { canvas: base64, width, height,direction })
})
},200)
// 将图表转换为 base64 字符串
chartToBase64(chart) {
return new Promise((resolve, reject) => {
chart.on("finished", () => {
resolve(chart.getDataURL({ backgroundColor: "#fff" }));
});
});
},
2.图片截取
- 父组件中创建好所需dom
<!-- 截取top bottom 图表图片 -->
<img :src="workbookTopImg" ref="topimgRef" style="position: absolute; background: #fff" v-show="workbookTopImg" />
<img :src="workbookBottomImg" ref="bottomimgRef" style="position: absolute; background: #fff" v-show="workbookBottomImg" />
<canvas ref="canvastop" style="visibility: hidden"></canvas>
<canvas ref="canvasbottom" style="visibility: hidden"></canvas>
//截取图表指定位置大小
getBottomImag(data) {
const { width, height, direction, canvas} = data;
const { offsetWidth } = this.$refs.tempRef;//获取父组件的最外层div宽度
//使导出的图表从最头开始
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
//SVG 裁剪
// 使用base64data进行后续操作
let imgSrc = base64data;
let img = new Image();
const _this = this;
let top = "";
img.onload = async () => {
await _this.$nextTick();
const imgTopHeight = 80;
//css 属性设定
_this.$refs.topimgRef.style.width = `${width}px`;
_this.$refs.topimgRef.style.height = `${imgTopHeight}px`;
_this.$refs.topimgRef.style.top = "70px";
_this.$refs.topimgRef.style.left = "10px";
top = {
canvas: img,
sourceX: 0,
sourceY: 0,
desiredWidth: width,
desiredHeight: imgTopHeight,
type: "top",
};
_this.workbookTopImg = await _this.cutSvgImg(top);
//用完图片后 释放缓存
img.style.display = "none";
document.body.removeChild(img);
img = null;
};
img.src = imgSrc; // 设置源路径会开始加载图像
document.body.appendChild(img);
},
- 裁取图片
//裁剪svg图片
/*canvas:裁剪的svg图片
sourceX :裁剪起点
sourceY:裁剪终点
desiredWidth:裁剪宽度
desiredHeight:裁剪高度
返回结果:裁剪后的图片 base64码
*/
async cutSvgImg({ canvas, sourceX, sourceY, desiredWidth, desiredHeight, type }) {
// 创建一个新的 canvas 来存储裁剪结果
let croppedCanvas = this.$refs["canvas" + type];
croppedCanvas.width = desiredWidth;
croppedCanvas.height = desiredHeight;
let croppedCtx = croppedCanvas.getContext("2d");
// 在裁剪 canvas 上绘制裁剪的图像部分
croppedCtx.drawImage(canvas, sourceX, sourceY, desiredWidth, desiredHeight, 0, 0, desiredWidth, desiredHeight);
const base64 = croppedCanvas.toDataURL("image/png");
// 清除canvas内容
croppedCtx.clearRect(0, 0, croppedCanvas.width, croppedCanvas.height);
// 将裁剪结果转换为 data URL
return base64;
},
3.关于drawImage参数
- image: 要绘制的图像,可以是图片或者canvas对象。
- sx: 图像剪切的起始X坐标。
- sy: 图像剪切的起始Y坐标。
- swidth: 图像剪切的宽度。
- sheight: 图像剪切的高度。
- x: 绘制图像的起始X坐标。
- y: 绘制图像的起始Y坐标。
- width: 绘制图像的宽度。
- height: 绘制图像的高度。