taro-plugin-canvas
taro-plugin-canvas copied to clipboard
chuyun
The "path" argument must be of type string. Received type object
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
<TaroCanvasDrawer config={config} onCreateSuccess={onCreateSuccess} onCreateFail={onCreateFail} /> 报错
把 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
以上仅供参考
