Добавить опцию водяного знака на график - PullRequest
Новая
       12

Добавить опцию водяного знака на график

0 голосов
/ 14 января 2019

У меня есть 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")
    });
})

но я не изменяю параметр водяного знака. Мне нужно иметь водяной знак только на сохраненном изображении.

Спасибо за вашу помощь!

...