Uniapp实战：高效解码与渲染Base64图片的完整方案

最近在开发一个需要实时展示动态二维码的Uniapp项目时，遇到了一个典型场景：后端接口返回的不是传统的图片URL，而是一串长长的Base64编码字符串。这让我不得不重新思考前端图片渲染的流程。对于需要即时反馈的应用——比如实时更新的签到码、动态生成的优惠券、或者在线会议的入会凭证——等待服务器生成图片文件并返回链接，往往意味着额外的延迟和服务器负载。Base64直接嵌入数据流，看似简单，但在Uniapp的多端环境中（尤其是小程序平台），如何高效、稳定地将其转化为可视化的图片，却藏着不少门道。

这篇文章，就是把我趟过的坑、试过的方案和最终沉淀下来的最佳实践，系统地梳理给你。无论你是需要在Canvas上绘制复杂的动态图形，还是简单地在<image>标签中展示，抑或是处理大量图片时的性能优化，我都会结合具体代码和原理，带你彻底掌握Base64在Uniapp中的“七十二变”。我们的目标很明确：让数据到视图的转换，既快又稳。

1. 理解Base64：不仅仅是“一串字符”

在深入代码之前，我们有必要先厘清Base64到底是什么，以及为什么后端会选择这种方式返回图片数据。这有助于我们在前端处理时做出更明智的决策。

Base64是一种基于64个可打印字符来表示二进制数据的方法。简单来说，它把二进制的图片数据“翻译”成了由A-Z、a-z、0-9、+、/组成的文本字符串。这样做最大的好处是纯文本化，使得二进制数据可以安全地在只支持文本的协议或环境中传输，比如JSON、XML，或者直接嵌入CSS、HTML的data URL中。

为什么后端偏爱返回Base64？

• 减少请求次数：传统方式需要先请求接口获取图片URL，再发起一次HTTP请求去加载图片。Base64将图片数据内联在接口响应中，一次请求搞定所有，对于实时性要求高、图片体积不大的场景非常合适。
• 避免CDN或存储服务依赖：无需先将图片上传至对象存储或CDN生成URL，简化了后端流程，特别适合临时性、一次性的图片（如验证码、实时生成的图表）。
• 数据一致性：图片作为数据的一部分直接返回，保证了在接口调用瞬间，你拿到的是“此时此刻”的准确图像信息，没有因URL延迟生效导致的数据不一致风险。

当然，它也有明显的缺点：数据体积会膨胀约33%，且不适合处理大图片。因此，这套方案主要适用于小图标、二维码、验证码、小型动态图表等场景。

为了更直观地对比不同渲染方式的适用场景，可以参考下表：

渲染方式	核心原理	优点	缺点	典型应用场景
Canvas绘制	将Base64解码为二进制，通过Canvas API绘制	灵活性强，可进行二次绘制（加水印、合成）；内存控制相对直接	代码稍复杂；在小程序端有Canvas上下文限制	动态二维码、带复杂样式或叠加信息的图形、图表生成
Image组件 (Data URL)	拼接data:image/[格式];base64,前缀后直接赋值给src	使用极其简单，与普通网络图片用法几乎一致	无缓存，每次渲染都需解码；大图有性能压力	简单的静态图标展示、用户头像（小图）、无需二次处理的直接展示
文件系统写入	将Base64解码并写入设备临时文件系统，生成临时路径	生成的路径可被Image组件缓存；一次写入，多次使用	涉及文件IO操作，有异步延迟；需管理临时文件生命周期	需要重复显示或跨页面使用的Base64图片；对渲染性能有要求的列表

提示：选择哪种方式，首要考虑因素是图片的使用频率和是否需要再加工。单次展示用小图，Data URL最省事；需要重复使用或加工，则优先考虑文件系统或Canvas。

2. 基石：Base64字符串的接收与校验

拿到后端返回的数据，第一步不是急着渲染，而是确保数据的完整性和可用性。一个健壮的处理流程从这里开始。

假设我们调用了一个生成二维码的接口：

