The "path" argument must be of type string. Received type object

[sunyawei1992]

The "path" argument must be of type string. Received type object

import Taro, { useRouter, useState, useEffect } from '@tarojs/taro' import { View, Image, Text } from '@tarojs/components' import './index.scss' import { baseUrl, baseImg } from '../../config' import { lockInfo } from '../../api/lock' import { useAsyncEffect } from '../../utils' import { TaroCanvasDrawer } from 'taro-plugin-canvas'

const ConfirmLock = () => {

const { params } = useRouter()

const [item, setItem] = useState<any>()

const [height, setHeight] = useState<any>()

const [config, setConfig] = useState<any>({})
const [configs, setConfigs] = useState<any>({})

const [canvasStatus, setCanvasStatus] = useState<boolean>(false)

const [shareImage, setShareImage] = useState<any>()

useEffect(() => {
    let num = 0;
    Taro.getSystemInfo({
        success: function (res) {
            num = res.statusBarHeight

        }
    })
    setHeight(num)
})
useEffect(() => {
    let obj = {
        width: 750,
        height: 750,
        backgroundColor: '#fff',
        debug: false,
        blocks: [
            {
                x: 0,
                y: 0,
                width: 750,
                height: 750,
                paddingLeft: 0,
                paddingRight: 0,
                borderWidth: 0,
                // borderColor: '#ccc',
                backgroundColor: '#EFF3F5',
                borderRadius: 0,
            },
            {
                x: 40,
                y: 40,
                width: 670,
                height: 670,
                paddingLeft: 0,
                paddingRight: 0,
                borderWidth: 0,
                // borderColor: '#ccc',
                backgroundColor: '#fff',
                borderRadius: 12,
            }
        ],
        texts: [
            {
                x: 80,
                y: 420,
                text: '国产谍战 真人演出,《隐形守护者》凭什么成为Steam第一?',
                fontSize: 32,
                color: '#000',
                opacity: 1,
                baseLine: 'middle',
                lineHeight: 48,
                lineNum: 2,
                textAlign: 'left',
                width: 580,
                zIndex: 999,
            },
            {
                x: 80,
                y: 590,
                text: '长按扫描二维码阅读完整内容',
                fontSize: 24,
                color: '#666',
                opacity: 1,
                baseLine: 'middle',
                textAlign: 'left',
                lineHeight: 36,
                lineNum: 1,
                zIndex: 999,
            },
            {
                x: 80,
                y: 640,
                text: '分享来自 「 RssFeed 」',
                fontSize: 24,
                color: '#666',
                opacity: 1,
                baseLine: 'middle',
                textAlign: 'left',
                lineHeight: 36,
                lineNum: 1,
                zIndex: 999,
            }
        ],
        images: [
            {
                url: 'http://pic.juncao.cc/rssfeed/images/demo.png',
                width: 670,
                height: 320,
                y: 40,
                x: 40,
                borderRadius: 12,
                zIndex: 10,
                // borderRadius: 150,
                // borderWidth: 10,
                // borderColor: 'red',
            },
            {
                url: 'https://pic.juncao.cc/cms/images/minapp.jpg',
                width: 110,
                height: 110,
                y: 570,
                x: 560,
                borderRadius: 100,
                borderWidth: 0,
                zIndex: 10,
            },
        ],
        lines: [
            {
                startY: 540,
                startX: 80,
                endX: 670,
                endY: 541,
                width: 1,
                color: '#eee',
            }
        ]
    };
    setConfig(obj)
    // canvasDrawFunc()
})
useAsyncEffect(async () => {
    // try {
    //     if (params.loveLockId) {
    //         const { retCode, data }: any = await lockInfo({
    //             loveLockId: params.loveLockId
    //         })
    //         if (retCode == '0') {
    //             setItem(data)
    //         }
    //     } else {
    //         const { retCode, data }: any = await lockInfo({
    //             orderNo: params.orderNo
    //         })
    //         if (retCode == '0') {
    //             setItem(data)
    //         }
    //     }

    // } catch (err) {
    //     console.log(err)
    // }
}, [])

const timeUtil = (value) => {
    let date = new Date(value);
    let Y, M, D, h, m
    Y = date.getFullYear();
    M = date.getMonth();
    D = date.getDate();
    h = date.getHours();
    m = date.getMinutes();
    return `${Y}/${M}/${D} ${h}:${m}`
}
// 调用绘画 => canvasStatus 置为true、同时设置config
const canvasDrawFunc = () => {
    // setCanvasStatus(true)
    // Taro.showLoading({
    //     title: '绘制中...'
    // })
}

// 绘制成功回调函数 （必须实现）=> 接收绘制结果、重置 TaroCanvasDrawer 状态
const onCreateSuccess = (result) => {
    // const { tempFilePath, errMsg } = result;
    // Taro.hideLoading();
    // if (errMsg === 'canvasToTempFilePath:ok') {
    //     setShareImage(tempFilePath)
    //     setCanvasStatus(false)
    // } else {
    //     // 重置 TaroCanvasDrawer 状态，方便下一次调用
    //     setCanvasStatus(false)
    //     Taro.showToast({ icon: 'none', title: errMsg || '出现错误' });
    //     console.log(errMsg);
    // }
    // 预览
    // Taro.previewImage({
    //   current: tempFilePath,
    //   urls: [tempFilePath]
    // })
}

// 绘制失败回调函数 （必须实现）=> 接收绘制错误信息、重置 TaroCanvasDrawer 状态
const onCreateFail = (error) => {
    // Taro.hideLoading();
    // // 重置 TaroCanvasDrawer 状态，方便下一次调用
    // setCanvasStatus(false)
}

// 保存图片至本地
// const saveToAlbum = () => {
//     Taro.saveImageToPhotosAlbum({
//         filePath: this.state.shareImage,
//         success(res) {
//             if (res.errMsg === 'saveImageToPhotosAlbum:ok') {
//                 Taro.showToast({
//                     title: '保存图片成功',
//                     icon: 'success',
//                     duration: 2000,
//                 });
//             }
//         }
//     });

// }

return (
    <View className='confirm-lock'>
        <Image src={`${baseUrl}/lock.png`} className='back'></Image>
        <View className='content' style={{ paddingTop: `${height}px` }}>
            <View className='header'>
                <Image src={`${baseUrl}/back.png`} className='icon' onClick={
                    () => Taro.navigateBack({
                        delta: 1
                    })
                }></Image>
                <Text className='title'>区块链爱情锁</Text>
            </View>
        </View>
        <View className="container">
            <View className='header'>
                <View className='first'>
                    <View className='second'></View>
                </View>
                <View className='ion'>
                    <Image src={`${baseUrl}/total-lock.png`}></Image>
                    {/* <Text className='formName'>{item.fromUser.nickName}</Text>
                    <Text className='toName'>{item.toUser.nickName}</Text>
                    <Text className='line'>永结同心</Text>
                    <Text className='time'>{timeUtil(item.createTime)}</Text> */}
                </View>
            </View>
            <View className='box'>
                <View className='list'>
                    <Text className='l'>上链双方</Text>
                    <View className='info'>
                        {/* <Text className='name'>{item.fromUser.nickName}</Text>
                        <Image className='url' src={baseImg + item.fromUser.avatar}></Image> */}
                        <Image className='ion' src={`${baseUrl}/smile.png`}></Image>
                        {/* <Image className='url' src={baseImg + item.toUser.avatar}></Image>
                        <Text className='name'>{item.toUser.nickName}</Text> */}
                    </View>
                </View>
                <View className='list'>
                    <Text className='l'>上链时间</Text>
                    <View className='time'>
                        {/* {timeUtil(item.createTime)} */}
                    </View>
                </View>
                <View className='list'>
                    <Text className='l'>上链哈希</Text>
                    <View className='haxi'>
                        {/* <Text>{item.hash}</Text> */}
                        <Image className='ion' src={`${baseUrl}/copy.png`}></Image>
                    </View>
                </View>
                <View className='list'>
                    <Text className='l'>上链位置</Text>
                    <View className='time'>
                        {/* {item.pointName} */}
                    </View>
                </View>
                <View className='list'>
                    <Text className='l'>上链内容</Text>
                    <View className='dec'>
                        {/* {item.fromUser.nickName}对{item.toUser.nickName}说：“{item.content}” */}
                    </View>
                </View>
                <Image src={`${baseUrl}/seal.png`} className='seal'></Image>
            </View>
        </View>
        <View className='btns'>
            <View className='btn-l'>保存为图片</View>
            <View className='btn-r'>秀恩爱</View>
        </View>
        <TaroCanvasDrawer config={config} onCreateSuccess={onCreateSuccess} onCreateFail={onCreateFail} />
    </View>
)

}

ConfirmLock.config = { navigationStyle: "custom" }

export default ConfirmLock

报错

[jianhao]

兄弟解决这个问题了么，我也遇到了，就很奇怪

[JaylanChen]

把 import { TaroCanvasDrawer } from 'taro-plugin-canvas' 改成 import TaroCanvasDrawer from 'taro-plugin-canvas'; 试试

我遇到的问题是The "path" argument must be of type string. Received null，

taro-plugin-canvas： 1.0.10
tarojs： 2.2.16

以上仅供参考