wux-weapp/packages/es/helpers/hooks/useCanvasAPI.js

一套组件化、可复用、易扩展的微信小程序 UI 组件库

import { miniprogramThis } from '../internals/global'
import { getSystemInfoSync } from './useNativeAPI'
import { useRef } from './useDOM'

export function getCanvasRef(canvasId, vm) {
    return useRef(`#${canvasId}`, vm)
        .then((res) => {
            if (!res) {
                return Promise.reject({
                    errMsg: 'Canvas is not supported in the current environment.',
                })
            }
            return res.node
        })
}

export function createImage({ imageWidth, imageHeight, imageUrl }, canvas) {
    return new Promise((resolve, reject) => {
        if (typeof canvas.createImage === 'function') {
            const ratio = getSystemInfoSync(['window']).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
 * @param {number} width 指定的画布区域的宽度
 * @param {number} height 指定的画布区域的高度
 * @param {string} type 目标文件的类型，可选值为 png, jpg, jpeg, webp
 * @param {number} quality 图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。
 * @param {object} canvas 画布标识，传入 canvas 组件实例 （canvas type="2d" 时使用该属性）。
 * @return {string} 
 */
export function toDataURL({
    width,
    height,
    type ='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
            const fileType = type === 'jpg' || type === 'jpeg' ? 'jpeg' : type
            resolve(canvas.toDataURL(`image/${fileType}`, quality))
        } else if (typeof miniprogramThis.canvasToTempFilePath === 'function') {
            // 基础库 1.9.6 开始支持
            // @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html
            const ratio = getSystemInfoSync(['window']).pixelRatio
            const fileType = type === 'jpg' || type === 'jpeg' ? 'jpg' : 'png'
            miniprogramThis.canvasToTempFilePath({
                destWidth: width * ratio,
                destHeight: height * ratio,
                canvas,
                fileType,
                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)
        ) {
            miniprogramThis.downloadFile({
                url: imageUrl,
                success: (res) => {
                    if (res.statusCode === 200) {
                        resolve(res.tempFilePath)
                    } else {
                        reject({ errMsg: res.errMsg })
                    }
                },
                fail(err) {
                    reject(err)
                },
            })
        } else {
            // 支持本地地址
            resolve(imageUrl)
        }
    })
}