$("#NoBidsChart").get(0).toBlob(function(value) {
saveAs(value,"Summary.jpg");
});
这里我使用Chart JS(v2.5.0)来渲染图表.当我尝试使用Canvas导出图表到Blob转换器和filesaver.js时,我得到黑色背景.那么我如何获得具有自定义背景颜色(最好是白色)的图像？
解决方法
如果你想要一个自定义的背景颜色,你必须用你喜欢的颜色绘制背景,你可以这样做,像这样…
var backgroundColor = 'white';
Chart.plugins.register({
beforeDraw: function(c) {
var ctx = c.chart.ctx;
ctx.fillStyle = backgroundColor;
ctx.fillRect(0,c.chart.width,c.chart.height);
}
});
DEMO
// draw background
var backgroundColor = 'white';
Chart.plugins.register({
beforeDraw: function(c) {
var ctx = c.chart.ctx;
ctx.fillStyle = backgroundColor;
ctx.fillRect(0,c.chart.height);
}
});
// chart
var canvas = $('#NoBidsChart').get(0);
var myChart = new Chart(canvas,{
type: 'line',data: {
labels: [1,2,3,4,5],datasets: [{
label: 'Line Chart',data: [1,backgroundColor: 'rgba(255,0.2)',borderColor: 'rgba(255,0.5)',pointBackgroundColor: 'black'
}]
}
});
// save as image
$('#save').click(function() {
canvas.toBlob(function(blob) {
saveAs(blob,"pretty image.png");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> <button id="save">Save</button> <canvas id="NoBidsChart"></canvas>
