收藏
回答

荣耀9x 使用wxml-to-canvas 1.0.1 生成的图片变形

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 微信安卓客户端 8.0 2.16

荣耀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="bgsrc="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="qrsrc="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-07
回答关注问题邀请回答
收藏
登录 后发表内容
问题标签