HarmonyOS web加载沙箱文件失败

HarmonyOS  web加载沙箱文件失败  -鸿蒙开发者社区解决方案

el2要开启fileAccess,参考下述修改:

Web({src: '/data/storage/el2/base/haps/entry/files/unzip2/www/index.html', controller: this.controller})
  .domStorageAccess(true)
  .fileAccess(true)
  .javaScriptAccess(true)
  .mixedMode(MixedMode.All)
  .backgroundColor(Color.Pink)
}

HarmonyOS webview的长屏截图 <a name="section179663411965"></a>

问题描述

web组件下,有没有针对webview的长屏截图,可以截取整个webview的截图

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

可以通过canvas组件实现,代码如下:

const lastH5XOffset = this.curH5XOffset
const lastH5YOffset = this.curH5YOffset;

try {
  // 清空Canvas
  this.canvasCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
  // 滚动至页面起始位置
  this.webviewController.scrollTo(0, 0);
  // 获取H5、Web宽高
  const getRectScript: string = 'h5Width=docEl.offsetWidth;h5Height=docEl.offsetHeight;webWidth=docEl.clientWidth;webHeight=docEl.clientHeight;JSProxy.getH5Rect(h5Width,h5Height);JSProxy.getWebRect(webWidth,webHeight);';
  const runJavaScriptRes = await this.webviewController.runJavaScriptExt(getRectScript);
  console.info(`Invoke webviewController.runJavaScript succeed! runJavaScriptRes, ${JSON.stringify(runJavaScriptRes)}, h5Height: ${this.h5Height}, h5Width: ${this.h5Width}, webWidth: ${this.webWidth}, webHeight: ${this.webHeight}`);
  // 截图会获取最近一帧的绘制内容。如果在组件触发更新的同时调用截图,更新的渲染内容不会被截取到,截图会返回上一帧的绘制内容
  // Web组件滚动界面更新有延时,需要延时执行组件截图
  await sleep(100);
} catch (err) {
  console.error(`Invoke webviewController.getPageHeight/runJavaScript failed! err: ${JSON.stringify(err)}`);
}
// 开始滚动截图
// 计算滚动次数
const scrollTimes = Math.ceil(this.h5Height / this.webHeight);
console.info(`Invoke scrollTimes: ${scrollTimes}`);
// 绘制到离屏Canvas Y轴的偏移量
let curDrawCanvasYOffset: number = 0;
// 绘制比例
const drawScale: number = this.canvasHeight / this.h5Height;

try {
  for (let i = 0; i < scrollTimes; i++) {
    // 滚动页面
    this.webviewController.scrollBy(0, this.webHeight);

    // 获取当前Web组件截图PixelMap
    const curWebSnapShot: image.PixelMap = await componentSnapshot.get(this.webId);

    // 绘制到离屏Canvas上
    if (this.h5Height % this.webHeight !== 0 && i === scrollTimes - 1) {
      // 裁切源图像时距离源图像左上角的y坐标值,单位:px
      const cropY = this.webHeight - (this.h5Height - (this.webHeight * (scrollTimes - 1)));
      // 裁切源图像时需要裁切的宽度,单位:px
      const cropWidth = vp2px(this.webWidth);
      // 裁切源图像时需要裁切的高度,单位:px
      const cropHeight = this.webHeight - cropY;
      // 多余部分进行裁剪绘制到离屏Canvas
      this.offCanvasCtx.drawImage(curWebSnapShot, 0, vp2px(cropY), cropWidth, vp2px(cropHeight), 0, curDrawCanvasYOffset * drawScale, this.canvasWidth, cropHeight * drawScale);


      // 将离屏Canvas转换为ImageBItmap后绘制到Canvas上
      const h5SnapShot: ImageBitmap = this.offCanvasCtx.transferToImageBitmap();
      this.canvasCtx.transferFromImageBitmap(h5SnapShot);
      // 滚动截图结束,显示截图结果
      this.isSnapshotShow = Visibility.Visible;
      // 滚动到截图之前的滚动偏移量
      this.webviewController.scrollTo(lastH5XOffset, lastH5YOffset);
      break;
    }
    // 绘制到离屏Canvas
    this.offCanvasCtx.drawImage(curWebSnapShot, 0, curDrawCanvasYOffset * drawScale, this.canvasWidth, this.webHeight * drawScale);
    // 修改Y轴偏移量
    curDrawCanvasYOffset += this.webHeight;
  }


} catch (err) {
  console.error(`Invoke componentSnashot.get failed! err: ${JSON.stringify(err)}`);
}

https://gitee.com/harmonyos-cases/cases#101web%E9%A1%B5%E9%9D%A2%E9%95%BF%E6%88%AA%E5%9B%BE0419%E6%9B%B4%E6%96%B0

分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS web从本地沙箱加载
45浏览 • 1回复 待解决
HarmonyOS web加载失败
307浏览 • 1回复 待解决
HarmonyOS 预览沙箱路径下的文件失败
59浏览 • 1回复 待解决
HarmonyOS web组件加载url失败
482浏览 • 1回复 待解决
HarmonyOS Web加载http图片失败
34浏览 • 1回复 待解决
HarmonyOS 加载raw文件内容失败
62浏览 • 1回复 待解决
HarmonyOS Web加载HTML格式的文本失败
70浏览 • 1回复 待解决
HarmonyOS Web组件加载html文件异常
542浏览 • 1回复 待解决
web组件对html文件加载
809浏览 • 1回复 待解决
HarmonyOS 沙箱文件拷贝
72浏览 • 1回复 待解决
HarmonyOS webview如何加载沙箱html
470浏览 • 1回复 待解决
HarmonyOS 查看手机沙箱文件
35浏览 • 1回复 待解决
HarmonyOS 沙箱访问获取不到文件
102浏览 • 1回复 待解决