下载的图片已经生成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