将div生成图片并下载下来

白昼怎懂夜的黑 提交于 2019-11-26 23:33:27
//文件需要引入html2canvas.js、jquery.js
function downLoadImg(){
      var element = $(".orgchart");    // 这个dom元素是要生成img的div容器
        var w = element.outerWidth();    // 设置该容器的宽
        var h = element.outerHeight();    // 设置该容器的高var canvas = document.createElement("canvas");
        canvas.width = w;    // 设置画布宽&&高
        canvas.height = h ;
        var offsetTop = element.offset().top;    // 获得该容器的上偏移量
        var offsetLeft = element.offset().left;    // 获得该容器的左偏移量
        var context = canvas.getContext("2d");
        
        context.translate(-offsetLeft, -offsetTop);

        var opts = {
            canvas: canvas,
            width: w,
            height: h
        }
      html2canvas(element, opts).then(function (canvas) {
          setTimeout(function(){
            let a = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
            a.href = canvas.toDataURL('image/png',1.0)
            a.download = '下载'
            a.click()
          },100)
      })
      
    }

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!