分享海报-链接图片如何处理

• 先将远程图片链接转为base64格式在页面上显示则可用html2canvas生成海报

canvasImg.js

// 第一个参数是图片的URL地址，第二个是转换成base64地址后要赋值给的img标签
export async function  getBase64Image (url) {
    return new Promise((resolve)=>{
        let image = new Image()
        image.src = url + '?v=' + Math.random(); // 处理缓存
        image.crossOrigin = '*'; // 支持跨域图片
        image.onload = function () {
            var base64 = drawBase64Image(image)
            resolve(base64)
        }
    })
}

<template>
  <div class="share-container" id="capture">
    <div
      class="share-img-box"
      :style="{ backgroundImage: `url(${share_bg})` }"
    ></div>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";

import share_bg from "/@/assets/imgs/work/share_bg.png";
import share_title from "/@/assets/imgs/work/share_title.png";
import dialog_close from "/@/assets/imgs/vote/dialog_close.png";
import html2canvas from "html2canvas";
import { Overlay, Toast } from "vant";
import useClipboard from "vue-clipboard3";
import { base64ToBlob, getBase64Image } from "/@/utils/canvasImg";
export default defineComponent({
  setup(props, { emit }) {
    const { toClipboard } = useClipboard();
    const copyLink = window.location.href;

    const onCopy = async () => {
      console.log("copy");
      try {
        await toClipboard(copyLink);
        Toast.success("复制链接成功");
      } catch (e) {
        Toast.fail(e);
      }
    };
    const state = reactive({
      imageUrl:
        "https://img2.baidu.com/it/u=716392730,3813815285&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500",
    });

    const setImgUrlToBase64 = () => {
      getBase64Image(state.imageUrl).then((res) => {
        state.imageUrl = res;
      });
    };
    setImgUrlToBase64();

    const downImg = () => {
      html2canvas(document.querySelector("#capture")).then(
        (canvas) => {
          document.body.appendChild(canvas);
          let saveUrl = canvas.toDataURL("image/png");
          let aLink = document.createElement("a");
          let blob = base64ToBlob(saveUrl);
          let evt = document.createEvent("MouseEvents");
          evt.initMouseEvent(
            "click",
            true,
            false,
            window,
            0,
            0,
            0,
            0,
            0,
            false,
            false,
            false,
            false,
            0,
            null
          );
          aLink.href = URL.createObjectURL(blob);
          aLink.download = "分享海报";
          aLink.dispatchEvent(evt);
          URL.revokeObjectURL(blob);
          Toast.success("下载成功");
        },
        {
          useCORS: true,
        }
      );
    };

    function onClose() {
      emit("on-close");
    }

    return {
      downImg,
      onCopy,
      dialog_close,
      share_bg,
      share_title,
      onClose,
      ...toRefs(state),
    };
  },
});
</script>
<style scoped lang="less">
</style>