美文网首页
html2canvas,div内容转canvas图片下载

html2canvas,div内容转canvas图片下载

作者: 一个想学仙术的菜鸟仔 | 来源:发表于2020-08-28 14:58 被阅读0次

    参考:
    https://www.cnblogs.com/ganws/p/11149668.html
    https://www.jianshu.com/p/abd9e9c5ba20

    使用html2canvas
      npm install --save html2canvas
    

    使用

     import html2canvas from "html2canvas";
     // 内容
    <div id="lcode">变成图片</div>
    // js
    //创建一个新的canvas
        let newCanvas= document.createElement("canvas");
       w = window.getComputedStyle(document.getElementById("lcode")).width
       h= window.getComputedStyle(document.getElementById("lcode")).height
       newCanvas.width = w * 2;
       newCanvas.height = h * 2;
       newCanvas.style.width = w + "px";
       newCanvas.style.height = h + "px";
        let context: any = newCanvas.getContext("2d");
        context.scale(2, 2);
        html2canvas(document.getElementById("lcode") as any, {
          canvas: newCanvas,
        }).then(function(canvas) {
          //canvas转换成url,然后利用a标签的download属性,直接下载
          let a = document.createElement("a");
          a.href = canvas.toDataURL();
          //设置下载文件的名字
          a.download = "下载";
          //点击
          a.click();
        });
    

    相关文章

      网友评论

          本文标题:html2canvas,div内容转canvas图片下载

          本文链接:https://www.haomeiwen.com/subject/odslsktx.html