uni-app web-view 截屏失败

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

uni-app web-view 截屏失败

开发环境 版本号 项目创建方式
Windows win HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.29

手机系统：Android

手机系统版本号：Android 13

手机厂商：小米

手机机型：note 9 Pro

页面类型：vue

vue版本：vue2

打包方式：云端

操作步骤： 访问/hybrid/html/index.html?

+++++++++++++++++++++++++++++++++++++++++
```html
<view class="" v-if="srcUrl">
<web-view :src="srcUrl"></web-view>
</view>

+++++++++++++++++++++++++++++++++++++++++

var dom = document.getElementById("#app");
html2canvas(dom, {
allowTaint: true,
useCORS: true,
logging: true
}).then((canvas) => {
console.log('canvas=>', canvas)
if (canvas) {
const capture = canvas.toDataURL("image/png");

预期结果： toDataURL方法能够正常执行

实际结果：

addhtml() {
let that = this;
that.show6 = false
// let base64 = screenshot();
// console.log('base64=>', base64)
console.log('11111111111111111111111111')
var dom = document.getElementById("#app");
html2canvas(dom, {
allowTaint: true,
useCORS: true,
logging: true
}).then((canvas) => {
document.body.appendChild(canvas);
console.log('canvas=>', canvas)
if (canvas) {
const capture = canvas.toDataURL("image/png");
const base64 = capture.replace(/^data:image\/\w+;base64,/, '');
const binaryString = window.atob(base64);
const len = binaryString.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; i++) {
bytes[i] = binaryString.charCodeAt(i);
}
const blob = new Blob([
bytes
], {
type: 'image/png'
});
}
})
},

Harmonyos Next教程
2 回复

uniapp 安卓App 视频路径是rtmp路径 video层级太高 我用cover-view和cover-image解决 但是背景图和有些定位元素不支持 自定义弹出框不显示 气的我用原生html加css 用uniapp web-view 去访问本地html 又加截图我原生插件html2canvas但是在手机在访问本地网页canvas.toDataURL方法不支持 只能在uniapp 里使用 我都服了uniapp


在处理 uni-app 中 web-view 组件截屏失败的问题时，首先需要了解 web-view 截屏的复杂性。由于 web-view 加载的是外部网页内容，直接截屏这部分内容涉及到跨域、安全策略以及平台差异等多个方面。在 uni-app 官方文档中，并没有直接提供 web-view 截屏的API，因此我们需要通过一些变通的方法来实现。

以下是一个基于 canvas 和 uni-app 提供的基础API尝试截屏 web-view 的思路，请注意，这种方法可能受到平台限制和安全策略的影响，不一定在所有情况下都能成功。

思路概述

  1. 尝试将 web-view 内容渲染到 canvas 上：由于 web-view 的内容无法直接访问，我们需要考虑其他方式将内容“导出”到可截屏的上下文中。这通常不可行，因为 web-view 的内容隔离于应用的其他部分。

  2. 使用平台特定的API：比如在小程序平台上，可能会提供一些特定的API来访问或操作 web-view 的内容，但这些API通常也是受限的。

  3. 服务器端截屏：一种可行的解决方案是将 web-view 的URL发送到服务器，由服务器渲染页面并生成截屏，然后返回给客户端。这种方法需要服务器端支持，并且会增加延迟和带宽消耗。

示例代码（服务器端截屏思路）

虽然无法在客户端直接给出代码实现，但以下是一个服务器端截屏的伪代码示例，假设使用Node.js和Puppeteer库：

const express = require('express');
const puppeteer = require('puppeteer');
const app = express();

app.post('/screenshot', async (req, res) => {
    const url = req.body.url;
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(url);
    const screenshot = await page.screenshot();
    await browser.close();
    res.type('image/png').send(screenshot);
});

app.listen(3000, () => {
    console.log('Screenshot server running on port 3000');
});

客户端代码（uni-app）可以发送HTTP POST请求到上述服务器，带上 web-view 的URL，然后接收返回的截屏图片。

结论

由于 uni-app 的限制，直接在客户端截屏 web-view 内容非常困难。考虑使用服务器端截屏作为替代方案，虽然这增加了实现的复杂性，但提供了更高的灵活性和兼容性。在实际应用中，需要根据具体需求和平台限制选择合适的方法。

回到顶部