前端js根据html代码使用canvas生成图片

最新推荐文章于 2024-08-13 12:49:55 发布

℡仅此、而已

最新推荐文章于 2024-08-13 12:49:55 发布

阅读量1.3k

点赞数 1

分类专栏：前端小强踩坑之路文章标签：前端 javascript html html生成canvas图片

本文链接：https://blog.csdn.net/Hzq88888/article/details/120882327

版权

前端小强踩坑之路专栏收录该内容

60 篇文章 4 订阅

订阅专栏

这篇博客介绍了如何利用html2canvas库在JavaScript中实现网页内容的截图，并结合Vue.js实现保存按钮点击后自动下载图片的功能。通过设置放大倍数、处理滚动条和元素位置，解决了截图过程中的偏移和遮挡问题。

摘要由CSDN通过智能技术生成

图片示例：实现点击保存下载弹窗内容生成图片

html2canvas:html2canvas - Screenshots with JavaScript下载地址html2canvas:html2canvas - Screenshots with JavaScript

 保存按钮事件： <i-button type="primary"  @click="savePic" style="width: 100px">保存</i-button>
savePic: function(){
                var _this = this;
                var width = $('.picStyleMain')[0].offsetWidth; //dom宽
                var height = $('.picStyleMain')[0].offsetHeight; //dom高
                var scale = 2;//放大倍数
                var canvas = document.createElement('canvas');
                canvas.width = width * 2;
                canvas.height = height * 2;
                canvas.style.width = width + 'px';
                canvas.style.height = height + 'px';
                var context = canvas.getContext('2d');
                context.scale(scale, scale);
                //设置context位置，值为相对于视窗的偏移量负值，让图片复位(解决偏移的重点)
                var rect = $('.picStyleMain').get(0).getBoundingClientRect();//获取元素相对于视察的偏移量
                context.translate(-rect.left, -rect.top);
                var opts = {
                    imageTimeout: 15000,
                    useCORS:true,  //防止图片跨域
                    x: 0,
                    y: 0,
                    scrollY: 0,
                    scrollX: 0,
                    logging: true,
                };
                var saveScroll = document.getElementsByClassName('ivu-modal-wrap')[3]
                saveScroll.scrollTop=0  //解决滚动条滑动时图片被遮挡问题
                html2canvas(document.querySelector(".picStyleMain"), opts).then((canvas) =>{
                    var imgSrc = canvas.toDataURL('image/png')
                    _this.canvasImg = imgSrc
                });
                let newName = this.applyNumber
                setTimeout(()=>{this.downloadImg(newName)},1000)
            },
            downloadImg(name) {
                let a = document.createElement('a') // 生成一个a元素
                a.style.display='none'
                let event = new MouseEvent('click') //创建一个单击事件
                a.download = name || 'photo' // 设置图片名称
                a.href= this.canvasImg
                a.dispatchEvent(event) //触发a的点击事件
            },