diff --git a/前端/前端通过页面(dom)生成图片.md b/前端/前端通过页面(dom)生成图片.md index e69de29..55d473a 100644 --- a/前端/前端通过页面(dom)生成图片.md +++ b/前端/前端通过页面(dom)生成图片.md @@ -0,0 +1,38 @@ +``` +let rem = parseFloat($("html").css("font-size")) +let width = 17.25 * rem +var canvas2 = document.createElement("canvas"); +var _canvas = document.getElementById('app'); +var w = parseInt(window.getComputedStyle(_canvas).width); +var h = parseInt(window.getComputedStyle(_canvas).height); +//将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了 +var times = 3; +// var times = 20; +canvas2.width = w * times * window.devicePixelRatio; +canvas2.height = h * times * window.devicePixelRatio; +canvas2.style.width = w + "px"; +canvas2.style.height =h + "px"; +console.log(w,h) +var context = canvas2.getContext("2d"); +context.scale(times, times); +console.log(canvas2.style.width) + new html2canvas(document.getElementById('app'), { + canvas:canvas2, + allowTaint: true, + taintTest: true, + useCORS: true, + background: null, + windowWidth:document.body.scrollWidth, + windowHeight:document.body.scrollHeight, + x:(document.body.scrollWidth - width) / 2, + y:0 + }).then(canvas => { + let imgUrl = `` + doinghide() + $('#app').replaceWith('
') + $('#app').css('padding',0) + $('#app').append(imgUrl) + }); + } +}) +``` \ No newline at end of file