VSCode Webview中实现点击下载图片的基本流程

众所周知，在一个普通的HTML页面中，如果要实现一个链接点击后下载图片，只需要在页面上放一个<a>标签，然后将属性href的值指向图片的URL或者Base64字符串就可以了。或者按照stackoverflow上提供的方法动态创建<a>标签来完成图片的下载动作。不过原理都是相同的。

　　但是这个方法在VSCode的Webview中不起作用，点击链接之后没有任何反应。如果图片的地址是一个可以独立访问的绝对地址，例如任何一个互联网上可以访问到的图片地址，则点击链接之后VSCode会将图片在浏览器中打开。我猜想图片下载的功能在VSCode的Webview中可能被限制了。如果要实现图片下载，只能在Server端中转一下，然后通过VSCode内置的Command来完成下载动作。

　　假设我们要下载一个二维码图片，基本流程如下：

  • 客户端将要生成二维码图片的字符串发送到服务器。
  • 服务器用第三方库生成二维码图片（例如node-qrcode），并存放到一个指定的临时目录中。
  • 服务器调用VSCode内置的Command实现二维码图片的下载。

　　服务器中生成二维码图片的代码很简单。下面的qrcodeHelper类用来生成二维码图片并存放到.temp临时目录中：

import * as fs from 'fs-extra';
import * as path from 'path';
import * as qrcode from 'qrcode';
export class qrcodeHelper {
    public static generateImage(s: string): Promise<string> {
        let _path = "/.temp/qrcode.png";
        fs.ensureDirSync(path.dirname(_path));
        return new Promise<string>((resolve, reject) => {
            qrcode.toFile(_path, s, {}, function (err) {
                if (err) reject(err);
                resolve(_path);
            });
        });
    }
}

　　二维码图片生成之后，通过调用VSCode内置的Command来实现图片下载：

let _imagePath = await qrcodeHelper.generateImage("qrcode string here...");
if (_imagePath) {
    await vscode.commands.executeCommand("revealInExplorer", vscode.Uri.file(_imagePath));
    await vscode.commands.executeCommand("explorer.download");
}

　　"revalInExplorer"命令用来在Explorer中选中当前文件，"explorer.download"命令实现文件下载。如果去掉"revalInExplorer"命令，则下载的就是Explorer中当前选中的文件（不一定是二维码图片）。

　　有关如何在VSCode的Webview中实现客户端和服务器端之间的通信，可以参考微软官方示例中的webview-sample和webview-view-sample部分。

