Image-overlays-realman NPM

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