博客

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);  把截的图显示在网页上

})

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

}

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