荣耀9x 使用wxml-to-canvas 1.0.1 生成的图片, 然后保存到本地,变形了
// 导入图片
const {wxml, style} = require('./demo.js')
Page({
data: {
src: ''
},
onLoad() {
this.widget = this.selectComponent('.widget')
},
renderToCanvas() {
const p1 = this.widget.renderToCanvas({ wxml, style })
p1.then((res) => {
this.container = res
this.extraImage()
})
},
extraImage() {
const p2 = this.widget.canvasToTempFilePath()
p2.then(res => {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath
success(res) { }
})
})
}
})
// wxml-to-ccanvas 模板
export const getWxml = `
<view class="container">
<image class="bg" src="https://muc0901.oss-cn-shenzhen.aliyuncs.com/common/wxmini/mt_share_bg.png"></image>
<image class="avatar" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3582589792,4046843010&fm=26&gp=0.jpg"></image>
<image class="qr" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3582589792,4046843010&fm=26&gp=0.jpg" ></image>
</view>
`
export const style = {
container: {
backgroundColor: "red",
width: 562,
height: 1021,
position: "relative"
},
bg: {
width: 562,
height: 1021,
},
avatar: {
width: 125,
height: 125,
borderRadius: 13,
position: "absolute",
left: 36,
bottom: 27
},
qr: {
borderRadius: 66,
position: 'absolute',
right: 41,
bottom: 27,
width: 133,
height: 133,
}
}