茉莉兰亭

1
/**
2
 * 寻找canvas文字的切换断点
3
 * @param {string} text 要寻找断点的文本
4
 * @param {number} width 需要切断的最大宽度
5
 * @param {any} context canvas画布
6
 * @return {number} 断点位置
7
 */
8
function findTextBreakPoint(text, width, context) {
9
    let [min, max] = [0, text.length - 1]
10

11
    while (min <= max) {
12
        // 取文本中值
13
        const middle = Math.floor((min + max) / 2)
14
        // 通过 measureText(text).width 获取一半文本在画布中的像素宽度
15
        const middleWidth = context.measureText(text.substr(0, middle)).width
16
        // 获取一半+1字符文本在画布中的像素宽度
17
        const middleOneCharWidth = context.measureText(text.substr(0, middle + 1)).width
18
        // 如果加1字符后刚好超出最大宽度，说明切断点就在middle这里
19
        if (middleWidth <= width && middleOneCharWidth > width) {
20
            return middle
21
        }
22
        // 如果一半宽度小于最大宽度，往前推进一个字符，反之后退
23
        if (middleWidth < width) {
24
            min = middle + 1
25
        } else {
26
            max = middle - 1
27
        }
28
    }
29
    // 未找到断点，直接返回-1
30
    return -1
31
}

1
/**
2
 * 将文字分割，存入数组返回
3
 * @param {any} context canvas画布
4
 * @param {string} text 要切断为数组的文本
5
 * @param {number} width 需要切断的最大宽度
6
 * @param {string} [font = ''] canvas文本样式
7
 * @return {string[]} 切割后的字串数组
8
 */
9
function breakLinesForCanvas(context, text, width, font = '') {
10
    const result = []
11
    let breakPoint = 0
12

13
    if (font) {
14
        context.font = font
15
    }
16
    // 遍历寻找断点，直到找不到断点
17
    while ((breakPoint = findTextBreakPoint(text, width, context)) !== -1) {
18
        // 切割断点前的字串，存入数组
19
        result.push(text.substr(0, breakPoint))
20
        // 将text设置为切割剩余的字串，继续遍历
21
        text = text.substr(breakPoint)
22
    }
23
    // 如果还有剩余字串，丢入数组
24
    if (text) {
25
        result.push(text)
26
    }
27
    return result
28
}

1
function base64ToFile(url) {
2
    // 截取并获取mine
3
    const arr = url.split(',')
4
    if (!arr || !arr[0]) throw new Error('获取文件mime失败')
5

6
    const mimeMatch = arr[0].match(/:(.*);/)
7
    if (!mimeMatch) throw new Error('获取文件mime失败')
8

9
    const mime = mimeMatch[1]
10
    // base64解码为Unicode编码
11
    const bstr = window.atob(arr[1])
12
    // 把每个unicode编码放入Unit8Array
13
    let n = bstr.length
14
    const u8arr = new Uint8Array(n)
15
    while (n--) {
16
        u8arr[n] = bstr.charCodeAt(n)
17
    }
18
    return new File([u8arr], '商标图样.jpg', {type: mime})
19
}

1
function intelGenerate(text) {
2
    const canvas = document.createElement('canvas')
3
    // 设置生成的图片宽高
4
    const [width, height] = [800, 800]
5
    canvas.width = width
6
    canvas.height = height
7
    const context = canvas.getContext('2d')
8
    context.fillStyle = '#fff'
9
    context.fillRect(0, 0, width, height)
10

11
    // 设置文字样式
12
    const lineHeight = 90
13
    context.font = 'bold 80px SimSun'
14
    context.textAlign = 'center'
15
    context.textBaseline = 'middle'
16
    context.fillStyle = '#000'
17

18
    // 获取切断目标文本后的数组
19
    const result = this.breakLinesForCanvas(context, text, width)
20
    // 设置文字开始绘制的高度，保证生成文字垂直居中
21
    const startTop = (height - result.length * lineHeight + lineHeight) / 2
22
    // 遍历逐行填充文本
23
    result.forEach((item, index) => {
24
        context.fillText(item, width / 2, lineHeight * index + startTop)
25
    })
26

27
    // 将canvas画布内容转为base64
28
    const imgBaseData = canvas.toDataURL('image/jpeg')
29
    // base64转换file二进制流
30
    const file = this.base64ToFile(imgBaseData)
31

32
    return file
33
}

1
function makeUploadFile(file) {
2
    return {
3
        file,
4
        uid: new Date().getTime(),
5
        size: file.size,
6
        name: file.name,
7
        raw: file,
8
        url: URL.createObjectURL(file)
9
    }
10
}