declare interface TextView {
x: number,
y: number,
content: string,
type: 'text',
color: string,
fontWeight: string,
fontSize: number,
lineHeight?: number,
textContainerWidth?: number,
textBaseline?: string,
fontStyle?: string,
fontVariant?: 'normal',
textAlign?: 'left' | 'center' | 'right',
fontFamily?: 'pfennigFont'
}
{
width: 345, // 画布宽
height: 600, // 画布高
scale: 1.5, // 画布缩小宽高比
views: [
{
type: 'image', // 类型图片
url: '', // 图片地址
x: 0, // 开始x坐标
y: 0, // 开始y坐标
width: 345, // 图片宽
height: 600, // 图片高
radius: 16 // 图片圆角
},
{
type: 'text',
content: '02.21-02.27',
x: 0,
y: 13,
fontSize: 13,
color: '#fff',
textAlign: 'center'
},
{
type: 'line',
x: 172,
y: 110,
lineWidth: 1,
strokeStyle: '#fff',
targetX: 172,
targetY: 130
}
]
}
import { CreateImg } from 'cross-json-2canvas'
const width = nodeJson.width * nodeJson.scale
const height = nodeJson.height * nodeJson.scale
const canvas = document.createElement('canvas')
canvas.width = width
canvas.height = height
const result = await createCrossCanvas(canvas, nodeJson).draw()
this.shareImgUrl = result.toDataURL('image/png')
import { CreateImg } from 'cross-json-2canvas'
const { createCanvas, registerFont } = require('canvas')
const path = require('path')
const { CreateImg } = require('./../../common/canvas')
function fontFile (name) {
return path.join(__dirname, '../pfennigFont/', name)
}
registerFont(fontFile('Pfennig.ttf'), { family: 'pfennigFont' })
const canvas = createCanvas(canvasJson.width, canvasJson.height)
createCrossCanvas(canvas, canvasJson, 'node')
.draw().then((result) => {
let resultUrl = result.toDataURL('image/png')
})
import { createCrossCanvas } from 'cross-2canvas'
wx.createSelectorQuery()
.select('#myCanvas') // 在 WXML 中填入的 id
.fields({ node: true, size: true })
.exec(async (res) => {
// Canvas 对象
const canvas = res[0].node
const width = res[0].width * (nodeJson.scale || 1)
const height = res[0].height * (nodeJson.scale || 1)
canvas.width = width
canvas.height = height
const result = await new createCrossCanvas(canvas, nodeJson, 'wx').draw()
console.log('result-----', result)
})