openwebf / webf

Build flutter apps with HTML/CSS and JavaScript.
https://openwebf.com/
Apache License 2.0
1.65k stars 118 forks source link

[fix] width/height when naturalWidth unequal real width #37

Open yifei8 opened 2 years ago

yifei8 commented 2 years ago

Affected version

0.11.0 +

No same issues found.

Steps to Reproduce

复现步骤: 使用以下vue demo,图片在较多设备上,如:iQOO5 Android 12 图片资源:https://img.vivo.com.cn/sloth/a/i/d9c260674f5b.png 打印img.dart中BoxFitImage下载的实际imge到宽高<图片的原始宽高 即_onImageLoad中获取的naturalWidth/naturalHeight(32768/227) 小于 _handleImageFrame解析图片的回调图片的实际宽高 (16384/13)

导致的问题: 前端在onload中打印的naturalWidth和width都是一致的(32768),但以下demo中的图片显示异常

Code example

vue demo

<template>
    <canvas ref="canvas" class="sprite"></canvas>
  </div>
</template>

<style>
  .kraken_img {
    margin: 10px 0px;
  }
  .sprite  {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto 100%;
    transform: translateZ(0) scale(1.18);
    height: 2.27rem;
    width: 6.97rem;
  }

</style>

<script>

export default {
  name: 'home',
  data() {
    return {
      canvaswidth: 0,
      canvasheight: 0,
      imgWidht: 0,
      imgHeight: 0,
      gapFlag: false,
      endNum: 47
    }
  },

  mounted() {
    const img = new Image()
    img.src = 'https://img.vivo.com.cn/sloth/a/i/d9c260674f5b.png'

    const canvas = this.$refs.canvas
    const ctx = canvas.getContext('2d')
    const _that = this

    const canvasWidth = canvas.width
    const canvasHeight = canvas.height

    img.onload = () => {
      console.log(img.src);
      console.log('img natural(' + img.naturalWidth + ',' + img.naturalHeight + ')');
      console.log('img (' + img.width + ',' + img.height + ')');
      this.imgWidht = img.width / (this.endNum)
      this.imgHeight = img.height
      ctx.drawImage(img, 0, 0, _that.imgWidht, _that.imgHeight, 0, 0, canvasWidth, canvasHeight)
    }
  }
}
</script>

Expected results

图片显示正常,imgWidht = img.width / (this.endNum) drawImage绘制横向图片1/47区域

Actual results

图片显示异常,imgWidht = img.width / (this.endNum) drawImage绘制横向图片2/47区域(这是由于onload实际图片被压缩1/2而计算时使用的原图长度)

yifei8 commented 2 years ago

fix pr参考 https://github.com/openwebf/webf/pull/25