Bagaimana untuk menangkap sebahagian daripada skrin dalam uniapp

Dengan pembangunan Internet mudah alih, semakin banyak aplikasi perlu melaksanakan fungsi tangkapan skrin untuk meningkatkan pengalaman pengguna. Semasa proses pembangunan, uniapp ialah rangka kerja pembangunan merentas platform yang sangat popular Ia menyediakan pelbagai fungsi dan antara muka yang boleh digunakan untuk melaksanakan pelbagai fungsi, termasuk tangkapan skrin. Artikel ini akan memperkenalkan cara uniapp melaksanakan fungsi tangkapan skrin.

1. Prinsip asas tangkapan skrin dalam uniapp

Dalam uniapp, prinsip tangkapan skrin pada asasnya adalah menggunakan antara muka wx.canvasToTempFilePath yang disediakan oleh applet WeChat untuk menangkap sebahagian atau semua skrin Seterusnya jana laluan fail sementara. Kemudian, paparkan menu operasi atau imej pratonton melalui antara muka showActionSheet atau showModal yang disertakan dengan uniapp. Berikut ialah kod untuk contoh tangkapan skrin ringkas:

export default {
  data() {
    return {
      canvasWidth: 0,
      canvasHeight: 0,
      canvasTop: 0,
      canvasLeft: 0
    }
  },
  methods: {
    getCanvas() {
      const query = uni.createSelectorQuery().in(this)
      query.select('#canvas-container').boundingClientRect(data => {
        uni.canvasToTempFilePath({
          x: data.left,
          y: data.top,
          width: data.width,
          height: data.height,
          destWidth: data.width * 2,
          destHeight: data.height * 2,
          canvasId: 'canvas',
          success: res => {
            uni.showActionSheet({
              itemList: ['预览图片', '保存图片'],
              success: res => {
                if (res.tapIndex == 0) {
                  uni.previewImage({
                    urls: [res.tempFilePath]
                  })
                } else if (res.tapIndex == 1) {
                  uni.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success: () => {
                      uni.showToast({
                        title: '保存成功！'
                      })
                    },
                    fail: () => {
                      uni.showToast({
                        title: '保存失败！'
                      })
                    }
                  })
                }
              }
            })
          },
          fail: res => {
            uni.showToast({
              title: '生成临时文件路径失败！'
            })
          }
        }, this)
      }).exec()
    }
  }
}

Antaranya, mula-mula dapatkan lebar dan ketinggian nod halaman semasa melalui uni.createSelectorQuery().in(this), dan kemudian panggil antara muka uni.canvasToTempFilePath ke Bahagian yang dipintas disimpan dalam bentuk fail sementara. Dalam fungsi panggil balik kejayaan antara muka, gunakan uni.showActionSheet untuk memaparkan menu operasi Pengguna boleh memilih untuk pratonton gambar atau menyimpan gambar ke album tempatan.

Perlu diambil perhatian bahawa untuk melaksanakan fungsi tangkapan skrin, anda perlu menentukan elemen kanvas dalam halaman semasa untuk melukis kandungan yang akan ditangkap. Lebar, tinggi dan kedudukan elemen kanvas perlu dikira secara dinamik untuk menyesuaikan diri dengan saiz dan kedudukan skrin yang berbeza.

2. Langkah-langkah pelaksanaan tangkapan skrin uniapp

Berikut akan memperkenalkan langkah-langkah uniapp untuk melaksanakan tangkapan skrin:

1. Buat elemen kanvas untuk melukis tangkapan skrin kandungan. Tetapkan kedudukan dan saiz elemen kanvas mengikut kedudukan dan saiz yang anda perlukan untuk memintas. Contohnya:

<canvas id="canvas" style="position: absolute; top: {{canvasTop}}px; left: {{canvasLeft}}px; width: {{canvasWidth}}px; height: {{canvasHeight}}px;"></canvas>

2. Sebelum mendapatkan maklumat nod halaman semasa, anda perlu menetapkan kelewatan dalam fungsi kitaran hayat onReady dalam halaman untuk memastikan bahawa dom telah diberikan.

onReady() {
  setTimeout(() => {
    this.getCanvas()
  }, 500)
},

3. Gunakan uni.createSelectorQuery().in(this) untuk mendapatkan maklumat nod halaman semasa, dan kemudian panggil antara muka uni.canvasToTempFilePath untuk menyimpan bahagian yang dipintas dalam bentuk fail sementara.

const query = uni.createSelectorQuery().in(this)
query.select('#canvas-container').boundingClientRect(data => {
  uni.canvasToTempFilePath({
    x: data.left,
    y: data.top,
    width: data.width,
    height: data.height,
    destWidth: data.width * 2,
    destHeight: data.height * 2,
    canvasId: 'canvas',
    success: res => {
      // ...
    },
    fail: res => {
      uni.showToast({
        title: '生成临时文件路径失败！'
      })
    }
  }, this)
}).exec()

4. Dalam fungsi panggil balik kejayaan antara muka uni.canvasToTempFilePath, gunakan uni.showActionSheet untuk memaparkan menu operasi Pengguna boleh memilih untuk pratonton imej atau menyimpan imej ke album tempatan. Contohnya:

uni.showActionSheet({
  itemList: ['预览图片', '保存图片'],
  success: res => {
    if (res.tapIndex == 0) {
      uni.previewImage({
        urls: [res.tempFilePath]
      })
    } else if (res.tapIndex == 1) {
      uni.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: () => {
          uni.showToast({
            title: '保存成功！'
          })
        },
        fail: () => {
          uni.showToast({
            title: '保存失败！'
          })
        }
      })
    }
  }
})

3 Langkah berjaga-jaga untuk tangkapan skrin uniapp

Dalam proses melaksanakan tangkapan skrin, anda perlu memberi perhatian kepada perkara berikut:

Memandangkan uniapp tidak boleh mengendalikan komponen asli secara langsung, apabila memanggil uni.createSelectorQuery().in(this) untuk mendapatkan maklumat nod, kelewatan perlu ditetapkan untuk memastikan dom telah diberikan.
1. Apabila memanggil antara muka uni.canvasToTempFilePath, anda perlu menentukan parameter canvasId untuk menentukan id elemen kanvas yang akan dipintas.
2. Apabila melihat pratonton imej atau menyimpan imej ke album setempat, anda perlu menentukan laluan imej, iaitu laluan fail sementara yang dijana oleh antara muka uni.canvasToTempFilePath. Pada masa yang sama, apabila menyimpan gambar ke album tempatan, anda perlu menetapkan kebenaran writePhotosAlbum dalam manifest.json.

Atas ialah kandungan terperinci Bagaimana untuk menangkap sebahagian daripada skrin dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!