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的头，并转化为byte
    let bytes = window.atob(arr[1]);
    // 处理异常,将ascii码小于0的转换为大于0
    let 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怎么转图片，阿里云上传在另外文章中有详细讲解