js base64和图片相互转换

图片转base64（此转换需借助canvas）


<video id="video" src="src" controls="controls" x5-playsinline="" playsinline="" webkit-playsinline preload="auto"></video>var video = document.getElementById("video"); // 获取视频文件
var canvas = document.createElement("canvas"); // 创建一个canvas元素var scale = 1; // 缩放倍数
canvas.width = video.videoWidth * scale; // 生成canvas的宽度
canvas.height = video.videoHeight * scale; // 生成canvas的高度
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); //video转canvas,var img = document.createElement("img"); // 创建img元素
img.src = canvas.toDataURL("image/png"); // 截取视频第一帧// 此时img.src就是需要的base64，可以直接放在图片的src中使用

base64转图片（使用到blob）

let file = img.src; // 把整个base64给file
let name = filename + ".png"; // 定义文件名字（例如：cober.png）
var type = "image/png"; // 定义图片类型（canvas转的图片一般都是png，也可以指定其他类型）
let conversions = base64ToBlob(file, type); // 调用base64转图片方法// conversions 就是转化之后的图片文件，function base64ToBlob(urlData, type) {let arr = urlData.split(',');let mime = arr[0].match(/:(.*?);/)[1] || type;// 去掉url的头，并转化为bytelet bytes = window.atob(arr[1]);// 处理异常,将ascii码小于0的转换为大于0let ab = new ArrayBuffer(bytes.length);// 生成视图（直接针对内存）：8位无符号整数，长度1个字节let ia = new Uint8Array(ab);for (let i = 0; i < bytes.length; i++) {ia[i] = bytes.charCodeAt(i);}return new Blob([ab], {type: mime});
},

阿里云上传图片

var params = "请求accesskeyid和签名等需要带的数据";
fetchGetMiYao(url).then( res=>{var ossData = new FormData(); // 新建一个formData对象ossData.append("OSSAccessKeyId", res.accessid );ossData.append("policy", res.policy );ossData.append("Signature", res.signature );ossData.append("key", "上传到oss上的目录拼接文件名" ); // 例如 "key", "/race/3018192/cover.png"ossData.append("callback", res.callback ); // 回调地址，可加可不加ossData.append("success_action_status", 200 ); // 自定义上传成功后返回的状态码ossData.append("file", conversions ); // 这是上文中base64转化后的图片文件，append到formData里就可以上传了转化的 // 想要做上传进度条的话，可以用此方法，当然也有别的方法可以实现 此函数为回调函数，在博客的另一篇里详细讲述vue.cli框架中怎么做上传进度条function up_process(event ){/ console.log(event);// this.jindu = Math.floor( event.loaded/event.total * 100 )}// ossUpload为项目封装的某个请求接口ossUpload(ossData,up_process).then((res)=>{console.dir(res)}).catch( error=>{console.dir(error);})

这里重点说明了base64怎么转图片，阿里云上传在另外文章中有详细讲解

js base64和图片相互转换相关推荐

js base64编码格式图片另存为下载
注:从别的博客找的,代码可运行.我已找不到出处了,见谅. <!DOCTYPE html> <html lang="zh-CN"> <head>& ...
前端 base64与图片相互转换
base64转图片如下图:(后端返回的数据) <img :src="baseImg" >let baseImg = "" this.baseImg ...
前端JS base64转图片
这个需求看上去很唬人是吧,其实很简单,只需要img标签就可以了接口出参见下图因为我这边的 base64二进制文件流缺失前缀需要在js/ts 简单处理下拼接图片类型data:image/png;ba ...
JS -- base64实现图片下载功能
思路前端拿到处理好的 base64 数据,创建 a 下载图片代码: const base64String = 'data:image/png;base64,iVBORw0KGgoAAAANSUhE ...
js base64转图片
后台给的数据带有data:image/jpg;base64, getBase64(base64) {var changebase64 = base64.replace(/[\r\n]/g, " ...
【JS】前端base64转图片File对象
码 base64ToFile.js /** * base64转图片File * @param {String} base64 图片base64 * @param {String} fileName 图 ...
js File文件转换为二进制格式和base64转换为图片
// 图片转换为base64imageToBase64(img) {return new Promise((resolve) => {let reader = new FileReader(); ...
原来浏览器原生支持JS Base64编码解码
原来浏览器原生支持JS Base64编码解码转载来源:https://www.zhangxinxu.com/wordpress/2018/08/js-base64-atob-btoa-encode- ...
jquery实现截取pc图片_Cropper.js 实现裁剪图片并上传(PC端)
由于之前做项目的时候有需求是需要实现裁剪图片来做头像并上传到服务器,所以上网查询了很多资料,也试用了许多案例,发现cropper插件裁剪是比较完善的,所以结合之前的使用情况,编写了此案例.本案例是参考 ...

js base64和图片相互转换

js base64和图片相互转换相关推荐

最新文章

热门文章

js base64和图片 相互转换

js base64和图片 相互转换相关推荐

最新文章

热门文章

js base64和图片相互转换

js base64和图片相互转换相关推荐