uni-app中大佬们，我获取不到像素点信息，需要怎么做？

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app中大佬们，我获取不到像素点信息，需要怎么做？
返回数据：

//‍[⁠io.dcloud.canvas.ImageDataImpl⁠]‍
{
"data":
//‍[⁠io.dcloud.uts.Uint8ClampedArray⁠]‍
{},
"height":
//‍[Int]‍
1,
"width":
//‍[Int]‍
1
}

运行代码：

onReady(() => {
  uni.createCanvasContextAsync({
    id: 'canvas',
    component: getCurrentInstance()?.proxy,
    success: (context : CanvasContext) => {
      const canvasContext = context.getContext('2d')!;
      const canvas = canvasContext.canvas;

      // 处理高清屏逻辑  
      const dpr = uni.getDeviceInfo().devicePixelRatio ?? 1;  
      canvas.width = canvas.offsetWidth * dpr;  
      canvas.height = canvas.offsetHeight * dpr;  
      canvasContext.scale(dpr, dpr); // 仅需调用一次，当调用 reset 方法后需要再次 scale  

      const image = context.createImage();  
      image.src = "../../static/img-color-disk.png";  
      image.onload = () => {  
        console.log('image onLoad');  
        canvasContext.drawImage(image, 0, 0, canvas.offsetWidth, canvas.offsetHeight);  

        setTimeout(() => {  
          console.log(canvasContext.getImageData(20, 20, 1, 1))  
        }, 3000)  
      }  
    }  
  })  
})

Harmonyos Next教程
1 回复

在uni-app中，获取屏幕或元素的像素点信息通常涉及获取设备的屏幕宽度、高度以及具体元素的尺寸等信息。以下是一些常用的方法和代码示例，帮助你获取这些信息。

1. 获取设备屏幕宽度和高度

你可以使用uni.getSystemInfoSync或uni.getSystemInfo来获取设备的屏幕信息，包括屏幕的宽度和高度（以像素为单位）。

// 同步获取
const systemInfo = uni.getSystemInfoSync();
console.log('屏幕宽度（px）', systemInfo.screenWidth);
console.log('屏幕高度（px）', systemInfo.screenHeight);

// 异步获取
uni.getSystemInfo({
    success: function (res) {
        console.log('屏幕宽度（px）', res.screenWidth);
        console.log('屏幕高度（px）', res.screenHeight);
    }
});

2. 获取页面或元素的尺寸信息

对于页面或特定元素的尺寸，你可以使用uni.createSelectorQuery来选择元素并获取其尺寸信息。

uni.createSelectorQuery().select('#myElement').boundingClientRect(function(rect){
    console.log('元素宽度（px）', rect.width);
    console.log('元素高度（px）', rect.height);
}).exec();

在上述代码中，#myElement是你想要获取尺寸信息的元素的ID。boundingClientRect方法会返回一个对象，包含元素的布局位置、宽度和高度等信息。

3. 获取窗口大小（视口）

如果你需要获取当前窗口（视口）的大小，可以使用window.innerWidth和window.innerHeight（注意这些属性在H5端有效，小程序端不适用）。

// 仅适用于H5端
console.log('视口宽度（px）', window.innerWidth);
console.log('视口高度（px）', window.innerHeight);

在小程序端，你可以通过监听窗口尺寸变化事件来获取视口大小，但通常不需要手动获取，因为小程序的布局系统已经处理了视口的变化。

总结

以上代码示例展示了如何在uni-app中获取设备屏幕、页面元素以及窗口（视口）的像素点信息。根据你的具体需求，选择合适的方法来获取所需的信息。如果你遇到特定的问题或需要更详细的帮助，请确保提供具体的错误信息和代码上下文，以便进行更准确的诊断和解决。

回到顶部