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

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

 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的点击事件
            },