将水印选项添加到图表

时间:2019-01-14 16:21:42

标签: javascript jquery chart.js watermark

我已使用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")
    });
})

但我不更改水印选项。我只需要在保存的图像上添加水印。

谢谢您的帮助!

0 个答案:

没有答案