前端将 HTML 生成一张图片

1.下载 html2canvas 项目中引入 html2canvas.js

2. 代码说明

红色部分就是需要生成图片的最外层的ID

function getImagesUploadFileUrl(){

                  // 注意 下面这个生成方法不是实时的 如果需要生成图片之后处理逻辑 尽量写在生成图片的方法里面
                   html2canvas(document.querySelector('#div_map_info'),{useCORS:true,async:true}).then(function (canvas) {
                    // 获取年月日作为文件名
                    var timers = new Date();
                    var fullYear = timers.getFullYear();
                    var month = timers.getMonth()+1;
                    var date = timers.getDate();
                    var randoms = Math.random()+'';
                    // 年月日加上随机数
                    var numberFileName = fullYear + '' + month+date+randoms.slice(3,10);
                    var imgData = canvas.toDataURL(); // 生成的图片路径 是直接以 data:image/png;base64 加密显示 要是后端需要 直接传到后端解密
                    // 浏览器下载保存图片
                    /*  var saveFile = function(data, filename){
                        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                        save_link.href = data;
                        save_link.download = filename;
                        var event = document.createEvent('MouseEvents');
                        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                        save_link.dispatchEvent(event);
                    }; */
                      // saveFile(imgData,numberFileName) // 调用上面那个浏览器下载保存图片的方法
                    // 最终文件名+文件格式
                    var fileName = numberFileName + '.png';
                    //fileUrl = vueApp.imagesUploadFile(imgData, fileName); // 该方法是我后端处理这个下载地址的 直接转为图片存在服务器
  
                    console.log(fileUrl)
                    // document.body.appendChild(canvas);  把截的图显示在网页上
                })

                // 逻辑代码不要写在这个 因为 绿色的这个方法生成图片的时候不是实时的 写在这里就会导致拿不到 除非用定时任务
               }

// 后端处理该生成的图片 仅供参考 最下面