image-mark-tile
v0.4.5
Published
项目地址(使用参考README): https://gitlab.meitu.com/innovate-frontend/image-mark-tile
Readme
图片标注库
支持工具
拖动图片：点击后可对图片进行拖动
矩形工具：点击后可在图上画矩形，可支持调整线框大小颜色以及是否空心，参考截图工具
椭圆形工具：同矩形工具，但形状为椭圆形
箭头：点击后可在图上画箭头
文字：点击后可在图上插入文本框
install
npm install @meitu/image-mark --registry http://npm.meitu-int.comUsage
import ImageMark from '@meitu/image-mark';
type PanzoomDataInfoType = {
scale:number;
x:number;
y:number;
isInit:boolean; // true:初始拖拽缩放;false:用户修改后
}
const [imageInfo, setImageInfo] = useState({
url: '', // 示例 URL
json: {}
});
const [zoomInfo, setZoomInfo] = useState<PanzoomDataInfoType>({
scale:1,
x:0,
y:0,
isInit:true // 是否初始缩放
});
const onCanvasUpdate = (data:any,zoomDataInfo:PanzoomDataInfoType)=>{
console.log('画布通知更新数据 data',data);
console.log('画布通知更新数据 zoomDataInfo',zoomDataInfo);
setZoomInfo(zoomDataInfo);
setImageInfo({url:curUrl6,json: data})
}
return (
<div className='app'>
<div className="imageMarkWrap">
<!-- 需要为 imageMarkWrap 设置宽高 -->
<ImageMark isCanEdit={true} zoomInfo={zoomInfo} imageInfo={imageInfo} onCanvasUpdate={onCanvasUpdate} />
</div>
</div>
)目录介绍 /dist 打包后的文件目录 /lib 源码文件 /src 开发所需的资源文件目录 /package.json 命令行配置文件 /vite.config.ts vite 打包配置文件
推荐 node 版本: v20.11.1
本地包测试
1 生成 /dist 文件 npm run build
2 建立软链接，在开发的 npm 包项目中执行 npm link
tips:这将会把当前目录中的包注册到全局的 npm 包中，并建立一个全局的软链接
3 业务项目中使用本地软链接 npm link @meitu/image-mark
tips:这将创建一个到全局 npm 包软链接的本地依赖。现在，目标项目中使用这个包的地方将直接指向你本地开发的包
4 测试完毕，释放目标项目中软链接 npm unlink @meitu/image-mark
验证本地包内容: 生成一个 .tgz 文件，你可以打开它来查看打包内容
mac vips 生成切片图: vips dzsave large_image.jpg tiles
npm pack发包准备
1 登录账号
npm login检查 package.json 字段,假设此时包的名称为 @lqq2/demo
{
name: '@lqq2/demo',
version: '1.0.0',
main: './dist/xxx.umd.cjs',
}2 发包
npm publish