背景： 开发页面中的lottie动效只有在在mac的客户端中展示的图片是模糊的。
为什么只有mac有这个问题？
因为mac相比普通屏幕dpr更高。而绘制canvas时候就会模糊可以参考这篇文章。
High DPI Canvas
为什么只有mac客户端有这个问题？
因为客户端web'view的版本很低，不像现在高版本的浏览器会自动处理设备像素比。所以在我们开发环境的浏览器是看不出问题的。
如何在我们开发环境复现这个问题并确认是否是因为低版本造成的呢？
-
通过window.devicePixelRatio去获取设备dpr。
-
设置canvas的绘制图片宽高=原图片%2。得到没有经过dpr处理的图片。
和原图对比，明显下面canvas绘制的图片模糊些
<template>
<div class="mark">
<!-- <Incentive></Incentive> -->
<!-- 通过 img 标签引入图片，以便绘制到 canvas 中 -->
<img src="./assets/images/getReward.png" alt="" width="258" height="107" />
<!-- canvas -->
<canvas width="258" height="107"></canvas>
</div>
</template>
<script lang="ts" setup>
import Incentive from './views/incentive.vue';
function init() {
let canvas = document.querySelector('canvas');
let ctx = canvas?.getContext('2d');
ctx?.drawImage(document.querySelector('img'), 0, 0, 258, 107);
}
window. = init;
</script>
如何解决这个问题？
就需要在绘制canvas的时候把宽高*设备dpr。然后在用css缩小到正常大小:
<template>
<!-- 通过 img 标签引入图片，以便绘制到 canvas 中 -->
<img src="./assets/images/getReward.png" alt="" width="258" height="107" />
<div class="box">
<canvas width="516" height="214"></canvas>
</div>
<!-- canvas -->
</div>
</template>
<script lang="ts" setup>
import Incentive from './views/incentive.vue';
function init() {
let canvas = document.querySelector('canvas');
let ctx = canvas?.getContext('2d');
ctx?.drawImage(document.querySelector('img'), 0, 0, 516, 214);
}
window. = init;
</script>
<style lang="scss">
}
.box {
width: 258px;
height: 107px;
}
</style>
