Appearance
@jtopo/core / ImageUtil
Class: ImageUtil
图片相关工具类
Table of contents
Constructors
Methods
- batchLoadAndConvertImages
- bgGrid
- colorFilter
- createDarkGridImg
- createGridImage
- createLightGridImg
- imageToBase64
- loadAndConvertImage
- parseImgUrl
- svgToImage
- svgToImageUrl
Constructors
constructor
new ImageUtil()
Methods
batchLoadAndConvertImages
Static batchLoadAndConvertImages(imageUrls): Promise<string[]>
批量加载图片并转换为Base64
Parameters
| Name | Type | Description |
|---|---|---|
imageUrls | string[] | 图片URL数组 |
Returns
Promise<string[]>
图片的Base64数据数组
bgGrid
Static bgGrid(w, h, row, col, fillStyle?, strokeStyle?): string
创建网格背景图片（图片为Base64编码形式: data:image/svg+xml;charset=UTF-8,....）
Parameters
| Name | Type | Default value |
|---|---|---|
w | number | undefined |
h | number | undefined |
row | number | undefined |
col | number | undefined |
fillStyle | string | "#242424" |
strokeStyle | string | "#151515" |
Returns
string
colorFilter
Static colorFilter(image, color): HTMLImageElement
根据图片对象和颜色 生成一个新的Image对象 例如： ImageUtil.colorFilter(image, [255, 0, 0]) 或者自定义滤镜：
js
const filterImg = ImageUtil.colorFilter(img, function (r, g, b, a) {
g = g > 0 ? 255 : 0;
return [r, g, b, a];
});Parameters
| Name | Type |
|---|---|
image | HTMLImageElement |
color | Function | number[] |
Returns
HTMLImageElement
createDarkGridImg
Static createDarkGridImg(fillStyle, strokeStyle): string
系统默认的‘暗色’背景网格图
Parameters
| Name | Type |
|---|---|
fillStyle | string |
strokeStyle | string |
Returns
string
createGridImage
Static createGridImage(width, height, row, col, fillStyle, strokeStyle): string
创建网格背景图片
返回形式: url("data:image/svg+xml;charset=UTF-8,...")
Parameters
| Name | Type |
|---|---|
width | number |
height | number |
row | number |
col | number |
fillStyle | string |
strokeStyle | string |
Returns
string
createLightGridImg
Static createLightGridImg(fillStyle, strokeStyle): string
系统默认的‘亮色’背景网格图
Parameters
| Name | Type |
|---|---|
fillStyle | string |
strokeStyle | string |
Returns
string
imageToBase64
Static imageToBase64(image): string
将一个图片对象转成Base64编码格式
Parameters
| Name | Type |
|---|---|
image | HTMLImageElement |
Returns
string
loadAndConvertImage
Static loadAndConvertImage(imageUrl): Promise<string>
加载图片并转换为Base64
Parameters
| Name | Type | Description |
|---|---|---|
imageUrl | string | 图片URL |
Returns
Promise<string>
图片的Base64数据
parseImgUrl
Static parseImgUrl(url): any
Parameters
| Name | Type |
|---|---|
url | any |
Returns
any
svgToImage
Static svgToImage(svgString): HTMLImageElement
SVG字符串转成图片格式的URL
Parameters
| Name | Type |
|---|---|
svgString | string |
Returns
HTMLImageElement
'data:image/svg+xml;charset=UTF-8,' + svgString;
svgToImageUrl
Static svgToImageUrl(svgString): string
SVG字符串转成图片格式的URL
Parameters
| Name | Type |
|---|---|
svgString | string |
Returns
string
'data:image/svg+xml;charset=UTF-8,' + svgString;