上传前为chart.js设置非透明背景色

nkkqxpd9 于 2023-11-18 发布在 Chart.js

关注(0)|答案(2)|浏览(161)

我有一个canvas，声明如下：

<canvas class="grph" id="log_graph"></canvas>

字符串
在上面画了一个折线图后，我想把它上传到服务器，所以我这样做：

var canvas = document.getElementById('log_graph'),
    ctx = canvas.getContext('2d');
    
var upload = (blob) => {
    var formdata = new FormData();
    formdata.append('img', blob, 'filename.png');

    $.post({
        url: `${app.server}/upload-img`,
        data: formdata,
        processData: false,
        contentType: false,
        success: (data) => {
            console.log(`rc for upload: ${data}`);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.warn("Error, status = " + textStatus + ", " +
                "error thrown: " + errorThrown);
        }
    });
}
canvas.toBlob(upload, 'image/png');

型
不幸的是，上传的图表是透明的，在深色风格的图像查看器上看起来不太好。我想将背景设置为纯白色，但似乎 * chart.js * 不支持。
使用background-color css样式很容易设置屏幕背景色，但这不会影响上传的图像，它仍然是透明的颜色。

chart.js

来源：https://stackoverflow.com/questions/77360813/setting-a-non-transparent-background-color-to-chart-js-before-uploading

2条答案

按热度按时间

mpgws1up1#

我做的方法如下：我保存画布的状态，填充背景，导出，然后恢复以摆脱背景。
转换成代码，这给出了以下代码：

var canvas = document.getElementById('log_graph'),
    ctx = canvas.getContext('2d');

ctx.save();
ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
/*
 EXPORT CODE
*/
ctx.restore();

字符串

赞(0）回复(0）举报 2023-11-18

o0lyfsai2#

所以我找到的一个解决方案是创建一个空画布，用实心白色填充它，然后将图表复制到它上面，然后上传新画布。它是这样的：

var canvas = document.getElementById('log_graph'),
    ctx = canvas.getContext('2d');

// we want to set white background to the canvas, so we create a temporary canvas for that:
// create new canvas, same size as original:
var canvas2 = document.createElement('canvas');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
var ctx2 = canvas2.getContext('2d');
ctx2.fillStyle = 'white';
ctx2.fillRect(0, 0, canvas2.width, canvas2.height);
ctx2.drawImage(canvas, 0, 0);

var upload = ... (same as above)

// very important: use canvas2 here!
canvas2.toBlob(upload, 'image/png');

字符串
希望这些知识分享能帮助到别人！

赞(0）回复(0）举报 2023-11-18

我来回答

上传前为chart.js设置非透明背景色

2条答案

相关问题

热门标签

最新问答