到此这篇关于VSCode Webview中如何实现点击下载图片的文章就介绍到这了,更多相关VSCode Webview点击下载图片内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • VsCode之使用WebView通信详解

    之前我在这篇文章VsCode插件开发之插件初步通信 通过插件完成通信,这回我还是通过插件,只不过方式主要以在ts文件里面使用webview来进行通信. 另外在此声明,一定要好好看仔细看官方文档,国内关于VsCode相关的开发,少之又少,虽然有一个叫小茗同学写的相对较全面,但是大家可以仔细看,其实他的内容大多也来自官方,同时有部分也加上自己的理解和想法.个人建议,关于VsCode插件相关的,最好是跑一跑VsCode相关官方例子,这样有助于对VsCode插件开发有一个大致的思路和全局认识,换言之有一

  • VSCode Webview中实现点击下载图片的基本流程

    众所周知,在一个普通的HTML页面中,如果要实现一个链接点击后下载图片,只需要在页面上放一个<a>标签,然后将属性href的值指向图片的URL或者Base64字符串就可以了.或者按照stackoverflow上提供的方法动态创建<a>标签来完成图片的下载动作.不过原理都是相同的. 但是这个方法在VSCode的Webview中不起作用,点击链接之后没有任何反应.如果图片的地址是一个可以独立访问的绝对地址,例如任何一个互联网上可以访问到的图片地址,则点击链接之后VSCode会将图片在浏

  • iOS开发商品页中banner中点击查看图片

    轮翻播放与查看是分开的,轮翻是是用 开源的SDCycleScrollView 这里是给出的是查看的: // // FullScreenShowImageView.swift // joopic // // Created by jianxiong li on 16/9/27. // Copyright © 2016年 joobot. All rights reserved. // import Foundation import UIKit //图片轮播组件代理协议 protocol FullS

  • Android编程实现下载图片及在手机中展示的方法

    Android编程实现下载图片及在手机中展示的方法

    本文实例讲述了Android编程实现下载图片及在手机中展示的方法.分享给大家供大家参考,具体如下: 在项目开发中从互联网上下载图片是经常用到的功能,再次总结一下 1.普通的下载方式 布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android

  • java多线程实现下载图片并压缩

    最近在做一个需求:从其他系统的ftp目录下载存储图片url的文件,然后读取文件中的url地址,根据地址下载图片后按天压缩成一个包,平均一个地址文件中包含4000个地址左右,也就是说一个文件扫描后需要下载4000个左右的图片,然后压缩,下面把我的实现方式和优化过程记录下来,如果大家有什么更好的方式可以分享. 使用框架:SpringMVC 定时任务实现:继承org.springframework.scheduling.quartz.QuartzJobBean; ftp环境搭建就不说了,在其他博客记录

  • C#实现批量下载图片到本地示例代码

    一.概述 批量下载图片是我们在日常开发中经常会遇到的一个需求,这不,最近工作中就需要批量下载图片到本地,先是通过Excel拼接生成了所有链接地址,然后想到的是通过下载软件来批量下载.可是一想到又要花时间去查找.安装.研究软件,不如自己写个来的快. 以下是使用C#开发的控制台程序代码,通过循环读取文本文件中每一行地址字符串,执行下载并保存到本地文件夹中. 下面话不多说了,来一起看看详细的介绍吧 二.C#实例代码 //using System; //using System.Net; //using

  • Django中实现点击图片链接强制直接下载的方法

    本文实例讲述了Django中实现点击图片链接强制直接下载的方法.分享给大家供大家参考.具体分析如下: 当用户点击图片连接时,默认为在浏览器中直接开打图片,这段代码可以让图片链接变成下载 这段代码也非常适合下载大文件,基本不会消耗内存,每次只读取一部分数据到内存,然后提供下载 def Download(request): def readFile(fn, buf_size=262144): f = open(fn, "rb") while True: c = f.read(buf_siz

  • Android 保存WebView中的图片示例

    前言 项目中有需求在APP的Webview中长按图片可以保存.后来就去研究一下该怎么实现,顺便整理了一下. WebView基本配置 mWvContent.getSettings().setJavaScriptEnabled(true); mWvContent.getSettings().setJavaScriptCanOpenWindowsAutomatically(true); mWvContent.getSettings().setDomStorageEnabled(false); mWvC

  • jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)

    本文实例讲述了jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果.分享给大家供大家参考,具体如下: 该插件乃文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实际需求来设置是否添加左右切换图片的效果.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

  • Android WebView中图片浏览及缩放效果

    Android WebView中图片浏览及缩放效果

    本文实例为大家分享了Android WebView图片浏览及缩放效果展示的具体代码,供大家参考,具体内容如下 此工程用到了两个开源库: PhotoView支持图片的缩放 Android-Universal-Image-Loader图片的异步加载 (android studio)将两个源工程中的library文件夹导入到Demo Module所在的Project中,修改各自的build.gradle文件,让里面的版本号.所用的android包等与Demo Module相同即可.大致如图: 源代码:

  • iOS WebView中使用webp格式图片的方法

    webp格式图片 webp格式图片是google推出的,相比jpg png有着巨大的优势,同样质量的图片webp格式的图片占用空间更小,在像电商这样图片比较多的App中,使用webp格式图片会很有优势. 引言 很早之前,我们的项目中就已经采用了webp格式,但是由于webView本身并不能解析webp格式,所以我们基于webView的文章详情页就无法使用到这项优化. 那么有没有什么办法能实现呢?当然是有的. 在开始技术讲解之前需要先说明,本文的技术方案,是基于本项目的情况:文章的正文大部分通过接

随机推荐