Vap/web/vap/vap-frame-parser.js

/*
 * Tencent is pleased to support the open source community by making vap available.
 *
 * Copyright (C) 2020 THL A29 Limited, a Tencent company.  All rights reserved.
 *
 * Licensed under the MIT License (the "License"); you may not use this file except in
 * compliance with the License. You may obtain a copy of the License at
 *
 * http://opensource.org/licenses/MIT
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License is
 * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
 * either express or implied. See the License for the specific language governing permissions and
 * limitations under the License.
 */
export default class FrameParser {
    constructor(source, headData) {
        this.config = source || {}
        this.headData = headData
        this.frame = []
        this.textureMap = {}
    }
    async init() {
        this.initCanvas()
        await this.parseSrc(this.config)
        this.canvas.parentNode.removeChild(this.canvas)
        this.frame = this.config.frame || []
        return this
    }

    initCanvas() {
        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')
        canvas.style.display = 'none'
        document.body.appendChild(canvas)
        this.ctx = ctx
        this.canvas = canvas
    }

    loadImg(url) {
        return new Promise((resolve, reject) => {
            // console.log('load img:', url)
            const img = new Image()
            img.crossOrigin = 'anonymous'
            img.onload = function() {
                resolve(this)
            }
            img.onerror = function(e) {
                console.error('frame 资源加载失败:' + url)
                reject(new Error('frame 资源加载失败:' + url))
            }
            img.src = url
        })
    }

    parseSrc(dataJson) {
        const src = (this.srcData = {})
        return Promise.all(
            (dataJson.src || []).map(async item => {
                if (item.srcType === 'txt') {
                    item.textStr = item.srcTag.replace(/\[(.*)\]/, ($0, $1) => {
                        return this.headData[$1]
                    })
                    item.img = this.makeTextImg(item)
                } else if (item.srcType === 'img') {
                    item.imgUrl = item.srcTag.replace(/\[(.*)\]/, ($0, $1) => {
                        return this.headData[$1]
                    })
                    try {
                        item.img = await this.loadImg(item.imgUrl + '?t=' + Date.now())
                    } catch (e) {}
                }
                src[item.srcId] = item
            })
        )
    }
    /**
     * 文字转换图片
     * @param {*} param0
     */
    makeTextImg({ textStr, w, h, color, style }) {
        const ctx = this.ctx
        ctx.canvas.width = w
        ctx.canvas.height = h
        const fontSize = Math.min(parseInt(w / textStr.length, 10), h - 8) // 需留一定间隙
        const font = [`${fontSize}px`, 'Arial']
        if (style === 'b') {
            font.unshift('bold')
        }
        ctx.font = font.join(' ')
        ctx.textBaseline = 'middle'
        ctx.textAlign = 'center'
        ctx.fillStyle = color
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
        ctx.fillText(textStr, w / 2, h / 2)
        // console.log('frame : ' + textStr, ctx.canvas.toDataURL('image/png'))
        return ctx.getImageData(0, 0, w, h)
    }
    getFrame(frame) {
        return this.frame.find(item => {
            return item.i === frame
        })
    }
}