HTML2Canvas не работает, нужно консоль URL изображения

Question

Я пытаюсь сделать снимок экрана с представлением div, который содержит полный календарь, но не могу этого сделать.Я пробовал следующий код:

  function screenshot(){
     alert('zz'); html2canvas(document.querySelector('#calendar')).then(function(canvas) {
        document.body.appendChild(canvas);
        console.log(canvas.toDataURL());
     });
    }

Всякий раз, когда я нажимаю на скриншот, я хочу захватить изображение div#calendar и мне нужно утешить URL, чтобы я мог использовать это изображение позже в качестве эскиза, когда я делюсь этимссылка на страницу позже в социальных сетях.

Вы можете проверить это здесь на Codepen

Answer 1

Вы можете использовать функцию ниже, чтобы получить изображение, используя html2canvas ..

function screenshot(){
      console.log(html2canvas(document.querySelector('#calendar')))
      html2canvas(document.querySelector('#calendar'), {
      onrendered: function(canvas) {  
        var image = canvas.toDataURL("image/png");
        console.log("image => ",image); //image in base64
        var pHtml = "<img src="+image+" />";
        $("#parent").append(pHtml); //you can append image tag anywhere
        }
     });
 }