Добавить опцию водяного знака на график
У меня есть bar-char, созданный с помощью библиотеки chart.js, и я хочу сохранить изображение с водяным знаком, например так:
var aux = new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [2478,5267,734,768,433]
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Bar Chart'
},
watermark: {
// the image you would like to show
// alternatively, this can be of type "Image"
image: "{% static 'img/watermark.png' %}",
// x and y offsets of the image
x: 0,
y: 0,
// width and height to resize the image to
// image is not resized if these values are not set
width: 100,
height: 100,
// opacity of the image, from 0 to 1 (default: 1)
opacity: 0.2,
// x-alignment of the image (default: "left")
// valid values: "left", "middle", "right"
alignX: "middle",
// y-alignment of the image (default: "top")
// valid values: "top", "middle", "bottom"
alignY: "middle",
// if true, aligns the watermark to the inside of the chart area (where the lines are)
// (where the lines are)
// if false, aligns the watermark to the inside of the canvas
// see samples/alignToChartArea.html
alignToChartArea: false,
// determines whether the watermark is drawn on top of or behind the chart
// valid values: "front", "back"
position: "front",
}
}
});
Проблема с этой реализацией состоит в том, что вы всегда видите водяной знак, но мне нужен только водяной знак, когда я сохраняю изображение... Я попытался установить непрозрачность до 0 и сделать что-то подобное:
$("#save-btn").click(function() {
aux.options.watermark.opacity = 0.2
aux.update();
$("#bar-chart").get(0).toBlob(function(blob){
saveAs(blob, "chart_1.png")
});
})
но я не изменяю опцию водяного знака. Мне нужно иметь водяной знак только на сохраненном изображении.
Спасибо за помощь!