HarmonyOS 鸿蒙Next如何长按下载webview中的图片

发布于 1周前 作者 h691938207 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next如何长按下载webview中的图片

我的代码如下，长按弹出提示框。但是得到一个base64编码的数据后，如何写入相册中？

Web({ src: '', controller: this.webviewController })
  .onContextMenuShow((event) => {
    if (event) {
      let mediaType = event.param.getMediaType()
      let hitValue = this.webviewController.getHitTestValue()
      let imgBase64 = hitValue.extra
      //长按的是图片，且图片是base64的，因getSourceUrl没取到，用extra取到了
      if (mediaType === ContextMenuMediaType.Image && imgBase64.startsWith("data:image")) {
        let dialogData: AlertDialogParamWithOptions = {
          message: $r('app.string.text_tips_title'),
          buttons: [{
            value: $r('app.string.tips_save_pic'),
            action: () => {

            }
          }],
          buttonDirection: DialogButtonDirection.VERTICAL
        }
        AlertDialog.show(dialogData)
      }
    }
    return false
  })

更多关于HarmonyOS 鸿蒙Next如何长按下载webview中的图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

可以参考如下方法：

async saveBase64Image(base64Str:string) {

   try {
     const context = getContext(this);
     let helper = photoAccessHelper.getPhotoAccessHelper(context);
     let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'png')
     let imageStr = base64Str.split(',')[1];
     //打开文件
     let file = fs.openSync(uri, fs.OpenMode.READ_WRITE);
     //base64字符串转成buffer
     const decodeBuffer = buffer.from(imageStr, 'base64').buffer;
     //写入文件
     fs.writeSync(file.fd, decodeBuffer);
     //关闭文件
     fs.closeSync(file);
    
     } catch (e) {
     console.error(e);
   }
 }

更多关于HarmonyOS 鸿蒙Next如何长按下载webview中的图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS 鸿蒙Next系统中，长按下载webview中的图片通常涉及到自定义WebView的行为处理。以下是一个直接的方法来实现这一功能：

  1. 拦截长按事件：首先，需要自定义WebView组件，并重写其onLongPress方法（或类似的事件监听方法，具体名称可能因版本而异），以便在webview中捕获长按事件。

  2. 获取图片URL：在长按事件中，通过WebView的API获取当前触摸位置的元素信息，特别是图片元素的URL。这通常涉及到JavaScript的注入和执行，以获取当前触摸点的<img>标签的src属性。

  3. 下载图片：一旦获取到图片的URL，就可以利用HarmonyOS提供的网络请求API（如HttpURLConnection或HttpClient，鸿蒙特有API）来下载图片，并保存到设备的存储中。

  4. 提示用户：下载完成后，可以通过Toast或其他UI组件提示用户图片已下载，并可以选择显示下载路径。

注意，上述步骤中的具体API和方法调用可能随HarmonyOS的版本有所不同。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部