uniapp canvas宽度超过屏幕宽度如何全屏显示像素不压缩？

最好采用等比率缩小全屏显示，先获取屏幕宽度，然后获取图片的真实宽度和高度，最后根据屏幕宽度与图片宽度算出同比率缩小后的屏幕显示的图片高度，然后居中显示，最后导出的时候 destWidth:和 destHeight设置为图片真实的宽高就行了。示例代码如下：

点击查看代码

在 UniApp 中，如果你希望在屏幕上全屏显示一个宽度超过屏幕宽度的 Canvas，同时保持画布的实际像素不压缩，可以通过以下方法实现。

首先，Canvas 的宽度可以设置为屏幕宽度，保持其比例，这样它在屏幕上看起来是全屏的。与此同时，将 canvas 的实际像素大小设置为你希望的宽度（如 2000 像素），这样在保存图片时就可以保留高分辨率。

通过 CSS 设置 Canvas 的 style 属性来控制它在屏幕上的显示比例，而 canvas 本身的实际尺寸（通过 width 和 height 属性设置）保持不变。

<template>
  <view class="container">
    <canvas canvas-id="myCanvas" style="width: 100%; height: auto;"></canvas>
  </view>
</template>

<script>
export default {
  onReady() {
    this.initCanvas()
  },
  methods: {
    initCanvas() {
      // 获取屏幕宽度
      const systemInfo = uni.getSystemInfoSync()
      const screenWidth = systemInfo.windowWidth

      //...

点击查看剩余70%