javascript - flot 中的 getCanvas 忽略 div 中给出的原始尺寸，而是尊重浏览器缩放级别

Question

可能是类似的问题:How do I resize a div automatically to the size of its contents when the contents of the div have changed? ，但不一样。也就是说，似乎无法从那个问题中找出我需要的东西。

我的情况:

我正在使用 flot 绘制图表。然后我使用 flot.canvas 模块将屏幕上的轴标签基本上转换为 Canvas ，然后我使用 plot.getCanvas() 将整个 Canvas 数字化。并将其保存为磁盘上的图像以供稍后显示。

我注意到如果在 Canvas 转换时我将浏览器 (Mozilla Firefox) 的缩放级别设置为 30%，整个 Canvas 将保存为一个小文件，忽略原始 div 的尺寸.

假设我的 DIV 是 <div id="flot_chart" style="width: 1000px; height: 600px"></div> ,但图像呈现尺寸 {width: 300px, height: 180px} ，如下:

图表看起来仍然不错，但是当我尝试以原始尺寸显示此图像时，这种转换对标签造成了可怕的影响。换句话说，在浏览器中缩小会使转换后的图像无法使用。

但后来我注意到，当我将浏览器的视口(viewport)缩放到 400% 时， Canvas 图像呈现出巨大的效果，标签看起来也很棒。

我的问题

无论浏览器中的缩放级别如何，如何获得原始 Canvas 分辨率？

我的目标是获得图表的良好再现，对我来说，这意味着将 Canvas 保存在具有足够分辨率的图像中，以便以后在不同情况下重复使用，在这些情况下动态事后调整大小不是一种选择(即 PDF)

• 我使用 var canvas = plot.getCanvas()得到我的 Canvas 。无论用户浏览器的缩放级别如何，如何将 Canvas 渲染为我想要的像素大小(以保存为图像)？
• 如果我不能执行上述操作，我可以在 Firefox 上动态调整视口(viewport)的缩放大小，获取我的 Canvas ，然后再调整大小吗？

演示示例

从 Flot 自己的示例中，您可以转到 http://www.flotcharts.org/flot/examples/canvas/index.html 来体验这一点

• 缩小到 30%
• 清除图表下方的复选框
• 选中图表下方的复选框
• 缩放至正常 100% 并观察 Canvas

(结果看起来不太好，这就是我将 Canvas 数字化时得到的结果)

Answer 1

伙计，你有棘手的问题......

似乎 flot 正在根据 devicePixelRatio 和 backingStoreRatio 缩小 Canvas 。这对于密集像素屏幕(如 iPhone)是必需的。当您“缩放”浏览器时，这些计算似乎也会缩小 Canvas 。

例如，如果我缩放到 25%，我的占位符仍然是 400 像素，但 Canvas 缩小到 100:

<div id="placeholder" style="width: 400px; height: 400px; padding: 0px; position: relative;">
    <canvas class="flot-base" width="100" height="100" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 400px; height: 400px;"></canvas>

通过一些实验，您似乎可以在 toDataURL 之前缩小 Canvas :

$( "#download" ).click(function() {
  var canvas = plot.getCanvas();
  $(canvas).attr('width', 400); // resize it to what you want
  $(canvas).attr('height',400);
  plot.setupGrid(); // redraw plot to new size
  plot.draw();
  var image = canvas.toDataURL("image/png");  
  ...
});

这是一个 example .缩小到 25%，通过单击“停止/运行”按钮强制重新加载，然后下载图像。它应该是 400x400 像素。