vue3实现canvas图片和div整合下载

最新推荐文章于 2024-05-10 10:22:16 发布

大大大琪123

最新推荐文章于 2024-05-10 10:22:16 发布

阅读量743

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_48771583/article/details/127059548

版权

图片加载完成事件中完成canvas函数的绘画。引入到图片加载事件所在的文件（父组件）中。新建一个文件放置所要整合的div。下载的图片已经生成div。在setup中的实现函数。

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

在这里插入图片描述
下载的图片已经生成div

图片加载完成事件中完成canvas函数的绘画

        <el-image
          :src="
            locationIP +
            '/prod-api/get/detection/img/' +
            itemData.img_id +
            '?token=' +
            token
          "
          :load="htmlCanvas(itemData)"
        >
        </el-image>

新建一个文件放置所要整合的div

<template>
  <svg :width="context.elWidth" :height="context.elHeight">
    <foreignObject
      x="0"
      :y="0"
      :height="context.elHeight"
      :width="context.elWidth"
    >
        <div
        style="
          /* background: rgba(255, 255, 255, 1); */
          width: 100%;
         height: 500px;//后来察觉此高度无效
          color: black;
          font-weight: bold;
          font-size: 30px;
          border-radius: 10px;
          box-sizing: border-box;
          /* opacity: 0; */
          /* background:rgba(255, 255, 255, 0.6); */
          padding-bottom: 20px;
          overflow: hidden;
        "
      >
        <div
          style="
            width: 100%;
            background-color: rgba(121,180,242, 0.7);
            height: 80px;
            padding-left: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            line-height: 80px;
            text-align: center;
            color: #fff;
            display: fle