Appearance
@jtopo/core / ImageUtil
Class: ImageUtil
图片相关工具类
Table of contents
Constructors
Methods
- batchLoadImagesToBase64
- bgGrid
- colorFilter
- createDarkGridImg
- createGridImage
- createLightGridImg
- isImageValid
- loadAndConvertImage
- loadImageAsBase64
- loadImageAsDataUrl
- parseImgUrl
- svgToImage
- svgToImageBase64
- svgToImageDataUrl
- svgToImageUrl
Constructors
constructor
new ImageUtil()
Methods
batchLoadImagesToBase64
Static batchLoadImagesToBase64(imageUrls): Promise<string[]>
Deprecated
代替
Parameters
| Name | Type |
|---|---|
imageUrls | string[] |
Returns
Promise<string[]>
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
isImageValid
Static isImageValid(img): boolean
判断图片是否有效
Parameters
| Name | Type | Description |
|---|---|---|
img | HTMLImageElement | 图片对象 |
Returns
boolean
是否有效
loadAndConvertImage
Static loadAndConvertImage(imageUrl): Promise<string>
Deprecated
请使用 loadImageAsBase64 代替
Parameters
| Name | Type |
|---|---|
imageUrl | string |
Returns
Promise<string>
loadImageAsBase64
Static loadImageAsBase64(imageUrl): Promise<string>
Deprecated
请使用 loadImageAsDataUrl 代替
Parameters
| Name | Type |
|---|---|
imageUrl | string |
Returns
Promise<string>
loadImageAsDataUrl
Static loadImageAsDataUrl(imageUrl): Promise<string>
将：./img/abc.png 或 data:image 统一转换为 data:image/xxx 格式
加载图片并转换为DataURL
Parameters
| Name | Type | Description |
|---|---|---|
imageUrl | string | 图片URL |
Returns
Promise<string>
图片的DataURL数据
parseImgUrl
Static parseImgUrl(url): string
Parameters
| Name | Type |
|---|---|
url | string |
Returns
string
svgToImage
Static svgToImage(svgString): HTMLImageElement
SVG字符串转成图片格式的URL
Parameters
| Name | Type |
|---|---|
svgString | string |
Returns
HTMLImageElement
'data:image/svg+xml;charset=UTF-8,' + svgString;
svgToImageBase64
Static svgToImageBase64(html, w, h): string
Deprecated
请使用 svgToImageDataUrl 代替
Parameters
| Name | Type |
|---|---|
html | string |
w | number |
h | number |
Returns
string
svgToImageDataUrl
Static svgToImageDataUrl(html, w, h): string
SVG字符串转成图片格式的URL 返回形式: data:image/svg+xml;charset=UTF-8,
编码后的
Parameters
| Name | Type | Description |
|---|---|---|
html | string | svg字符串 |
w | number | 宽度 |
h | number | 高度 |
Returns
string
data:image/svg+xml;charset=UTF-8,encodedSvg
svgToImageUrl
Static svgToImageUrl(svgString): string
SVG字符串转成图片格式的URL
Parameters
| Name | Type |
|---|---|
svgString | string |
Returns
string
'data:image/svg+xml;charset=UTF-8,' + svgString;