// 示例接口调用
async function fetchQRCodeData(content) {
  try {
    const res = await uni.request({
      url: 'https://your-api.com/generate-qrcode',
      method: 'POST',
      data: { content: content }
    });
    // 假设成功返回数据结构：{ code: 200, data: { imageBase64: '...' }, message: 'success' }
    if (res.data.code === 200 && res.data.data.imageBase64) {
      return res.data.data.imageBase64; // 返回纯Base64字符串
    } else {
      throw new Error(res.data.message || '未能获取有效的图片数据');
    }
  } catch (error) {
    console.error('获取二维码数据失败:', error);
    uni.showToast({ title: '加载失败', icon: 'none' });
    return null;
  }
}

关键点在于校验。不是所有以“/”或“=”结尾的字符串都是有效的Base64图片数据。我们可以进行初步判断：

function isValidImageBase64(str) {
  // 1. 基础判断：非空字符串
  if (!str || typeof str !== 'string') return false;
  
  // 2. 长度应为4的倍数，且通常包含特定字符集
  if (str.length % 4 !== 0) return false;
  if (!/^[A-Za-z0-9+/]+={0,2}$/.test(str)) return false;
  
  // 3. (可选) 更严格的判断：尝试解码头部，判断是否是图片格式
  // 注意：前端完全解码大字符串验MIME类型可能消耗性能，通常由后端保证。
  // 这里可以简单检查是否包含常见的图片Data URL前缀（如果接口返回了带前缀的完整Data URL）
  // if (str.startsWith('data:image/')) { ... }
  
  return true;
}

// 使用示例
const base64Str = await fetchQRCodeData('https://example.com');
if (base64Str && isValidImageBase64(base64Str)) {
  // 进入下一步渲染流程
  renderImage(base64Str);
} else {
  // 显示占位图或错误提示
  handleRenderError();
}

注意：在实际项目中，数据格式的约定应优先与后端确认。明确返回的是纯Base64字符串还是完整的Data URL（即包含data:image/png;base64,前缀）。前者更灵活，后者可以直接用于Image组件的src。本文主要讨论更常见的纯Base64字符串处理。

3. 方案一：使用Canvas进行动态绘制与高级处理

当你的需求不仅仅是展示，还需要在图片上添加文字、绘制Logo、或者生成复杂的合成图时，Canvas是你的不二之选。Uniapp中的Canvas虽然在不同平台底层实现不同，但API基本保持统一。

3.1 核心步骤与代码实现

以下是一个在Uniapp页面中，将Base64二维码绘制到Canvas上，并添加底部文字的完整示例：

1. 模板部分：在vue文件中放置Canvas组件。

   <template>
     <view class="container">
       <!-- 用于绘制的Canvas，记得设置canvas-id -->
       <canvas canvas-id="myQrCanvas" id="myQrCanvas" :style="{width: canvasWidth + 'px', height: canvasHeight + 'px'}"></canvas>
       <!-- 一个用于最终展示的Image组件，将从Canvas导出图片 -->
       <image v-if="finalImagePath" :src="finalImagePath" mode="widthFix" :style="{width: '300px', marginTop: '20px'}"></image>
     </view>
   </template>
   

2. 脚本部分：实现绘制逻辑。

   export default {
     data() {
       return {
         canvasWidth: 300,
         canvasHeight: 350, // 比二维码高度多50px用于文字
         finalImagePath: ''
       };
     },
     onLoad() {
       this.generateQRCodeWithCanvas();
     },
     methods: {
       async generateQRCodeWithCanvas() {
         // 1. 获取Base64数据
         const base64Data = await this.fetchQRCodeData('订单号：123456');
         if (!base64Data) return;
   
         // 2. 创建Canvas上下文
         const ctx = uni.createCanvasContext('myQrCanvas', this); // 第二个参数传入组件实例，在Vue3组合式API中可能需要调整
   
         // 3. 绘制Base64图片到Canvas
         // 关键：这里需要将纯Base64字符串转换为Canvas能识别的图片资源
         return new Promise((resolve, reject) => {
           // uni-app 中，可以通过`uni.getImageInfo`或直接绘制Base64 Data URL
           const tempFilePath = `data:image/png;base64,${base64Data}`;
           
           // 先绘制二维码图片
           ctx.drawImage(tempFilePath, 0, 0, this.canvasWidth, this.canvasWidth); // 二维码是正方形
   
           // 4. 在二维码下方添加自定义文字
           ctx.setFontSize(16);
           ctx.setFillStyle('#333333');
           ctx.setTextAlign('center');
           // 计算文字位置：y坐标从二维码底部开始偏移
           ctx.fillText('请出示此二维码核销', this.canvasWidth / 2, this.canvasWidth + 30);
   
           // 5. 执行绘制
           ctx.draw(false, () => { // draw(false) 表示延迟绘制，等待draw回调
             // 6. 将Canvas内容导出为临时图片路径，供Image组件显示或保存
             uni.canvasToTempFilePath({
               canvasId: 'myQrCanvas',
               success: (res) => {
                 this.finalImagePath = res.tempFilePath;
                 console.log('Canvas导出成功，路径:', res.tempFilePath);
                 resolve(res.tempFilePath);
               },
               fail: (err) => {
                 console.error('Canvas导出失败:', err);
                 reject(err);
               }
             }, this); // 注意这里的this上下文
           });
         });
       },
       // ... fetchQRCodeData 方法同上 ...
     }
   };
   

   注意：小程序平台对Canvas的drawImage方法支持直接传入data URL（即data:image/...格式），但为了更好的兼容性和性能，对于复杂或多次绘制，可以考虑先将Base64通过uni.getFileSystemManager().writeFile写入临时文件，再使用文件路径绘制。

