html2canvas截图工具使用

xiao_ai123

已于 2022-06-23 09:32:51 修改

阅读量80

点赞数

文章标签： javascript

于 2022-05-27 10:54:53 首次发布

本文链接：https://blog.csdn.net/xiao_ai123/article/details/124999646

版权

</view>

import html2cancas from "html2canvas"

methods:{

toImage: function() {
               this.$nextTick(() => {
                   html2cancas(document.getElementsByClassName("tainer")[0], {
                       useCORS: true,

//解决截图不完整问题

                        scale: 1,
                       height: document.getElementsByClassName("tainer")[0].scrollHeight,
                       windowHeight: document.getElementsByClassName("tainer")[0].scrollHeight
                   }).then((canvas) => {
                       let htmlCanvas = document.getElementById('htmlCanvas');
                       let url = canvas.toDataURL('image/png');
                       this.imgUrl = url;
                       let img = document.createElement("img");
                       img.setAttribute('src', this.imgUrl);
                       img.setAttribute('class', 'htmlCanvasImg');
                       img.style.width = '100vw';
                       htmlCanvas.appendChild(img);
                   })
               })
} ,

shareHandler: function() {
               let htmlCanvasImg = document.getElementsByClassName("htmlCanvasImg")[0];
               if (htmlCanvasImg) {
                   htmlCanvasImg.parentNode.removeChild(htmlCanvasImg);
               }
               this.toImage();
},

}