- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这是一个特定的问题,但我想如果我能找到解决方案,它可能会在某些时候对其他人有用。
我需要在浏览器端将我的一些 Highcharts 图形转换为 PNG。这个想法是,当我们的作者创建图形时,它会自动转换为 PNG,并且 PNG 将与给定图形的 JS 代码一起保存。然后我们可以在 JS 不是一种选择的情况下提供该 PNG 版本。我已经通过 canvg 库完成了这一切,而且非常完美。
嗯,差不多。由于所有的高 dpi 屏幕,我们希望将 PNG 放大到通常显示的图形的两倍大。这样 PNG 版本就可以在 iPhone/iPad 等上看起来不错......
canvg 有一些缩放选项,所以我尝试使用它们。但这就是它开始崩溃的地方。该图形已正确缩放,但 Highcharts 对象中的某处有一个框,该框不会与其他所有内容一起缩放,并且生成的缩放图形仅显示缩放精美的图形的左上角。
我查看了 canvg 代码并很快意识到我的 JS 能力不足以弄清楚发生了什么,Highcharts 结束也是如此。
如果有人对此有想法或知道一个简单的解决方案,我将不胜感激。
要复制该问题,您可以查看我放在一起的这个 JSFIDDLE 示例:
http://jsfiddle.net/UVNvh/3/
如果 JSFIDDLE 页面被弄乱或以某种方式消失,这里是代码。
<script src="http://code.highcharts.com/highcharts.js">http://code.highcharts.com/highcharts.js</script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<p>Highcharts</p>
<div id="container" style="height: 400px; margin-top: 1em"></div>
<p>Canvas</p>
<canvas id="canvas"></canvas>
<p>Image</p>
<div id="image"><div>
<script type="text/javascript">
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
credits: {
enabled: false
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
navigation: {
buttonOptions: {
enabled: false
}
},
exporting: {
type: 'image/jpeg'
}
});
var chart_svg = chart.getSVG();
var chart_canvas = document.getElementById('canvas');
canvg(chart_canvas, chart_svg, {scaleWidth: 1280, scaleHeight: 860});
var chart_img = chart_canvas.toDataURL('image/png');
jQuery('#image').append('<img src="' + chart_img + '" />');
});
</script>
最佳答案
听起来您正在使用某种管理工具,因此更改图表的大小可能不是问题。在调用 getSVG() 之前,您可能应该使用 chart.setSize(width,height)。
如果你不能走那条路,你也可以直接编辑 SVG 文本,但在我看来这不是最佳实践。
canvg 的工作方式似乎是它采用 scaleWidth/scaleHeight 并根据您传递的选项和 svg 的现有高度/宽度向 svg 添加一个 transform="scale()"。问题是它不会改变 svg 和结果图像的现有高度/宽度。我整理了一个 jsfiddle 来做我认为你想要的,但这可能不是最好的解决方案。 http://jsfiddle.net/sgearhart2/EsPud/1/
var chart_svg = chart.getSVG();
chart_svg = chart_svg.replace('width="600"', 'width="1280"');
chart_svg = chart_svg.replace('height="400"', 'height="860"');
// If i had to guess, canvg does the next part but not the prior part
var dWidth = 1280/600, dHeight = 860/400;
chart_svg = chart_svg.replace(
'<svg ',
'<svg transform="scale(' + dWidth + ' ' + dHeight + ')" '
);
关于highcharts 和 canvg 缩放问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15642145/
我正在尝试使用 Battlehorse 中的代码将 Google 可视化图表转换为图像以保存到服务器。我能够让它在本地主机上工作,但是当我尝试在 Web 服务器上使用它时,我收到错误“canvg is
这是一个特定的问题,但我想如果我能找到解决方案,它可能会在某些时候对其他人有用。 我需要在浏览器端将我的一些 Highcharts 图形转换为 PNG。这个想法是,当我们的作者创建图形时,它会自动转换
我正在使用 canvg为了将一些 SVG 渲染成图像。目前 SVG 到 Canvas 部分工作正常。但是我无法确定为什么当指针进入时生成的 Canvas 会发生变化。我真的必须复制生成的 Canvas
我有内联 svg,它是从服务器动态加载的。我希望使用内联 css 对 svg 进行操作或修改。我已经搜索过将修改后的 svg 转换为 png 或 base64 图像。经过长时间的搜索,我决定坚持使用
我有一个带有标签和图例的饼图,它在 SVG 中看起来不错,但是一旦我使用 canvg 将其转换为 Canvas ,一些格式就会丢失/出错。SVG: Canvas : 我已经内联 CSS 以应用所有 C
我正在使用 canvg 截取 svg 内容的网页屏幕截图。在 Chrome、Opera 和 IE11 中,它似乎工作正常,但在 Edge 浏览器中,它只会奇怪地呈现黑色背景 Canvas 上没有内容。
http://jsfiddle.net/jjhii/46bv10db/1/ data canvg(document.getElementById('canvas'), svg); 另一个 View ,
我正在努力将 svg 转换为 png。对于此转换,我使用的是 canvg。此转换在 google chrome 上运行良好,但 IE 10 给出以下错误消息。 Unhandled exception
我正在使用 Raphael 绘制对象,然后使用 canvg 将其传输到 HTML canvas 元素,以便我可以使用 toDataURL 将其保存为 PNG。但是当我使用 canvg 时,生成的图像很
原始 SVG 图表 渲染 Canvas 图表 这是我用来转换为 Canvas 的代码 svg = $('svg').parent().html() canvg('canvas', svg) canva
我有一个 next.js项目,我不断得到: error - ./node_modules/jspdf/dist/jspdf.es.min.js:458:25 Module not found: Can
我想将我的 SVG 转换为 CANVAS,然后将其另存为图像。我的页面中已经由 javascript 生成了 svg。我使用这段代码: $("#menu-save-image").click(func
我正在使用 canvg() 函数将 svg 转换为 canvas。如果我们直接在 onload 上使用 canvg(),它会将所有 svg 转换为 canvas。我想转换与特定 div 相关的 svg
我正在寻找有关使用 jsPDF 将 highcharts 导出为 PDF 的解决方案。我使用此解决方案将我的图形作为图像导出到我的 pdf -> Export Highcharts to PDF (u
我有这个网站:http://materialground.com/icon-maker 我身上有这段代码 下面我有这段代码: 我想让用户修改根 svg 标签,比如填充颜
我正在创建一个图表示例,我想将图表导出为 PNG 格式。下载 PNG 图像时,它的显示方式与图表上的不同。 我尝试了多种方法来添加标题行,但没有一种方法适合我。 下面是添加标题行的不同尝试 > 1.
我正在尝试将 Canvas 从网页保存到文件中。 Canvas 非常复杂,是由多个图像(几个半透明的 .png 文件、2 个 svg 元素和 4 个其他 Canvas )构建的,无论我如何尝试保存它,
我正在尝试将我的 SVG 转换为 Canvas 以获得 png。除了 css 定位外,一切都很好。 请看这个 jsfiddle 您可以看到顶部的 SVG 部分。 我正在使用 canvg在 Canvas
我已经使用 Raphael.js 、 canvg 和 jquery 将 svg 转换为图像。 But want to make the image at the center of rectangul
我有一个 SVG 图形,我想将其转换为 PNG,然后提供下载。如果我选择 SVG 并使用 jQuery 创建 Canvas 元素,我会不断在标题中收到错误消息。如果我使用基本的 javascript
我是一名优秀的程序员,十分优秀!