3.2 性能优化与避坑指南

直接在小程序的Canvas上频繁绘制Base64大图可能导致卡顿。这里有几个实战技巧：

• 离屏Canvas：对于复杂的、需要多次重绘的图形，可以先用一个隐藏的Canvas（离屏Canvas）完成所有绘制操作，最后再将这个离屏Canvas的内容一次性绘制到显示用的Canvas上。不过Uniapp中需要手动管理多个Canvas实例。
• 图片预加载：如果Base64图片需要被多次绘制，可以先用uni.getImageInfo将其转换为图片对象，缓存起来，避免每次都解码Base64字符串。

  let cachedImage = null;
  async function getImageFromBase64(base64) {
    if (cachedImage) return cachedImage;
    return new Promise((resolve) => {
      const src = `data:image/png;base64,${base64}`;
      // 注意：uni.getImageInfo 在小程序端支持本地路径和网络URL，部分平台也支持data URL，但存在平台差异，需测试。
      // 更通用的方法是先写入临时文件。
      uni.getImageInfo({
        src: src,
        success: (res) => {
          cachedImage = res.path; // 缓存路径
          resolve(res.path);
        }
      });
    });
  }
  

• 清理资源：Canvas是占用内存的大户。在页面卸载（onUnload）时，如果不再需要，可以尝试销毁Canvas上下文。虽然Uniapp没有直接销毁的API，但可以将Canvas组件的宽高设为0，并移除相关数据引用，辅助垃圾回收。

4. 方案二：直接渲染为Image组件源

对于简单的展示需求，将Base64转换为Data URL直接赋值给<image>组件的src属性，无疑是最快捷的方式。这种方法本质上是利用了浏览器和小程序引擎对data:协议的内置支持。

4.1 基础实现与平台差异

实现起来非常简单：

<template>
  <view>
    <image :src="imageSrc" mode="aspectFit" style="width: 200px; height: 200px;"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: ''
    };
  },
  async onLoad() {
    const base64Str = await this.fetchQRCodeData('简单展示');
    if (base64Str) {
      // 关键步骤：拼接Data URL前缀
      // 假设后端返回的是PNG格式的Base64。如果是JPG，则替换为'image/jpeg'
      this.imageSrc = `data:image/png;base64,${base64Str}`;
    }
  },
  methods: {
    // ... fetchQRCodeData 方法 ...
  }
};
</script>

然而，这里有一个至关重要的平台兼容性问题需要警惕：

• Web/H5平台：完全支持，表现良好。
• 微信/支付宝小程序：大部分基础库版本也支持在Image组件的src中直接使用Data URL，这是最方便的地方。但需要注意，小程序中Image组件加载的图片默认有防盗链限制（referrer），而Data URL是内联数据，不受此限制。
• App平台（iOS/Android）：情况稍微复杂。在App端，<image>组件的src属性虽然也支持Base64 Data URL，但存在性能和内存上的潜在问题，尤其是在渲染长字符串或多次渲染时。对于App，更推荐使用下一节的“文件系统写入”方案，以获得更稳定和缓存友好的体验。

