js缩略图展示和js截屏

 1、获取canvas页面展示缩略图，使用技术：vue+TS+visjs。

<template>
  <div
    id="minimapWrapper"
    class="wrapper minimapWrapperMove slide-minimap-open"
  >
    <img
      id="minimapImage"
      class="minimap-image"
      ref="img"
    >
    <span
      class="close-btn"
      @click="closeBox"
    >
      <i class="iconfont icon-jiantouarrow-hide"></i>
    </span>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import { State } from "vuex-class";

const ratio = 5 // Difference between original canvas and minimap

@Component({
  components: {
  }
})

export default class Minimap extends Vue {
  @State((state) => state.relationChart) private relationChart: any;

  private mounted() {
    this.handleAfterDrawing();
  }
  //盒子显示隐藏开关
  private closeBox() {
    this.relationChart.isMinimapShow = false;
  }
  // 初始化加载缩略图
  private handleAfterDrawing() {
    const minimapImage:any = document.getElementById('minimapImage') as HTMLElement;
    const minimapWrapper = document.getElementById('minimapWrapper') as HTMLElement;
    // Initial render
    if (
      minimapWrapper &&
      (!minimapWrapper.style.width || !minimapWrapper.style.height)
    ) {
      this.drawMinimapWrapper()
    }
    if (
      minimapImage &&
      minimapImage.hasAttribute('src') &&
      minimapImage.src
    ) {
      minimapImage.removeAttribute('src')
    }
    this.drawMinimapImage()
  }
  private drawMinimapWrapper() {
    const self:any = this;
    const { clientWidth, clientHeight } = self.$parent.$refs.network.$el //获取Canvas的宽高
    //缩略图的宽高的比例缩小
    const minimapWrapper = document.getElementById('minimapWrapper') as HTMLElement;
    const width = Math.round(clientWidth / ratio)
    const height = Math.round(clientHeight / ratio)

    minimapWrapper.style.width = `${width}px`
    minimapWrapper.style.height = `${height}px`
  }
  private drawMinimapImage() {
    const self:any = this;
    const originalCanvas = document.getElementsByTagName('canvas')[0]
    const minimapImage:any = document.getElementById('minimapImage') as HTMLElement;

    const { clientWidth, clientHeight } = self.$parent.$refs.network.$el

    const tempCanvas = document.createElement('canvas')
    const tempContext = tempCanvas.getContext('2d')

    const width = Math.round((tempCanvas.width = clientWidth / ratio))
    const height = Math.round((tempCanvas.height = clientHeight / ratio))

    //渲染缩略图的内容
    if (tempContext && minimapImage) {
      tempContext.drawImage(originalCanvas, 0, 0, width, height)
      minimapImage.src = tempCanvas.toDataURL()
      minimapImage.width = width
      minimapImage.height = height
    }
  }
}
</script>

<style lang="less">
.wrapper {
  position: absolute;
  left: 32px;
  bottom: 50px;
  border: 1px solid #4a5866;
  overflow: hidden;
  background-color: #fff;
  z-index: 9;
  border-radius: 4px;

  .close-btn {
    position: absolute;
    display: inline-block;
    width: 24px;
    height: 24px;
    // background-color: #4a5866;
    border-radius: 0px 0px 0px 4px;
    bottom: -1px;
    left: -1px;
    i {
      // color: #fff;
      // font-size: 18px;
      position: absolute;
      left: 1px;
      top: -1px;
      cursor: pointer;
      &.iconfont {
        width: 24px;
        height: 24px;
        padding: 0;
        &.icon-jiantouarrow-hide {
          background: url(../../../../assets/relation/icon-jiantouarrow-esc.png)
            no-repeat center;
        }
      }
    }
  }
}

.slide-minimap-open {
  animation: boxAnimationOpen 0.5s;
  opacity: 0.95 !important;
}
@keyframes boxAnimationOpen {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.95;
  }
}

.slide-minimap-close {
  animation: boxAnimationClose 0.5s;
  opacity: 0 !important;
}
@keyframes boxAnimationClose {
  from {
    opacity: 0.95;
  }
  to {
    opacity: 0;
  }
}

.minimapRadar {
  position: absolute;
  background-color: #f6f8fa;
}

.minimap-image {
  // position: absolute;
  // width: 273px;
  // height: 99px;
}

// .minimapWrapperIdle {
//     opacity: 0.2;
//     transition: opacity 0.5s;
// }

.minimapWrapperMove {
  opacity: 0.95;
  transition: opacity 0.5s;
}
</style>

 

2、当前页面的canvas 利用js获取截屏 使用技术：Vue+TS+visjs

 // 快照 保存图片
  private saveAsImage() {
    debugger
    const self: any = this;
    const myNetworkCanvas = document.getElementsByTagName('canvas')[0]; //获取Canvas
    const tempCanvas = document.createElement('canvas')
    const tempContext = tempCanvas.getContext('2d')

    let content: any = document.createEvent("HTMLEvents");
    const { clientWidth, clientHeight } = self.$parent.$refs.RelationShipChartDom.$refs.network.$el //获取Canvas的宽高

    const width = Math.round((tempCanvas.width = clientWidth / 2))
    const height = Math.round((tempCanvas.height = clientHeight / 2))
    if (tempContext) {
      // tempContext.shadowColor = 'rgba(255, 255, 255, 0)';
      // tempContext.fillStyle = "red";
      tempContext.drawImage(myNetworkCanvas, 0, 0, width, height);
      content.src = tempCanvas.toDataURL()
    }
    this.downloadImg(content);
  }
 private downloadImg(imageName: any) {
    const fileName =  this.chatMessage.caseDetailInfoData.caseName ||""
    const url = imageName.src;                            // 获取图片地址
    const a = document.createElement('a');          // 创建一个a节点插入的document
    const  event  =  new  MouseEvent('click')           // 模拟鼠标click点击事件
    a.download = fileName + "关系分析"                  // 设置a节点的download属性值
    a.href = url;                                 // 将图片的src赋值给a节点的href
    a.dispatchEvent(event)                        // 触发鼠标点击事件
  }