# image-overlays

**Repository Path**: sundanping/image-overlays

## Basic Information

- **Project Name**: image-overlays
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-01-29
- **Last Updated**: 2024-02-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# image-overlays-web

##使用方法 example 
### import DrawImgTovancas from 'image-overlays-web'
### 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 

```html
<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-web'
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.webp')

})
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 前调用|