4.2 性能考量与缓存策略

直接使用Data URL的最大问题是缺乏缓存机制。每次页面渲染，这段Base64字符串都会被重新解码和渲染，即使图片内容没有变化。对于列表中的重复图片，这会造成不必要的性能损耗。

一个改进策略是，利用浏览器的localStorage或Uniapp的uni.setStorageSync，对转换后的Data URL进行缓存，以图片内容的哈希值（如MD5）为键。但请注意，Base64字符串本身很长，大量存储可能很快达到存储上限。

import md5 from 'js-md5'; // 需要引入md5库

function getCachedImageSrc(base64Str) {
  const cacheKey = 'img_cache_' + md5(base64Str); // 生成唯一缓存键
  const cachedSrc = uni.getStorageSync(cacheKey);
  if (cachedSrc) {
    return cachedSrc; // 返回缓存的Data URL
  } else {
    const newSrc = `data:image/png;base64,${base64Str}`;
    // 注意：Storage有大小限制（通常单条1MB，总10MB），大图慎用。
    if (newSrc.length < 1024 * 512) { // 例如，只缓存小于512KB的图片
      uni.setStorageSync(cacheKey, newSrc);
    }
    return newSrc;
  }
}

5. 方案三：写入文件系统获取临时路径（推荐用于复杂场景）

这是在小程序和App端最稳健、性能表现也往往更好的方案。其核心思路是：将Base64数据解码，并写入设备的临时文件系统，生成一个本地临时文件路径（如wxfile://或http://tmp/），然后将这个路径用于Image组件或Canvas绘制。 这样做的好处是：

1. 享受本地文件缓存：系统或Uniapp框架可能会对本地文件路径进行缓存优化。
2. 一次写入，多次使用：同一个Base64图片只需写入一次，生成的路径可以在当前会话中反复使用。
3. 兼容性最好：生成的临时文件路径是所有平台Image组件和Canvas API都100%支持的标准格式。

5.1 完整实现流程

我们封装一个可复用的工具函数：

// utils/imageUtils.js

/**
 * 将Base64字符串保存为临时图片文件
 * @param {string} base64 - 纯Base64字符串（不包含data:image/前缀）
 * @param {string} fileType - 文件类型，如 'png', 'jpg'
 * @returns {Promise<string>} - 解析后返回临时文件路径
 */
export function base64ToTempPath(base64, fileType = 'png') {
  return new Promise((resolve, reject) => {
    // 生成一个唯一的文件名
    const fileName = `temp_${Date.now()}_${Math.random().toString(36).substr(2)}.${fileType}`;
    // 获取临时目录路径
    const tempFilePath = `${uni.env.USER_DATA_PATH}/${fileName}`; // uni.env.USER_DATA_PATH 是各平台通用临时目录
    
    // 获取文件系统管理器
    const fs = uni.getFileSystemManager();
    
    // 将Base64数据写入文件
    fs.writeFile({
      filePath: tempFilePath,
      data: base64, // 直接传入Base64字符串
      encoding: 'base64', // 关键：指定编码为base64
      success: () => {
        console.log('Base64文件写入成功:', tempFilePath);
        resolve(tempFilePath);
      },
      fail: (err) => {
        console.error('Base64文件写入失败:', err);
        reject(new Error('文件保存失败'));
      }
    });
  });
}

/**
 * 带缓存的Base64转换
 * 避免同一张图片重复写入文件系统
 */
const imageCache = new Map(); // 使用Map做内存缓存
export async function getCachedImagePath(base64, fileType = 'png') {
  // 生成一个简单的缓存键（生产环境建议使用更精确的哈希）
  const cacheKey = `base64_${fileType}_${base64.substr(0, 50)}...`;
  
  if (imageCache.has(cacheKey)) {
    console.log('命中缓存，使用已有路径');
    return imageCache.get(cacheKey);
  }
  
  try {
    const tempPath = await base64ToTempPath(base64, fileType);
    imageCache.set(cacheKey, tempPath);
    // 可选：监听页面卸载或应用进入后台时，清理缓存和临时文件
    return tempPath;
  } catch (error) {
    // 降级方案：如果写入失败，返回Data URL
    console.warn('文件写入失败，降级为Data URL', error);
    return `data:image/${fileType};base64,${base64}`;
  }
}

