前端JS转图片为base64并压缩、调整尺寸脚本

javascript

浏览数:285

2019-1-8

AD:资源代下载服务

片段 1片段 2


image to base64 to blob

////////////////////////////////////////////////////////////////////////////////////////////////
// 名称: base64图片转二进制文件函数
// 作者: 郭椿安   日期:2018-02-12                                                        //
// 用法: var blobImg = baseSrc2Blob($("#imgId").attr('src')); //这个图片的src值必须是base64字符
// fData.set("文件key", blobImg, $("IMG_input").val()); //第三个参数为传送文件名称,如 20158.jpg
////////////////////////////////////////////////////////////////////////////////////////////////

function baseSrc2Blob(img64Str) { //处理图片base64字符,然后调用转换为二进制函数并返回文件

    var block = img64Str.split(";"); // Split the base64 string in data and contentType
    var contentType = block[0].split(":")[1];// In this case "image/gif" //Get the content type
    var realData = block[1].split(",")[1];// In this case "iVBORw0KGg...." //get the real base64 content of the file
    var blob_file = b64toBlob(realData, contentType);// Convert to blob //转成二级制原始文件内容
    return blob_file;
}

function b64toBlob(b64Data, contentType, sliceSize) { //base64转成二进制对象函数
    //来源文档:https://ourcodeworld.com/articles/read/322/how-to-convert-a-base64-image-into-a-image-file-and-upload-it-with-an-asynchronous-form-using-jquery
    contentType = contentType || '';
    sliceSize = sliceSize || 512;

    var byteCharacters = atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    var blob = new Blob(byteArrays, {type: contentType});
    return blob;
}
//////////////////////////////////////////////////////////////
// 名称:压缩图片为base64字符函数
// 使用方法:
// <input type="file" name="pic" onchange="comPrevw(this);">
// <img id="pic-v">
//////////////////////////////////////////////////////////////
function comPrevw(input) {
    var file = input.files[0];  console.info(file);
    if(!/image\/\w+/.test(file.type)){
        alert("只能选择图片文件!");
        return false;
    }
    var quality = 0.5;  //定义默认图片压缩后的质量(0~1)
    if (file.type=="image/gif") { quality = 1;} //gif只保存第一张图片,所以不压缩

    var reader = new FileReader();

    reader.onload = function (e) {
        var base64IMG = reader.result;

        img = new Image();
        img.onload = function () {
            var oWidth = img.width;
            var oHeight = img.height;
            var Size = calcWH(oWidth, oHeight); //调整为合适的尺寸
            //开始进行转换到canvas再压缩操作
            var canvas = document.createElement("canvas");
            canvas.width = Size.width;  //设置画布的宽度
            canvas.height = Size.height;//设置画布的高度
            var ctx = canvas.getContext("2d");
            //ctx.drawImage(图像对象,画点起始Y,画点起始Y,画出宽度,画出高度)//画出宽度和高度决定了你复刻了多少像素,和是画布宽高度是两回事
            ctx.drawImage(img,0,0,Size.width,Size.height);
            //此时我们可以使用canvas.toBlob(function(blob){ //参数blob就已经是二进制文件了 });来把canvas转回二进制文件,但是我们使用提交表单的时候才即使转换的方式。
            var smBase64 = canvas.toDataURL('image/jpeg', quality); //canvas转成新的base64数据,第二个参数为保存质量
            document.getElementById(input.name + '-v').src = smBase64; //赋值压缩后的base64图像
        };
        img.src = base64IMG; //这个可以放在onload后面的
    }
    reader.readAsDataURL(file); //onload函数会在触发的时候才会执行
}
/*竖立形的手机图片压缩到高度为1000px,横幅型的图片压缩到宽度为1024px*/
function calcWH(ow, oh) {
    if (ow<1024 && oh<1000) {
        return {width: ow, height: oh};
    }
    if (ow>oh) { //横幅型 >1024px
        var height = Math.ceil(1024 / ow * oh); //向上取整
        return {width: 1024, height: height};
    }else{  //竖立型或正方形 >1000px
        var width = Math.ceil(1000 / oh * ow);
        return {width: width, height: 1000};
    }
}


