fupin/wux/helpers/canvasPolyfill.js

export function getCanvas({ canvasId, node = true, size = true }, vm) {
    return new Promise((resolve, reject) => {
        const query = wx.createSelectorQuery().in(vm)
        query.select(`#${canvasId}`)
            .fields({ node, size })
            .exec((res) => {
                if (!res[0]) {
                    reject({
                        errMsg: 'Canvas is not supported in the current environment.',
                    })
                    return
                }
                resolve(res[0].node)
            })
    })
}

export function createImage({ imageWidth, imageHeight, imageUrl }, canvas) {
    return new Promise((resolve, reject) => {
        if (typeof canvas.createImage === 'function') {
            const ratio = wx.getSystemInfoSync().pixelRatio
            const ctx = canvas.getContext('2d')
            const img = canvas.createImage()
            img.onload = () => {
                ctx.drawImage(
                    img,
                    (-imageWidth * ratio) / 2,
                    (-imageHeight * ratio) / 2,
                    imageWidth * ratio,
                    imageHeight * ratio
                )
                resolve(imageUrl)
            }
            img.onerror = () => {
                reject({
                    errMsg: 'Image creation failed in canvas.createImage.',
                })
            }
            img.src = imageUrl
        } else {
            reject({
                errMsg: 'Canvas.createImage is not a function.',
            })
        }
    })
}

export function toDataURL({
    width,
    height,
    type ='image/png',
    quality = 1,
}, canvas) {
    return new Promise((resolve) => {
        if (typeof canvas.toDataURL === 'function') {
            // 基础库 2.11.0 开始支持
            // @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.toDataURL.html
            resolve(canvas.toDataURL(type, quality))
        } else if (typeof wx.canvasToTempFilePath === 'function') {
            const ratio = wx.getSystemInfoSync().pixelRatio
            wx.canvasToTempFilePath({
                destWidth: width * ratio,
                destHeight: height * ratio,
                canvas,
                fileType: type.indexOf('png') !== -1 ? 'png' : 'jpg',
                quality,
                success: (res) => resolve(res.tempFilePath),
                fail: () => resolve(''),
            })
        } else {
            resolve('')
        }
    })
}

export function downloadImage(imageUrl) {
    return new Promise((resolve, reject) => {
        if (
            /^http/.test(imageUrl) &&
            // @ts-ignore
            !/^http:\/\/tmp/.test(imageUrl)
        ) {
            wx.downloadFile({
                url: imageUrl,
                success: (res) => {
                    if (res.statusCode === 200) {
                        resolve(res.tempFilePath)
                    } else {
                        reject({ errMsg: res.errMsg })
                    }
                },
                fail(err) {
                    reject(err)
                },
            })
        } else {
            // 支持本地地址
            resolve(imageUrl)
        }
    })
}