echarts 图表/SVG 图片指定位置截取

echarts 图表/SVG 图片指定位置截取

  • 1.前期准备
  • 2.图片截取
  • 3.关于drawImage参数

需求:如下图所示,需要固定头部legend信息

在这里插入图片描述

1.前期准备

echarts dom渲染容器

<div :id="'barchart' + id" class="charts" ref="barchart"></div>
  1. echart 图表渲染
  2. 取图表的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.图片截取

  1. 父组件中创建好所需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);
},
  1. 裁取图片
//裁剪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参数

  1. image: 要绘制的图像,可以是图片或者canvas对象。
  2. sx: 图像剪切的起始X坐标。
  3. sy: 图像剪切的起始Y坐标。
  4. swidth: 图像剪切的宽度。
  5. sheight: 图像剪切的高度。
  6. x: 绘制图像的起始X坐标。
  7. y: 绘制图像的起始Y坐标。
  8. width: 绘制图像的宽度。
  9. height: 绘制图像的高度。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/505588.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

1695. 删除子数组的最大得分-力扣(滑动窗口)

给你一个正整数数组 nums &#xff0c;请你从中删除一个含有 若干不同元素 的子数组。删除子数组的 得分 就是子数组各元素之 和 。 返回 只删除一个 子数组可获得的 最大得分 。 如果数组 b 是数组 a 的一个连续子序列&#xff0c;即如果它等于 a[l],a[l1],…,a[r] &#xff0…

Map和List输入的两种不同json格式

