- 【小程序】鸿蒙系统image组件mode=widthFix, 图片变形
系统: 华为nova8 pro 鸿蒙系统2.0.0 这是正常的 [图片] 不正常是高度出现拉伸
2022-05-09 - 荣耀9x 使用wxml-to-canvas 1.0.1 生成的图片变形
荣耀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, } }
2021-04-06