5.2 在页面中使用

<template>
  <view>
    <image :src="localImagePath" mode="widthFix" v-if="localImagePath" style="width: 300px;"></image>
    <button @click="loadImage">加载并显示Base64图片</button>
  </view>
</template>

<script>
import { getCachedImagePath } from '@/utils/imageUtils.js';

export default {
  data() {
    return {
      localImagePath: ''
    };
  },
  methods: {
    async loadImage() {
      // 模拟获取Base64数据
      const fakeBase64 = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg=='; // 一个1x1像素的红色PNG
      
      try {
        // 使用缓存工具获取临时路径
        const path = await getCachedImagePath(fakeBase64, 'png');
        this.localImagePath = path;
      } catch (error) {
        uni.showToast({ title: '图片加载失败', icon: 'none' });
      }
    }
  }
};
</script>

5.3 临时文件的生命周期管理

临时文件通常会在小程序本次会话结束时被系统清理。但如果你在短时间内生成了大量临时文件，为了更精细地控制，可以手动管理：

// 记录本次会话生成的所有临时文件路径
const createdTempFiles = new Set();

export function base64ToTempPathWithCleanup(base64, fileType) {
  return base64ToTempPath(base64, fileType).then(path => {
    createdTempFiles.add(path);
    return path;
  });
}

// 在合适的时机（如页面onUnload、应用onHide）清理文件
export function cleanupTempFiles() {
  const fs = uni.getFileSystemManager();
  createdTempFiles.forEach(filePath => {
    fs.unlink({
      filePath: filePath,
      fail: (err) => console.warn('删除临时文件失败:', filePath, err)
    });
  });
  createdTempFiles.clear();
}

// 在页面中调用
// onUnload() {
//   cleanupTempFiles();
// }

6. 实战融合：一个实时二维码展示页面的完整案例

让我们把上面的知识融合起来，构建一个接近真实场景的页面：一个实时刷新的活动签到二维码页面，要求每30秒从后端获取新的Base64二维码，并平滑地展示给用户，同时将当前二维码保存到本地相册的功能。

<template>
  <view class="signin-container">
    <!-- 展示区域 -->
    <view class="qrcode-card">
      <canvas v-if="useCanvas" canvas-id="dynamicCanvas" :style="canvasStyle"></canvas>
      <image v-else :src="displayImagePath" mode="widthFix" :style="{width: '300px', height: '300px'}" @load="onImageLoad"></image>
      <text class="tip">二维码每30秒自动更新，请勿截图分享</text>
      <text class="countdown">下次更新：{{ countdown }}秒</text>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button type="primary" @tap="saveToAlbum" :disabled="!displayImagePath">保存到相册</button>
      <button type="default" @tap="toggleRenderMode">切换为{{ useCanvas ? '图片' : 'Canvas' }}渲染</button>
    </view>
  </view>
</template>

<script>
import { base64ToTempPath, cleanupTempFiles } from '@/utils/imageUtils.js';

