Anychart图表组件-Flash图转IMG普通图的方法
编程技术 / houtizong 发布于 3年前 75
问题背景：项目使用的是Anychart图表组件，渲染出来的图是Flash的，往往一个页面有时候会有多个flash图，而需求是让我们做一个打印预览和打印功能，让多个Flash图在一个页面上打印出来。
那么我们打印预览的思路是获取页面的body元素，然后在打印预览界面通过$("body").append(html)的形式显示预览效果，结果让人大跌眼镜：Flash是有的，但是一直在提醒“waiting for data”，不显示图。
分析原因：我们抓取了body内的html元素，发现是有出Flash的标签的，页面能显示无图形的FLash，但是Anychart在显示Flash之后还会将图数据调用某个方法才会出真正的图形。
那么如何解决打印预览没有图形的问题呢，我们最初是考虑在打印预览重新用new AnyChart(xml)的形式出真正的Flash，但是这种开发代价是很高的，因为打印预览是一个公共组件，我们不可能为了一个Flash图表做专项开发，还有可能造成更多的BUG。
后来在查看Anychart官方文档的时候，偶然看到这样一个内容“Saving chart as image or vector file”，中间有一段这样的内容：anychart的getPNG（）函数可返回带有png图像的base64编码的字符串。你可以通过这些字符串获取图像，并把字符串传到脚本。
去网上搜了下base64编码，发现可以通过IMG标签的SRC传入base64字符串就能出PNG图形，于是乎我这样测试了一下，发现通过这样的方式果断出现了HTML格式的图。
var base64 = chart.getPNG();$("#img").append("<img src='data:image/gif;base64,"+base64 +"'>");
注：IE7及更早浏览器版本不支持base64，即在这些浏览器下图片依然是一个小红X！
IE8虽然一定程度支持base64，但是如果base64字符串过长也无法显示。
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