一、List to json格式 [{"type":"top.lovemom.pojo.ESP8266","devicePosition":"家里的阳台","deviceRemark":"我的设备1","publicIp":"127.0.0.1","userEmail":"123bggb.to…

Verilog基础【一】

文章目录 1.1 第一个verilog设计1.2 Verilog 简介1.3 Verilog环境搭建1.4 Verilog 设计方法设计方法设计流程 2.1 Verilog 基础语法格式注释标识符与关键字 2.2 Verilog 数值表示数值种类整数数值表示方法实数表示方法十进制&#xff1a;科学计数法&#xff1a; 字符串表示方法…

【论文极速读】 指令微调BLIP:一种对指令微调敏感的Q-Former设计

【论文极速读】 指令微调BLIP&#xff1a;一种对指令微调敏感的Q-Former设计 FesianXu 20240330 at Tencent WeChat search team 前言 之前笔者在[1]中曾经介绍过BLIP2&#xff0c;其采用Q-Former的方式融合了多模态视觉信息和LLM&#xff0c;本文作者想要简单介绍一个在BLIP2…

java多数据源几种实现方式以及demo

提示&#xff1a;多数据源实现方式、多数据源的使用场景。AbstractRoutingDataSource、DynamicDataSource框架、mybatisplus的Intercepter插件、java中多数据源的几种实现方式、mybatisPlus的插件实现多数据源 文章目录 前言一、多数据源的几种实现方式二、使用场景三、核心原理…

k8s1.28.8版本配置Alertmanager报警方式(邮件,企业微信)

文章目录 总结部署流程 Alertmanager 三大核心1. 分组告警2. 告警抑制3. 告警静默 报警过滤静默通知方案一&#xff1a;方案二&#xff1a; 抑制报警规则案例一 参考文档 自定义路由告警&#xff0c;分来自不同路由的告警&#xff0c;艾特不同的人员进行区分修改 alertmanager …

中缀转后缀表达式

思路分析 遇到数字&#xff0c;直接输出遇到符号 栈为空&#xff0c;符号直接入栈若为 ( &#xff0c;则直接入栈用当前符号和栈顶符号比较优先级 当前符号 > 栈顶符号&#xff0c;当前符号直接入栈&#xff0c;结束当前符号 < 栈顶符号,栈顶符号出栈并输出&#xff0c;…

verilog中的testbench语句——display,fopen,fread,fwrite——更新中

一、fopen bmp_file_read $fopen("../pic/picture.bmp","rb"); 要注意这类操作文件的函数&#xff0c;在vivado2018自带的仿真软件里&#xff0c;不综合直接仿真&#xff0c;它的当前文件夹如图所示。 一、fwrite $fwrite(bmp_file_write,"%c"…

【Effective Web】页面优化

页面优化 页面渲染流程 JavaScript 》 Style 》 Layout 》 Paint 》 Composite 首先js做了一些逻辑&#xff0c;触发了样式变化&#xff0c;style计算好这些变化后&#xff0c;把影响的dom元素进行重新布局&#xff08;layout&#xff09;,再画到画布中&#xff08;Paint&am…

【数据结构与算法】二叉树遍历、判断和 diff 算法

遍历 深度优先遍历 function Node(value) {this.value valuethis.left nullthis.right null }let a new Node(a) let b new Node(b) let c new Node(c) let d new Node(d) let e new Node(e) let f new Node(f) let g new Node(g) a.left c a.right b c.l…

如何提升公众号搜索量?分享内部运营的5步优化技术!

最近一直有自媒体同行朋友在写关于公众号的内容&#xff0c;很多都说公众号现在没得玩了。其实&#xff0c;在运营自媒体上面&#xff0c;思维不通&#xff0c;技术不到位&#xff0c;哪个平台都不适合你玩。 想要在自媒体上面运营变现&#xff0c;一定不要先点击广告变现&…

【二分查找】查找数列中数第一次出现的编号

一道巩固二分查找知识的题&#xff0c;非常简单&#xff0c;一起做一下吧 题目&#xff1a; 答案&#xff1a; #include<iostream> #include<algorithm> #include<cstring> using namespace std; const int N1000010;int n,m; int q[N];bool isBlue(int num…

7种2024年算法优化BP,实现回归,单/多变量输入,单/多步预测功能,机器学习预测全家桶再更新!...

截止到本期MATLAB机器学习预测全家桶&#xff0c;一共发了19篇关于机器学习预测代码的文章。算上这一篇&#xff0c;一共20篇&#xff01;参考文章如下&#xff1a; 1.五花八门的机器学习预测&#xff1f;一篇搞定不行吗&#xff1f; 2.机器学习预测全家桶&#xff0c;多步预测…

中文乱码 一文讲解 字符集和字符编码 不再困惑(有源码)

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 这可能是应用级程序员最困惑的…

SSTI 服务器端模板注入(Server-Side Template Injection)

1.Web_python_template_injection {{}}是变量包裹标识符&#xff0c;里面存放的是一个变量&#xff0c;当你输入 http://61.147.171.105:55121/{{8*8}} 执行成功&#xff0c;说明存在模版注入。接下来&#xff0c;开始想办法编代码拿到服务器的控制台权限 。 首先&#xff0c…

Redis 命令行客户端

目 录 redis 客户端介绍 redis 客户端介绍 redis 是一个 客户端-服务器 结构的程序&#xff01;&#xff01;&#xff08;类似于 MySQL&#xff09; 因此 redis 客户端和服务器 可以在同一个主机上&#xff0c;也可以在不同主机上. Redis 的客户端也有很多种形态&#xff1a;…

2024 批量下载吾爱破解公众号文章内容/话题/图片/封面/视频/音频,导出文章pdf合集,excel数据包含阅读数留言数粉丝数

前几天看到吾爱破解论坛公众号文章吾爱破解精华集2023&#xff0c;于是把吾爱破解论坛公众号2022-2023年所有公众号文章也下载做成合集分享给大家&#xff0c;网盘地址https://pan.quark.cn/s/9c1b60b822a7 下载的excel文章数据包含文章日期&#xff0c;文章标题&#xff0c;文…

基于springboot实现图书个性化推荐系统项目【项目源码+论文说明】

基于springboot实现图书个性化推荐系统演示 摘要 本论文主要论述了如何使用JAVA语言开发一个图书个性化推荐系统&#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构&#xff0c;面向对象编程思想进行项目开发。在引言中&#xff0c;作者将论…

risc-v向量扩展strlen方法学习

riscv向量文档中给出了strlen的实现&#xff0c; 大概是这么一个思路&#xff0c; 加载向量: 使用向量加载指令&#xff08;如 vload&#xff09;从内存中加载一个向量长度的字符。比较向量与零: 使用向量比较指令&#xff08;如 vmask 或 vcmpeq&#xff09;来检查向量中的每…

Js之运算符与表达式

运算符&#xff1a;也叫操作符&#xff0c;是一种符号。通过运算符可以对一个或多个值进行运算&#xff0c;并获取运算结果。 表达式&#xff1a;由数字、运算符、变量的组合&#xff08;组成的式子&#xff09;。 表达式最终都会有一个运算结果&#xff0c;我们将这个结果称…