图片工具

Methods

(inner) convertCanvas2Base64(canvas, type) → {string}

Description:
  • 将canvas转成base64
Source:
  • utils/image.js, line33
Parameters:
Name Type Default Description
canvas Element DOM元素，canvas
type string image/png 图片格式，默认是image/png
Returns:
base64
Type
string

(async, inner) drawCanvas(style, content) → {HTMLElement}

Description:
  • 绘制一个canvas的内容
Source:
  • utils/image.js, line166
Parameters:
Name Type Description
style object 整个canvas的样式
Properties
Name Type Description
height object 高
width object 宽
backgroundImage object 背景图
borderRadius object 边框圆角半径
borderColor object 边框颜色
borderWidth object 边框宽度
backgroundColor object 背景颜色
content Array 需要绘制内容
Returns:
canvas元素
Type
HTMLElement

(async, inner) drawContent(context, style, contentList)

Description:
  • 重新绘制标签内容
Source:
  • utils/image.js, line229
Parameters:
Name Type Description
context Object canvas 2D 渲染环境
style Object 样式配置参数
contentList object 内容清单

(inner) drawTextToImage(text, style)

Description:
  • 根据文字输出canvas
Source:
  • utils/image.js, line352
Parameters:
Name Type Description
text string 文字
style object 样式
Properties
Name Type Description
width number 文字贴图的宽度，默认为(文字总宽+10px)
height number 文字贴图的高度，默认为(1.4*fontSize)
fontSize number 字体大小,默认12
fontface string 字体名称,默认Arial
borderThickness number 外边框宽度,默认0
borderColor object 外边框颜色,默认{r:0,g:0,b:0,a:1.0}
backgroundColor object 背景颜色,默认{r:255,g:255,b:255,a:1.0}
strokeStyle object 文字描边颜色,默认{r:255,g:0,b:0,a:1.0}
textColor object 文字颜色,默认{r:255,g:0,b:0,a:1.0}
drawRoundRect boolean 是否画外边框,默认false
drawStrokeStyle boolean 是否文字描边,默认false
Returns:
Canvas

(inner) isBase64(str)

Description:
  • 是否为base64格式
Source:
  • utils/image.js, line43
Parameters:
Name Type Description
str 待判断字符串
Returns:
返回布尔值，为base64格式则返回true，否则返回false

(inner) loadImageAsBase64(url, callback)

Description:
  • 通过url读取图片并转成base64
Source:
  • utils/image.js, line13
Parameters:
Name Type Description
url string 图片链接
callback function 回调函数

(inner) loadImg(url, resourcePath) → {object}

Description:
  • 加载图片
Source:
  • utils/image.js, line55
Parameters:
Name Type Default Description
url string 图片链接地址
resourcePath string https://mapdata.bj.bcebos.com root路径，可选，默认值'https://mapdata.bj.bcebos.com'
Returns:
promise
Type
object

(inner) roundRect(ctx, x, y, w, h, r)

Description:
  • 利用canvas绘制矩形框
Source:
  • utils/image.js, line82
Parameters:
Name Type Description
ctx Object canvasContainer CanvasRenderingContext2D
x number 左侧开始位置
y number 上侧开始位置
w number 宽度
h number 高度
r number 圆角半径