wxml-to-canvas for Taro,小程序内通过静态模板和样式绘制 canvas,导出图片,可用于生成分享图等场景。
实例代码不可运行,作为与 wxml-to-canvas 比较
import WxmlToCanvas from 'taro-wxml-to-canvas'
export default class Poster extends Component<Props, State> {
private canvasRef: RefObject<WxmlToCanvas>
private canvasWidth = Taro.getSystemInfoSync().windowWidth || 375
private canvasHeight = Taro.getSystemInfoSync().windowHeight || 600
constructor(props) {
super(props)
this.state = {}
this.canvasRef = createRef()
}
componentDidMount() {
this.renderToCanvas()
}
getWxml() {
const { bg, imgUrl } = this.props
const wxml = `
<view class="poster-share">
<view class="poster-wrap">
<image class="poster-bg" src="${bg}"></image>
<image class="poster-code" src="${imgUrl}"></image>
</view>
</view>
`
return wxml
}
renderToCanvas = async () => {
const wxml = this.getWxml()
const style = {
posterShare: {},
posterWrap: {},
posterBg: {},
posterCode: {},
}
try {
const res = await this.canvasRef.current.renderToCanvas({ wxml, style })
console.log('render done', res)
} catch (err) {
console.log('canvas err', err)
}
}
renderToCanvas = () => {
const setTempFile = this.canvasRef.current.canvasToTempFilePath()
setTempFile
.then(res => {
console.log(res.tempFilePath)
})
.catch(() => {
console.log('oops... something error')
})
}
render() {
return (
<View>
<View className="wxml-wrap">
<WxmlToCanvas
ref={this.canvasRef}
width={this.canvasWidth}
height={this.canvasHeight}
></WxmlToCanvas>
</View>
<View className="save-btn" onClick={this.renderToCanvas}>
保存图片
</View>
</View>
)
}
}