利用html2canvas实现海报和二维码下载

今天记录一下html2canvas的使用和qrcode的使用，实现简单的海报和二维码下载。很开心又学到了新东西嘿嘿。

1.安装qrcode

npm i qrcode.vue

2.安装html2canvas

npm i html2canvas

3.具体代码

<template>
  <div ref="box" style="width: 200px; height: 200px; border: 1px black solid">
    <img src="/test.png" alt="" style="width: 200px; height: 150px" />
    <div>
      <Qrcode value="2306" style="width: 50px; height: 50px" />
    </div>
  </div>

  <el-space>
    <el-button @click="fn">下载</el-button>
  </el-space>
</template>

<script setup>
import Qrcode from "qrcode.vue";
import html2canvas from "html2canvas";
import { ref } from "vue";

let box = ref(null); //拿到dom

let url = ref(""); //下载地址

/**
 * 用于将div转化为canvas，再获取canvas的base64数据
 * 再调用下载函数
 */
const fn = async () => {
  let canvas = await html2canvas(box.value, {
    CORS: true,
    width: box.value.offsetWith,
    height: box.value.offsetHeight,
  });
  url.value = canvas.toDataURL();
  downloadFile("测试.png", url.value);
};

/**
 *下载函数
 * @param {*} name 下载成功后的文件名
 * @param {*} url 下载地址，可以是base64
 */
let downloadFile = (name, url) => {
  const aDom = document.createElement("a");
  aDom.download = name;
  aDom.href = url;
  document.body.appendChild(aDom);
  aDom.click();
  aDom.remove();
};
</script>

<style scoped></style>

24/6/5更新

今天根据业务需求发现以上实现方式有不足：上述方法只能实现本地图片资源的下载，若二维码图片是后端返回的动态图片，则下载失效，只会下载静态图片。经过组里一些前端大佬的提醒，有了解决方法：就是先将二维码图片转换为base64数据后在进行保存。

4.图片转base64，利用canvas

/**图片转base64格式 */
function getBase64(image) {
  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/png");
  return base64;
}

使用：

var ImgObj = new Image();
ImgObj.crossOrigin = "Anonymous"; //看情况是否需要
ImgObj.src = '图片地址';
ImgObj.onload = function () {
  base64CodeImg = getBase64(ImgObj);
};

此时base64CodeImg便已是base64地址了，将base64CodeImg绑定到img标签的src，即可实现动态图片下载。