Open yifei8 opened 2 years ago
0.11.0 +
复现步骤: 使用以下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中的图片显示异常
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>
图片显示正常,imgWidht = img.width / (this.endNum) drawImage绘制横向图片1/47区域
图片显示异常,imgWidht = img.width / (this.endNum) drawImage绘制横向图片2/47区域(这是由于onload实际图片被压缩1/2而计算时使用的原图长度)
fix pr参考 https://github.com/openwebf/webf/pull/25
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
Expected results
图片显示正常,imgWidht = img.width / (this.endNum) drawImage绘制横向图片1/47区域
Actual results
图片显示异常,imgWidht = img.width / (this.endNum) drawImage绘制横向图片2/47区域(这是由于onload实际图片被压缩1/2而计算时使用的原图长度)