【javascript】关于前端图片视频转二进制或转base64跨域取网页源码解决方案

前端实现Base64转blob

本内容所有东西均以前端原生代码为主！

跨域取网页源码：

// 获取指定网页源码
function getHtml(url) {
    let sourceCodeTxt = 'url';
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, false);
    xhr.send();
    sourceCodeTxt = xhr.responseText;
    return sourceCodeTxt;
}

取本页网页源码：

// 获取当前页面网页源码
function getThisHtml() {
    return document.documentElement.outerHTML;
}

获取文件名+后缀名：

/**
 * @param {图片地址} imgUrl 
 * @returns 返回文件名
 */
function getFileNameArray(imgUrl) {
    var suffix = imgUrl.substring(imgUrl.lastIndexOf('.'));
    var fileNameIndex = imgUrl.substring(imgUrl.lastIndexOf('/'));
    var fileName = imgUrl.substring(fileNameIndex.length + 1, imgUrl.length - suffix.length);
    return fileName;
}
//获取图片后缀名
/**
 * @param {图片地址} imgUrl 
 * @returns 返回后缀名
 */
function getFileNameArray(imgUrl) {
    var suffix = imgUrl.substring(imgUrl.lastIndexOf('.'));
    return suffix;
}

Base64转二进制BLOB：

//base转二进制
/**
 * 
 * @param {base字符串不含前缀} baseBuf 
 * @param {base字符串长度} len 
 * @returns 返回二进制
 */
function base64toBlob(baseBuf, len) {
    return new Promise((resolve, reject) => {
        var buf = atob(baseBuf);
        var u8arr = new Uint8Array(len);
        while (len--) {
            u8arr[len] = buf.charCodeAt(len);
        }
        resolve(u8arr);
    });
}

图片地址转二进制BLOB：

function imageToBlob(src) {
    return new Promise((resolve, reject) => {
        let img = new Image();
        img.setAttribute('crossOrigin', 'anonymous');
        img.src = src;
        img.onload = () => {
            let canvas = document.createElement("canvas");
            let ctx = canvas.getContext("2d");
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);
            let ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
            let base64 = canvas.toDataURL("image/" + ext);
            let arr = base64.split(',');
            resolve(base64toBlob(arr[1], arr[1].length));
        }
    });
}

图片、视频、文件、地址转二进制BLOB：

function fileToBlob(urls) {
    return new Promise((resolve, reject) => {
        window.URL = window.URL || window.webkitURL;
        var xhr = new XMLHttpRequest();
        xhr.open("GET", urls, true);
        xhr.responseType = "blob";
        xhr.send();
        xhr.onload = function () {
            if (this.status == 200) {
            // 至关重要
                let oFileReader = new FileReader();
                //得到一个blob对象
                var blob = this.response;
                oFileReader.readAsDataURL(blob);
                
                oFileReader.onloadend = function (e) {
                    var baseBuff = e.target.result;
                    let arr = baseBuff.split(',');
                    resolve(base64toBlob(arr[1], arr[1].length));
                }
                
            }
        }
    });
}

图片、视频、文件、地址转Base64【不含后缀】：

function fileToBase64(urls) {
    return new Promise((resolve, reject) => {
        window.URL = window.URL || window.webkitURL;
        var xhr = new XMLHttpRequest();
        xhr.open("GET", urls, true);
        xhr.responseType = "blob";
        xhr.send();
        xhr.onload = function () {
            if (this.status == 200) {
            // 至关重要
                let oFileReader = new FileReader();
                //得到一个blob对象
                var blob = this.response;
                oFileReader.readAsDataURL(blob);
                oFileReader.onloadend = function (e) {
                    var baseBuff = e.target.result;
                    let arr = baseBuff.split(',');
                    resolve(arr[1]);
                }
                
            }
        }
    });
}

图片、视频、文件、地址转Base64【含后缀】：

function fileToBase64Tow(urls) {
    return new Promise((resolve, reject) => {
        window.URL = window.URL || window.webkitURL;
        var xhr = new XMLHttpRequest();
        xhr.open("GET", urls, true);
        xhr.responseType = "blob";
        xhr.send();
        xhr.onload = function () {
            if (this.status == 200) {
            let oFileReader = new FileReader();
                //得到一个blob对象
                var blob = this.response;
                oFileReader.readAsDataURL(blob);
                oFileReader.onloadend = function (e) {
                    var baseBuff = e.target.result;
                    resolve(baseBuff);
                }
                
            }
        }
    });
}

Base64转视频【转载的】：

/**
     * base64 视频base64字符串
     * targetPath  输出视频文件路径带文件名
     * 	 eg:"/Users/mac/Desktop/car.mp4"
     */
    public static void base64ToVideo(String base64, String targetPath) {
        try {
            //base解密
            byte[] videoByte = new sun.misc.BASE64Decoder().decodeBuffer(base64);
            File videoFile = new File(videoFilePath);
            //输入视频文件
            FileOutputStream fos = new FileOutputStream(videoFile);
            fos.write(videoByte, 0, videoByte.length);
            fos.flush();
            fos.close();
        } catch (IOException e) {
            System.out.println("base64转换为视频异常");
        }
    }