在jsplumb中使用html2canvas + svgToCanvas 将svg图片以及canvas生成缩略图并用于用户在界面下载和上传后台

最新推荐文章于 2024-08-09 07:16:01 发布

huangq_qiao

最新推荐文章于 2024-08-09 07:16:01 发布

阅读量1.4k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qiao_qiao_happy/article/details/109602621

版权

本文介绍了如何在jsplumb画图后，利用html2canvas和svgToCanvas库将SVG图片及Canvas转换为缩略图。这些缩略图可用于用户在界面上的下载操作，同时也能上传到后台。

摘要由CSDN通过智能技术生成

使用jsplumb框架画图
使用html2canvas + svgToCanvas 将svg图片以及canvas生成缩略图并用于用户在界面下载和上传后台

// 导入utils.js文件,导入html2canvas包
import utils from '../../utils/util'
import html2canvas from 'html2canvas'
…………


    downloadPicture () {
    // 用户生成图片用于本地下载
      this.designLoading = true
      if (!this.checkJpg()) {
   
        this.designLoading = false
        return
      }
      this.$refs.designCanvas.unselectCurrent() // 取消所有节点的选中关闭右侧编辑框
      this.createJpg().then((response) => {
   
        this.$Message.success('缩略图生成成功')
        this.designLoading = false
        this.pictureVisible = true
      }).catch(() => {
   
        this.designLoading = false
        this.$Message.error('缩略图生成失败请重试')
      })
    },
    downLoadFlowPicture () {
    // 用户下载缩略图
      utils.downLoadFlowPicture(this.graphId, this.htmlUrl, this.graphName)
    },
    cancelDownLoadFlowPicture () {
   
      this.pictureVisible = false
    },
    async createJpg () {
    // 生成缩略图
      this.designLoading = true
      const create = this