imagebb.js

////////////////////////////////////////////////////////////////////////////////////////////////
// 名称: base64图片转二进制文件函数
// 作者: 郭椿安   日期:2018-02-12                                                        //
// 用法: var blobImg = baseSrc2Blob($("#imgId").attr('src')); //这个图片的src值必须是base64字符
// fData.set("文件key", blobImg, $("IMG_input").val()); //第三个参数为传送文件名称,如 20158.jpg
////////////////////////////////////////////////////////////////////////////////////////////////

function baseSrc2Blob(img64Str) { //处理图片base64字符,然后调用转换为二进制函数并返回文件

    var block = img64Str.split(";"); // Split the base64 string in data and contentType
    var contentType = block[0].split(":")[1];// In this case "image/gif" //Get the content type
    var realData = block[1].split(",")[1];// In this case "iVBORw0KGg...." //get the real base64 content of the file
    var blob_file = b64toBlob(realData, contentType);// Convert to blob //转成二级制原始文件内容
    return blob_file;
}

function b64toBlob(b64Data, contentType, sliceSize) { //base64转成二进制对象函数
    //来源文档:https://ourcodeworld.com/articles/read/322/how-to-convert-a-base64-image-into-a-image-file-and-upload-it-with-an-asynchronous-form-using-jquery
    contentType = contentType || '';
    sliceSize = sliceSize || 512;

    var byteCharacters = atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    var blob = new Blob(byteArrays, {type: contentType});
    return blob;
}
//////////////////////////////////////////////////////////////
// 名称:压缩图片为base64字符函数
// 使用方法:
// <input type="file" name="pic" onchange="comPrevw(this);">
// <img id="pic-v">
//////////////////////////////////////////////////////////////
function comPrevw(input) {
    var file = input.files[0];  console.info(file);
    if(!/image\/\w+/.test(file.type)){
        alert("只能选择图片文件!");
        return false;
    }
    var quality = 0.5;  //定义默认图片压缩后的质量(0~1)
    if (file.type=="image/gif") { quality = 1;} //gif只保存第一张图片,所以不压缩

    var reader = new FileReader();

    reader.onload = function (e) {
        var base64IMG = reader.result;

        img = new Image();
        img.onload = function () {
            var oWidth = img.width;
            var oHeight = img.height;
            var Size = calcWH(oWidth, oHeight); //调整为合适的尺寸
            //开始进行转换到canvas再压缩操作
            var canvas = document.createElement("canvas");
            canvas.width = Size.width;  //设置画布的宽度
            canvas.height = Size.height;//设置画布的高度
            var ctx = canvas.getContext("2d");
            //ctx.drawImage(图像对象,画点起始Y,画点起始Y,画出宽度,画出高度)//画出宽度和高度决定了你复刻了多少像素,和是画布宽高度是两回事
            ctx.drawImage(img,0,0,Size.width,Size.height);
            //此时我们可以使用canvas.toBlob(function(blob){ //参数blob就已经是二进制文件了 });来把canvas转回二进制文件,但是我们使用提交表单的时候才即使转换的方式。
            var smBase64 = canvas.toDataURL('image/jpeg', quality); //canvas转成新的base64数据,第二个参数为保存质量
            document.getElementById(input.name + '-v').src = smBase64; //赋值压缩后的base64图像
        };
        img.src = base64IMG; //这个可以放在onload后面的
    }
    reader.readAsDataURL(file); //onload函数会在触发的时候才会执行
}
/*竖立形的手机图片压缩到高度为1000px,横幅型的图片压缩到宽度为1024px*/
function calcWH(ow, oh) {
    if (ow<1024 && oh<1000) {
        return {width: ow, height: oh};
    }
    if (ow>oh) { //横幅型 >1024px
        var height = Math.ceil(1024 / ow * oh); //向上取整
        return {width: 1024, height: height};
    }else{  //竖立型或正方形 >1000px
        var width = Math.ceil(1000 / oh * ow);
        return {width: width, height: 1000};
    }
}