小编Bru*_*uno的帖子

设置背景颜色以保存画布图表

我使用 ChartJS 并将它们保存在本地,将画布上的图表图像转换为数据 blob,然后保存。但是我无法设置我保存的任何画布图表的背景颜色,我只能保存没有背景颜色的图表,这让用户感到困惑。

到目前为止我尝试过的是:

  1. 将 image/png 的类型更改为 image/jpg
  2. 创建一个带有样式的文档,并将其作为子项附加到我的 document.createElement 中,该文档将包含图像
  3. 为我的“链接”赋予样式,该样式与上面的 document.createElement 相同

但没有成功,图像是在没有背景的情况下正确下载的。

我在搜索并找到了一些主题:

创建一个带有背景图像的画布并保存

用背景图像保存画布

但是,在所有工作结束时,无法为我找到解决方案。

我的 html 图表是:

<canvas id="divName"></canvas>
Run Code Online (Sandbox Code Playgroud)

用于保存图像的打字稿函数,使用 bytearray 创建一个新的 blob,图像的类型是:(该代码已尝试添加背景颜色)

saveimg(divName){
      let canvas:any;

        let style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = '.cssClass { background-color: "aquamarine"; }';

        if(this.deviceValue != null) {
          canvas = document.getElementById(this.deviceValue);
      }
      else {
          canvas = document.getElementById(divName);
      }

//SOLUTION that works BY Caleb Miller ***********
fillCanvasBackground(canvas, 'white');

function fillCanvasBackground(canvasc, color)
{
   const context = canvasc.getContext('2d');
   context.save();
   context.globalCompositeOperation = …
Run Code Online (Sandbox Code Playgroud)

javascript canvas typescript chart.js

6
推荐指数
1
解决办法
3106
查看次数

标签 统计

canvas ×1

chart.js ×1

javascript ×1

typescript ×1