export default {
  data() {
    return {
      displayImagePath: '', // 用于Image组件显示的路径
      currentBase64: '', // 当前最新的Base64数据
      useCanvas: false, // 渲染模式开关
      countdown: 30,
      timer: null,
      canvasStyle: {
        width: '300px',
        height: '300px',
        display: 'block'
      }
    };
  },
  onLoad() {
    this.fetchAndDisplayQR(); // 初始加载
    this.startAutoRefresh(); // 开启自动刷新
  },
  onUnload() {
    // 清理定时器和临时文件
    clearInterval(this.timer);
    cleanupTempFiles();
  },
  methods: {
    async fetchAndDisplayQR() {
      uni.showLoading({ title: '更新中...', mask: true });
      try {
        // 1. 模拟从网络获取Base64数据
        const newBase64 = await this.mockFetchQRCode();
        this.currentBase64 = newBase64;
        
        // 2. 根据选择的模式渲染
        if (this.useCanvas) {
          await this.renderWithCanvas(newBase64);
        } else {
          await this.renderWithImage(newBase64);
        }
        uni.hideLoading();
      } catch (error) {
        uni.hideLoading();
        uni.showToast({ title: '更新失败', icon: 'error' });
        console.error('更新二维码失败:', error);
      }
    },
    
    async mockFetchQRCode() {
      // 这里替换为真实的API调用
      return new Promise((resolve) => {
        setTimeout(() => {
          // 返回一个模拟的、简单的Base64 PNG数据（实际项目从后端获取）
          const mockBase64 = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
          resolve(mockBase64);
        }, 500);
      });
    },
    
    async renderWithImage(base64) {
      // 采用文件系统方案，获得最佳兼容性和性能
      const tempPath = await base64ToTempPath(base64, 'png');
      this.displayImagePath = tempPath;
    },
    
    async renderWithCanvas(base64) {
      // 使用Canvas绘制，可以添加更多自定义内容
      return new Promise((resolve) => {
        const ctx = uni.createCanvasContext('dynamicCanvas', this);
        const tempFilePath = `data:image/png;base64,${base64}`;
        
        // 清空画布
        ctx.clearRect(0, 0, 300, 300);
        
        // 绘制二维码
        ctx.drawImage(tempFilePath, 50, 50, 200, 200); // 居中绘制
        
        // 绘制一个边框
        ctx.setStrokeStyle('#007AFF');
        ctx.setLineWidth(2);
        ctx.strokeRect(45, 45, 210, 210);
        
        ctx.draw(false, () => {
          // 将Canvas内容导出为图片路径，赋值给displayImagePath用于展示或保存
          uni.canvasToTempFilePath({
            canvasId: 'dynamicCanvas',
            success: (res) => {
              this.displayImagePath = res.tempFilePath;
              resolve();
            },
            fail: (err) => {
              console.error('Canvas导出失败，降级为直接渲染', err);
              this.renderWithImage(base64).then(resolve);
            }
          }, this);
        });
      });
    },
    
    startAutoRefresh() {
      this.timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          this.countdown = 30;
          this.fetchAndDisplayQR();
        }
      }, 1000);
    },
    
    onImageLoad() {
      console.log('图片加载完成');
      // 可以在这里添加加载完成后的动画或逻辑
    },
    
    async saveToAlbum() {
      if (!this.displayImagePath) return;
      
      uni.showLoading({ title: '保存中...' });
      try {
        // 注意：保存到相册需要用户授权
        await uni.saveImageToPhotosAlbum({
          filePath: this.displayImagePath
        });
        uni.hideLoading();
        uni.showToast({ title: '保存成功', icon: 'success' });
      } catch (error) {
        uni.hideLoading();
        if (error.errMsg.includes('auth deny')) {
          // 处理用户拒绝授权的情况
          uni.showModal({
            title: '提示',
            content: '需要您授权保存图片到相册',
            success: (res) => {
              if (res.confirm) {
                uni.openSetting(); // 引导用户打开设置页
              }
            }
          });
        } else {
          uni.showToast({ title: '保存失败', icon: 'none' });
        }
      }
    },
    
    toggleRenderMode() {
      this.useCanvas = !this.useCanvas;
      // 切换模式后，用当前数据重新渲染
      if (this.currentBase64) {
        this.fetchAndDisplayQR();
      }
    }
  }
};
</script>

<style scoped>
.signin-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx;
}
.qrcode-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;
}
.tip, .countdown {
  font-size: 24rpx;
  color: #666;
  margin-top: 20rpx;
}
.countdown {
  color: #007AFF;
  font-weight: bold;
}
.action-buttons {
  display: flex;
  flex-direction: column;
  width: 80%;
}
.action-buttons button {
  margin-bottom: 20rpx;
}
</style>

这个案例集成了自动刷新、双渲染模式切换、文件保存和基本的错误处理。在实际开发中，你还需要根据后端返回的数据格式（如图片类型jpeg/png）、错误状态码以及用户体验细节进行进一步打磨。比如，在更新二维码时，可以加入一个淡入淡出的动画过渡，让切换更加平滑；或者在网络请求失败时，使用指数退避策略进行重试。

处理Base64图片渲染，本质上是在数据格式、平台特性、性能要求和开发效率之间寻找最佳平衡点。从我自己的项目经验来看，对于大多数Uniapp应用，优先采用“写入文件系统获取临时路径”的方案，它在性能、兼容性和缓存方面提供了最好的折中。而Canvas方案，则留给那些需要“画点什么”的创造性场景。