前端JS轉圖片為base64並壓縮、調整尺寸腳本

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};
	}
}