html2canvas有时无法捕获内容+文本质量

时间:2016-04-13 13:18:05

标签: javascript angularjs html2canvas todataurl

我正在尝试使用html2canvas在JavaScript angular中创建一个'save div as png'函数。 它“几乎”有效,除了图像质量可能更好(主要是文本)

但是有时只会打开一个空白画布而不捕捉其中的元素。

我没有使用下载功能,而是尝试使用window.open(数据)而我只是打开一个带有空画布的新窗口。 我还确认,在收到'另存为png div'时收到了id。

  $scope.savePNG = function(id) {
    var target = document.getElementById(id);

    html2canvas(target, {
      onrendered: function(canvas) {
        var data = canvas.toDataURL("image/png", 1);
        // data is the Base64-encoded image
        download(data, "Graph.png", "image/png");
        // window.open(data);
      }
    });
  };


  function download(data, filename, filetype) {
    // create an "off-screen" anchor tag
    var lnk = document.createElement('a');

    // the key here is to set the download attribute of the a tag
    lnk.download = filename;

    lnk.href = data;

    // create a "fake" click-event to trigger the download
    if (document.createEvent) {
      var e = document.createEvent("MouseEvents");
      e.initMouseEvent("click", true, true, window,
        0, 0, 0, 0, 0, false, false, false,
        false, 0, null);

      lnk.dispatchEvent(e);
    } else if (lnk.fireEvent) {
      lnk.fireEvent("onclick");
    }
  }

0 个答案:

没有答案