需求

现有一个视频播放页面，需要添加一个按钮“抓拍”，点击该按钮可以把视频截图保存到本地。

需求分析

实现该功能的方法有很多，此处按照该项目需求进行。
于是，我立刻想到了nodeJs，因为它可以操作资源管理器，可以操作文件流。

实现代码（NodeJs把base64图片保存在服务器端）

// 以下为node层代码
// 服务器返回结果，base64代码非常长，此处省略
let res = {code: 0,data: 'iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAACdklEQVQ4ja1VS08TURT......',msg: '成功'
}
// 说明：一般情况下base64代码是包含："data:image/png;base64, "的，当时此处接口返回的是没有的const fs = require('fs');let result = {};
let base64Data = res.data; // 因接口直接返回了base64代码部分，所以不需要截取，如果含"data:image/png;base64," 则需要自己做截取处理
if(base64Data){var dataBuffer = new Buffer(base64Data, 'base64');var imgName = sbmc; // 此处为图片名称，该处使用的是设备名称fs.writeFile(imgName + ".jpg", dataBuffer, function(err) {if(err){result = {code: 0,msg: '图片保存成功'};} else{result = {code: 100,msg: '图片保存失败'};}});
}
return this.success(result); // 把保存结果返回给前端页面

经过上面代码，图片确实保存起来了。验证结果如下：

但是忽略了一个问题：nodeJs是运行在服务端的，也就是说，我从其他电脑访问这个页面保存的图片仍然在我的机器上面。
所以需要想一个办法在前端页面中下载图片。

实现代码（把base64图片保存在客户端本地）

// 服务器返回结果，base64代码非常长，此处省略
let res = {code: 0,data: 'iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAACdklEQVQ4ja1VS08TURT......',msg: '成功'
}
// 说明：一般情况下base64代码是包含："data:image/png;base64, "的，当时此处接口返回的是没有的// 视频抓拍
snapShot(){// ... 省略无关代码if(res.data){ // 接口返回的数据部分var blob = slef.base64ToBlob(res.data); // 因接口直接返回了base64代码部分，所以不需要截取，如果含"data:image/png;base64," 则需要自己做截取处理var aLink = document.createElement('a');var evt = document.createEvent("HTMLEvents");var time = self.formatDateTime(new Date());evt.initEvent("click", true, true);aLink.download = sbmc + '-' + time + '.jpg';aLink.href = URL.createObjectURL(blob);aLink.click();} else{console.log('没有base64代码');}
// ... 省略无关代码
},
// base64转blob
base64ToBlob(imgData){/* base64代码包含："data:image/png;base64, "var params = imgData.split(';base64,');var contentType = params [0].split(':')[1];var raw = window.atob(params [1]);*/// base64代码不包含："data:image/png;base64, "var raw = window.atob(imgData);var rawLength = raw.length;var uInt8Array = new Uint8Array(rawLength);for(var i = 0; i < rawLength; ++i) {uInt8Array[i] = raw.charCodeAt(i);}return new Blob([uInt8Array], {type: 'image/jpg'});
},

接口请求成功且返回数据之后，图片会通过浏览自带的下载工具进行下载到本地
验证结果如下图：

本文中涉及base64转blob，javascript自定义事件和出发，需要详细了解，请阅读以下文章：
《Javsscript自定义事件和触发》
《javascript实现blob流、base64，file、base64的互相转换》

把后端传递过来的base64图片保存到本地相关推荐

Base64图片保存到本地，及解决图片无法打开问题
Base64图片保存到本地,及解决图片无法打开问题本demo主要解决两个问题本demo主要解决两个问题图片保存的执行过程中,代码没有报错,但是图片没有生成图片保存到本地了,但是打不开,或者文件 ...
base64图片保存获取本地路径
$path = ROOT_PATH . 'public/uploads/headimg'; $pic = base64_image_content($base64_image,$path); //图片 ...
uni-app小程序，将base64图片保存到本地相册
描述在做项目时,通过填写个人信息,生成一个二维码,现在要求将生成的二维码保存到本地,当点击图片上面的"保存到本地"时,就会将图片保存到本地相册里实现过程下面代码中的picUr ...
【微信小程序】将base64图片保存至本地
需求描述微信小程序中,下载一个报告文件,直接可获取到的是报告图片的base64格式. 参考文章 1.微信小程序实现图片下载功能 2.微信小程序把base64的图片保存到手机相册代码实现 1.wxm ...
python如何将网络上的图片url和base64编码的图片保存在本地
1.python base64编码的图片保存到本地 import os import base64 sss ="""/9j/4AAQSkZJRgABAQEASABIAAD ...
python中if brthon环境安装包_Python实现base64编码的图片保存到本地功能示例
本文实例讲述了Python实现base64编码的图片保存到本地功能.分享给大家供大家参考,具体如下: # -*- coding:utf-8 -*- #!python3 import os import ...
java base64转图片并保存_java将base64解析图片保存到本地。
将base64解析图片保存到本地的两个方法 /** * base64转图片 * @param base64str base64码 * @param savePath 图片路径 * @return */ ...
php完美实现下载远程图片保存到本地（保存微信头像）
2019独角兽企业重金招聘Python工程师标准>>> /** * php完美实现下载远程图片保存到本地 * @param: 文件url,保存文件目录,保存文件名称,使用的下载方式 ...
JAVA 通过url下载图片保存到本地(亲测)
//java 通过url下载图片保存到本地 public static void download(String urlString, int i) throws Exception { ...
android view存储为jpg,Android长按imageview把图片保存到本地的实例代码
工具类之前用 AsyncTask 现在改用rxJava public class SaveImageUtils { public static void imageSave(final ImageV ...

把后端传递过来的base64图片保存到本地

需求

需求分析

实现代码（NodeJs把base64图片保存在服务器端）

实现代码（把base64图片保存在客户端本地）

把后端传递过来的base64图片保存到本地相关推荐

最新文章

热门文章

把后端传递过来的base64图片保存到本地

需求

需求分析

实现代码 （NodeJs把base64图片保存在服务器端）

实现代码 （把base64图片保存在客户端本地）

把后端传递过来的base64图片保存到本地相关推荐

最新文章

热门文章

实现代码（NodeJs把base64图片保存在服务器端）

实现代码（把base64图片保存在客户端本地）