Question

我用Chart.js绘制时间序列图，使用<canvas>绘制。我们的用户希望能够下载这些图表的图像以放入他们的报告中。网站背景很暗，因此图表本身使用浅灰色。这意味着当用户右键单击（在Chrome中）并选择＆＃34;将图像另存为...＆＃34;他们得到一个带有灰色/白色线条的透明图像（显然不是非常明显）。

我一直试图覆盖canvas.toDataURL以便先绘制一个矩形as in this post，但是覆盖不起作用（我认为它不可写）。还有另一种方法吗？

Answer 1

这应该可以解决问题：

function getCanvasImage(_ctx, _bgColor){
    var tmpCtx = document.createElement("canvas").getContext("2d");
        tmpCtx.canvas.width  = _ctx.canvas.width;
        tmpCtx.canvas.height = _ctx.canvas.height;
        tmpCtx.fillStyle = _bgColor;
        tmpCtx.fillRect(0, 0, tmpCtx.canvas.width, tmpCtx.canvas.height);
        tmpCtx.drawImage(_ctx.canvas, 0, 0);

    return tmpCtx.canvas;
  }

// ...
// just call the function passing your canvas context and the background color
var graphImage = getCanvasImage(ctx, "#222");

设置画布背景颜色

1 个答案: