uni-app怎么实现App端内的图片对比滑块效果 uni-app滑动查看前后对比【代码】-uni-app-PHP中文网

uni-app App端图片对比滑块必须用canvas而非view+transform，因iOS对cover-view/transform渲染不一致、无clip-path硬件加速、cover-image不响应touchmove；canvas可稳定裁剪、实时绘制并保持60fps。

uni-app怎么实现app端内的图片对比滑块效果 uni-app滑动查看前后对比【代码】

uni-app App端图片对比滑块为什么用 `canvas` 而不是 `view` + `transform`

App端（尤其是 iOS）对 view 层叠+滑动的渲染一致性差，transform: translateX 在 cover-view 或原生子视图中常失效或卡顿；canvas 是唯一能稳定控制裁剪区域、响应滑动并保持 60fps 的方案。

关键原因：uni-app 的 App 端（Android/iOS）不支持 CSS clip-path 硬件加速，且 cover-image 不响应 touchmove 的实时位置——必须靠 canvas 手动绘制左右图层+动态裁剪。

不能用 scroll-view 模拟：它会触发滚动条、无法精确控制裁剪边界
避免在 onTouchMove 中频繁调用 drawCanvas：会导致 iOS 崩溃，必须节流（建议 requestAnimationFrame 或 16ms 间隔）
Android 上 canvas 绘制需指定 useWebView 为 false（默认值），否则部分机型白屏

`uni.createCanvasContext` 在 App 端的初始化坑点

直接调用 uni.createCanvasContext('myCanvas', this) 在 App 端可能返回空上下文，尤其在 onReady 阶段 canvas 元素尚未挂载完成。

必须等 canvas 组件的 onReady 回调触发后才初始化上下文，不能写在 data 或 created
App 端 canvas 必须设固定宽高（width/height 属性），百分比或 flex 无效
iOS 下若 canvas 宽高超过屏幕尺寸 2 倍，绘制会失真，建议按设备像素比缩放：用 uni.getSystemInfoSync().pixelRatio 计算实际绘图尺寸

示例初始化：

<canvas canvas-id="compareCanvas" style="width: 100%; height: 400px;"></canvas>

onCanvasReady 中执行：

const query = uni.createSelectorQuery().in(this);
query.select('#compareCanvas').fields({ node: true, size: true }, res => {
  const canvas = res.node;
  const ctx = uni.createCanvasContext('compareCanvas', this);
  // 后续绘制逻辑...
});

滑块拖动时如何同步更新左右图裁剪区域

核心是把滑块位置（0–100%）映射为 canvas 上的 x 坐标，再用 ctx.clip() 切出左图区域，重绘右图覆盖剩余部分。

滑块 touchstart 时记录初始 clientX，touchmove 中计算偏移量，再转成 canvas 坐标系（注意 devicePixelRatio 缩放）
左图绘制区域：从 0 到滑块 x 坐标；右图从滑块 x 坐标到 canvas 宽度 —— 二者必须无缝拼接，否则出现 1px 白边
不要每帧清空整个 canvas（ctx.clearRect），而是只重绘变化区域，否则 Android 低端机掉帧严重
滑块本身用 ctx.fillRect 绘制，别用额外 view，否则 iOS 上层遮挡导致触摸穿透失效

裁剪逻辑示意：

// leftImg 和 rightImg 已通过 createImageBitmap 加载
ctx.drawImage(leftImg, 0, 0, sliderX, height, 0, 0, sliderX, height);
ctx.drawImage(rightImg, sliderX, 0, width - sliderX, height, sliderX, 0, width - sliderX, height);

App 端真机调试时图片加载失败的常见原因

App 端 canvas 绘制图片，drawImage 报错 “InvalidStateError” 或静默失败，90% 是路径或跨域问题。

本地图片必须用 uni.getRealPathSync 转成绝对路径（__APP__/static/xxx.png → /data/user/0/xxx/files/__APP__/static/xxx.png）
网络图片需服务端开启 CORS，且 uni.downloadFile 后用临时路径（tempFilePath）传入 createImageBitmap，不能直接传 URL
iOS 上 createImageBitmap 对 GIF/WEBP 支持差，强制转成 PNG 再绘制
Android 某些厂商（如华为 EMUI）限制后台加载图片，务必在 onShow 后再触发图片加载

正确加载流程：

uni.downloadFile({
  url: 'https://xxx.com/before.png',
  success: (res) => {
    if (res.statusCode === 200) {
      const img = uni.createImageBitmap(res.tempFilePath);
      // 后续传给 drawImage
    }
  }
});

App 端图片对比滑块最麻烦的从来不是滑动逻辑，而是三件事：canvas 初始化时机、图片路径转换规则、以及 iOS 上每一帧绘制前都要手动校验 ctx 是否还有效——这个检查很容易被忽略，但一旦失效，后续所有 drawImage 都静默失败。