image-overlays-realman

##使用方法 example

import DrawImgTovancas from 'image-overlays-realman'

API

DrawImgTovancas.loadImageToCanvas(Dom id,image url)

DrawImgTovancas.loadVideoTocanvas(Dom id,video url)

DrawImgTovancas.fillColor() set color

DrawImgTovancas.dowmload() img

DrawImgTovancas.videoPlay() palay video

支持ctrl + z 撤回操作

调用 removeEventLister 移除监听

VUE demo

<template>
    <div>
        <el-button @click="fillColor" type="success">填充选中区域颜色</el-button>
        <el-button @click="download">下载</el-button>
        <input type="file" @change='(e) => uploadFile(e)' name="upload">
        <div id="canvasDemo"></div>
    </div>
</template>
<script setup>
import DrawImgTovancas from 'image-overlays-realman'
import { onMounted, onBeforeUnmount } from 'vue'
const util = new DrawImgTovancas()
const fillColor = () => util.fillColor()
const download = () => util.download()
const uploadFile = e => {
    util.uploadFile(e.target.files[0]).then(self => {
        self.clear().loadImageToCanvas("canvasDemo",util.url)
    })
   
      // 💠 1.0.17新增  util.uploadFiles(e.target.files[0],'canvasDemo',()=>{return util.setSize(20,30)} ) 
}
onMounted(() => {
    //  util.loadImageToCanvas('canvasDemo','https://cs-scm.oss-cn-hangzhou.aliyuncs.com/2024-01-29/1706524291602-u%3D2606150498%2C3701823879%26fm%3D253%26app%3D138%26size%3Dw931%26n%3D0%26f%3DJPEG%26fmt%3Dauto.realmanp')

})
onBeforeUnmount(() => {
    util.removeEventListener()
})
</script>
<style  scoped></style>

| 序号 | 属性/function | 名称 | 用法 | | :---------: | :---------: | :---------: | :---------: |
| 1 | loadImageToCanvas(DomId,imageUrl) 必传 | 渲染图片 | 参照VUE Demo |
| 2 | loadVideoToCanvas(DomId,videoUrl) 必传 | 渲染图片 | 同上 |
| 3 | ctrl + z | 撤回操作 | -- |
| 4 |DrawImgTovancas(color) 非必传 | 初始化 | 实例化 参照VUE Demo |
| 5 | getPoints() | 获取标记坐标 | const points = util.getPoints() |
| 6 | removeEventListener() | 移除监听 | 组建销毁，页面关闭时触发 | | 7 | fillolor() | 选中区域填充颜色 | -- | | 8 | download(name='down',type=null) | 下载图片 | name 下载文件名称，自动加时间结尾；type === null 正常下载 ；！==null下载标注部分| | 9 | videoPlay() | 播放视频 | -- | | 10 | clear() | 切换图片调用，清除缓存数据和事件监听 | -- | | 11 | uploadFile() | 本地上传图片/视频 | 参照VUE Demo | | 11 | uploadFiles() 💠 1.0.17新增| 本地上传图片/视频 | 参照VUE Demo | | 12 | setSize() 💠 1.0.17新增| 设置canvas 宽高| 本地上传参照VUE Demo；网络图片必须在调用loadImageToCanvas 或loadVideoToCanvas 前调用|