美文网首页
vue 利用 Html2canvas 完成页面截图下载

vue 利用 Html2canvas 完成页面截图下载

作者: 0000000asdasd | 来源:发表于2019-06-22 19:30 被阅读0次
// 声明一个画布元素,存储需下载图片范围
let canvas = document.createElement("canvas");
// 获取需下载范围元素
let img = this.$refs["QRcodeSrcImg"];
// 图片高度
var w = parseInt(window.getComputedStyle(img).width);
// 图片宽度
var h = parseInt(window.getComputedStyle(img).height);
// 声明画布宽高
canvas.width = w;
canvas.height = h;
canvas.style.width = w + "px";
canvas.style.height = h + "px";
// 利用 html2canvas 下载 canvas
html2canvas(img, { canvas: canvas }).then(function(canvas) {
  const a = document.createElement("a");
  // 文件名
  a.download = name | 'html2canvas';
  // 设置 a href 属性
  a.setAttribute("href", canvas.toDataURL());
  // 触发 a 点击事件
  a.click();
});

如果需下载图片范围中存在从服务器获取到的图片，则需要把图片转换成base64格式才可以下载，不然下载的图片会出现空白
图片转base64

// 图片下载
var image = new Image();
// 如果图片是跨域的，填上"*"或者"anonymous" 核心是请求头中包含了 Origin: "anonymous"或"*" 字段，
//响应头中就会附加上 Access-Control-Allow-Origin: * 字段,
image.crossOrigin = "anonymous"; image.src = url;
// 路径加载
image.onload = function() {
  var ext = url.substring(url.lastIndexOf(".") + 1);
  var base64 = getBase64Image(image, ext);
  _this.QRcodeSrc = base64;
};
// 图片转 base64 格式
function getBase64Image(image, ext) {
  var canvas = document.createElement("canvas");
  canvas.width = image.width;
  canvas.height = image.height;
  var context = canvas.getContext("2d");
  context.drawImage(image, 0, 0, image.width, image.height);
  var base64 = canvas.toDataURL("image/" + ext);
  return base64;
}

相关文章