मेरे पास एक ऐसा फ़ंक्शन है जो छवियों के रूप में कुछ divs को डाउनलोड करने के लिए html2canvas का उपयोग करता है। मैं सहेजे जाने पर छवि के शीर्ष पर एक शीर्षक भी जोड़ने में सक्षम होना चाहता हूं, जो चार्ट कॉलम आईडी होगा।

  function saveAsImage(chartColumnID){
            html2canvas($('#'+ chartColumnID),
            {
                onrendered: function (canvas) {
                var a = document.createElement('a');
                    a.href = canvas.toDataURL("image/png");
                    a.download = chartColumnID;
                    a.click();
                }
             });
            };

मैंने ऐसा कुछ करने की कोशिश की है लेकिन यह काम नहीं करता है, कोई शीर्षक प्रकट नहीं होता है। ive ने a.text= को अलग-अलग पंक्तियों में स्थानांतरित कर दिया ताकि दोबारा जांच की जा सके कि क्या मैं इसे गलत जगह पर रख रहा था लेकिन कोई भाग्य नहीं।

 function saveAsImage(chartColumnID){
            html2canvas($('#'+ chartColumnID),
            {
                onrendered: function (canvas) {
                var a = document.createElement('a');
                    a.href = canvas.toDataURL("image/png");
                    a.download = chartColumnID;
                    a.text= (15, 15, chartColumnID.replace(/([A-Z])/g, ' $1').trim());
                    a.click();
                }
             });
            };

क्या किसी को इस बात का कोई अंदाजा है कि चार्ट कॉलम आईडी को शीर्षक भी कैसे बनाया जाए?

0
codingWithNikki 14 सितंबर 2020, 17:44

1 उत्तर

सबसे बढ़िया उत्तर

आप कैनवास पर टेक्स्ट बनाने का प्रयास कर सकते हैं (मैंने इसे चेक नहीं किया है):

function saveAsImage(chartColumnID) {
  html2canvas($('#' + chartColumnID), {
    onrendered: function(canvas) {
// ----------------------------- here we draw text:
      const fontHeight = 14;
      const text = String(chartColumnID);
      const ctx = canvas.getContext("2d");
      ctx.font = fontHeight + "px Arial";
      ctx.textAlign = "left";
      ctx.fillStyle = "red"; // text color
      ctx.fillText(text, 0, fontHeight);
// ------------------------------ your code as ususal:
      var a = document.createElement('a');
      a.href = canvas.toDataURL("image/png");
      a.download = chartColumnID;
      a.click();
    }
  });
};

कैनवास पर यह कैसा दिखना चाहिए, इसका उदाहरण:

var canvas = document.getElementById("c");
var chartColumnID = (Math.random() * 1000 + 1) | 0;
canvas.width = 100;
canvas.height = 100;

const fontHeight = 14;
const text = String(chartColumnID);
const ctx = canvas.getContext("2d");
ctx.font = fontHeight + "px Arial";
ctx.textAlign = "left";
ctx.fillStyle = "red"; // text color
ctx.fillText(text, 0, fontHeight);
canvas { border: 1px solid }
<canvas id="c" />
1
Anton 14 सितंबर 2020, 19:19