uni-app 能否实现屏幕截图功能 点击按钮截取屏幕中的某块区域

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

uni-app 能否实现屏幕截图功能 点击按钮截取屏幕中的某块区域

Image

Harmonyos Next教程
5 回复

可以试一下canvas


谢谢，看到了这个new plus.nativeObj.Bitmap(‘test’); 应该可以

回复 新生代吗喽: plusAPI截图应该是截取当前webview的，貌似没有办法截取其中一部分的。

贴一下源码吧，还是不能截取某块区域，设置clip也无效，望大神指点

captureWebview() { // #ifdef APP-PLUS const ws = this.$mp.page.$getAppWebview(); // 这一步很重要，刚还是一直使用plus.webview.currentWebview()获取当前屏幕，一直白屏，看到这里 // (https://uniapp.dcloud.io/api/window/window?id=getappwebview) 才明白过来 const bitmap = new plus.nativeObj.Bitmap(Date.parse(new Date())); const fileName = Date.parse(new Date()); // 将webview内容绘制到Bitmap对象中 ws.draw( bitmap, function() { bitmap.save( ‘_doc/poster’ + fileName + ‘.’ + ‘jpg’, { overwrite: false, format: ‘jpg’, quality: 50}, function(i) { uni.saveImageToPhotosAlbum({ filePath: i.target, success: function() { uni.showToast({ title: ‘图片保存成功’, icon: ‘none’ }); } }); }, function(e) { bitmap.clear(); errorCB({ error: ‘图片保存失败’, details: e }); } ); }, function(e) { console.log(‘截屏绘制图片失败：’ + JSON.stringify(e)); }, { check: true, // 设置为检测白屏 clip: { top:‘50px’,left:‘0px’,width:‘100%’,height:‘100%’ } // 设置截屏区域 } ); // #endif }

当然可以，uni-app 提供了丰富的 API，可以用来实现屏幕截图功能。虽然 uni-app 没有直接提供截取屏幕特定区域的 API，但你可以通过截取全屏图像，然后裁剪所需区域来实现这一功能。以下是一个示例代码，展示了如何实现点击按钮截取屏幕中某块区域的功能。

首先，确保你已经在项目中引入了必要的模块，比如 canvas，因为我们将使用 canvas 来处理图像裁剪。

步骤 1: 创建一个 canvas 元素

在你的页面的 .vue 文件中，添加一个 canvas 元素，用于绘制和裁剪图像。

<template>
  <view>
    <button @click="captureScreen">Capture Screen Area</button>
    <canvas canvas-id="myCanvas" style="width: 0; height: 0;"></canvas>
    <image :src="croppedImage" v-if="croppedImage" style="width: 300px; height: 300px;"></image>
  </view>
</template>

步骤 2: 实现截图和裁剪功能

在脚本部分，实现截图和裁剪的逻辑。

<script>
export default {
  data() {
    return {
      croppedImage: ''
    };
  },
  methods: {
    captureScreen() {
      const ctx = uni.createCanvasContext('myCanvas');
      
      // 假设我们要截取屏幕中心 300x300 的区域
      const x = (uni.getSystemInfoSync().windowWidth - 300) / 2;
      const y = (uni.getSystemInfoSync().windowHeight - 300) / 2;
      const width = 300;
      const height = 300;
      
      // 先绘制全屏截图到 canvas，然后裁剪所需区域
      uni.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: uni.getSystemInfoSync().windowWidth,
        height: uni.getSystemInfoSync().windowHeight,
        destWidth: uni.getSystemInfoSync().windowWidth,
        destHeight: uni.getSystemInfoSync().windowHeight,
        success: res => {
          ctx.drawImage(res.tempFilePath, x, y, width, height, 0, 0, width, height);
          ctx.draw(false, () => {
            uni.canvasToTempFilePath({
              canvasId: 'myCanvas',
              destWidth: width,
              destHeight: height,
              success: canvasRes => {
                this.croppedImage = canvasRes.tempFilePath;
              },
              fail: err => {
                console.error('Failed to crop image:', err);
              }
            });
          });
        },
        fail: err => {
          console.error('Failed to capture screen:', err);
        }
      });
    }
  }
};
</script>

说明

  1. uni.canvasToTempFilePath 用于截取全屏图像。
  2. uni.createCanvasContext 创建一个 canvas 上下文，用于绘制图像。
  3. ctx.drawImage 方法将全屏图像的一部分绘制到 canvas 上。
  4. 再次调用 uni.canvasToTempFilePath，将 canvas 上的图像导出为临时文件路径。

这样，你就可以通过点击按钮截取屏幕中的某块区域，并在页面上显示裁剪后的图像了。

回到顶部