echarts图片上加上自定义文字或其它下载

想要下载echarts的图片，并且想在图片上加上一条条件之类的文字。

1.在echarts的自定义一个方法，下载前设置 graphic 属性，下载后再去掉属性（应该可以行通）；

2.获取到你的echarts的canvas 元素在上面画上需要的文字或图片之类，在执行下载（貌似文字会闪那么一下），凑合能用；

3.我弄的繁琐一点，借助一个隐藏的canvas 元素重画：

html

//echarts的容器
<div width="100%" height="100%" id="myChart"></div>
//隐藏的canvas
<canvas id="myDownCanvas" style="display: none;"></canvas>

 //我的echarts 图表var myChart = echarts.init(document.getElementById('myChart'));var option = {toolbox: {show: true,feature: {dataZoom: {yAxisIndex: 'none',show:false},magicType: {type: ['bar']},myDown:{//自定义下载show : true,title : '下载' + name,icon : 'image://images/inp-icon/mydown-ico.png',onclick : function (e){//拿到echarts的base64 url  图片里面去掉toolbox 那个工具栏var oldUrl = curCharts.getDataURL({ pixelRatio: 2, backgroundColor: '#fff',excludeComponents:['toolbox']});getNewCanvadUrl(oldUrl);}}},},};myChart.setOption(option);function getNewCanvadUrl (oldUrl){var url = oldUrl;var baseCanvas = $("#myChart").find("canvas").first()[0];var newCan = $("#myDownCanvas").get(0);newCan.width = baseCanvas.width * 2;newCan.height = baseCanvas.height * 2;var ctx = newCan.getContext("2d");var img = new Image();img.src= url;img.onload = function(){ctx.drawImage(img,0,0,newCan.width,newCan.height);ctx.font = "20px Microsoft YaHei";ctx.textAlign = 'left';var left = 280;var top = 60;ctx.fillStyle = "#333";var text = ‘echarts图片上加上自定义文字或其它下载’;//想加点啥就可以加点啥了ctx.fillText(text, left, top);//拿到newCan的urlvar newUrl = newCan.toDataURL();//后面就可以下载了downloadFile(newUrl,'我的图片');}}function downloadFile(url, name) { //拿到url 下载就简单了,ie 用blob 谷歌直接a标签};//方法顺序该调就调一调

echarts图片上加上自定义文字或其它下载相关推荐

计算机考试字处理怎样加水印,一学即会！图片上如何添加文字水印
原标题:一学即会!图片上如何添加文字水印平时工作中,有的小伙伴经常需要处理一大堆的图片,比如说在网上发表自己的文章,在购物网站上晒单,还是自己亲手拍的照片,自己制作的图片,或者画出来一个好的创意,想 ...
图片上怎么加文字？看完就你知道了
现在有许多的小伙伴喜欢将自己拍摄的照片发布到一些社交平台与自己的好友分享,但是有时候会感觉自己的照片有些单调,缺少一丝乐趣,因此会在图片上添加一些文字,增加照片的丰富度:也有时候和好朋友出去游玩时,无 ...
PHP+Laravel+Fpdi+Fpdf 在PDF模板上编辑自定义文字并输出新PDF文件示例
PHP+Laravel+Fpdi+Fpdf 在PDF模板上编辑自定义文字并输出新PDF文件示例效果图展示情景说明: 开发环境与准备开发相关文献: End 效果图展示情景说明: 现在有个PDF ...
图片上怎么添加文字内容？这两个方法请收好
相信很多小伙伴们在工作中经常需要处理图片吧,有时候需要在图片上添加注释等文字,也就是编辑图片上的文字.那么小伙伴们平时都是使用什么方法来处理呢?最近就有一个小伙伴咨询图片上怎么添加文字内容,其实很简单 ...
怎么在图片上直接编辑文字？分享两个编辑图片的方法
我们怎么在图片上直接编辑好看的文字呢?很多小伙伴在生活中喜欢拍摄照片,在使用这些照片的时候我们往往会给图片添加边框.拼图以及一些配字,一般的简单配字会显得图片不好看,有什么方法可以直接在图片上编辑好看 ...
通过opencv在图片上加上文字_基于Ubuntu16
本文主要介绍,如何通过**C++**语言在Ubuntu操作系统下的OpenCV中将一个图片叠加上文字通过opencv在图片上叠加上文字一.汉字点阵字库原理 1.汉字的三种编码 1.1区位码 1.2 ...
Android图片海报制作-自定义文字排版控件组件
项目地址:https://github.com/coolstar1204/MakePoster 今天主要讲一下项目主要控件,文字排版控件组,实现类似QQ音乐歌词海报效果. 控件主要功能点可设置背景图 ...
微信小程序图片上传（文字识别）
要点:OCR文字识别图片上传在最近的项目中遇到需要进行OCR识别,中间遇到的坑记录一下 OCR接口:采用百度OCR通用文字识别在进行调试过程中遇到下列问题: 百度ocr接口1.对图片经行base ...
css图片上漂浮着文字效果
1.效果: 2.html代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <H ...

echarts图片上加上自定义文字或其它下载

echarts图片上加上自定义文字或其它下载相关推荐

最新文章

热门文章