我已使用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")
});
})
但我不更改水印选项。我只需要在保存的图像上添加水印。
谢谢您的帮助!