| 前端JS转图片为base64并压缩、调整尺寸脚本 | 您所在的位置：网站首页 › 前端buffer转图片 › 前端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}; } } |
| CopyRight 2018-2019 实验室设备网 版权所有 |