前端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};
}
}
前端JS转图片为base64并压缩、调整尺寸脚本的更多相关文章
- 使用HTML5的两个api,前端js完成图片压缩
主要用了两个html5的 API,一个file,一个canvas,压缩主要使用cnavas做的,file是读取文件,之后把压缩好的照片放入内存,最后内存转入表单下img.src,随着表单提交. 照片是 ...
- 前端JS利用canvas的drawImage()对图片进行压缩
对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 1.由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致 ...
- vue2.X + HTML5 plus 拍照和调用设备相册 另附 图片转base64和压缩图片方法
HTML5 部分 <button @click="tesCamera()" type="button" :disabled="isshStatu ...
- js,JQ 图片转换base64 base64转换为file对象,blob对象
//将图片转换为Base64 function getImgToBase64(url,callback){ var canvas = document.createElement('canvas'), ...
- js将图片转为base64编码,以字符串传到后台存入数据库
(前台在中approve_edit.html中,后台不变) 链接参考:http://www.cnblogs.com/Strom-HYL/p/6782176.html 该链接文中并没有用到easyUI的 ...
- 使用JS将图片转为Base64
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js 选择图片生成base64数据
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...
- JS 获取图片的base64编码
获取图片的base64编码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- js图片转base64并压缩
/* 2015-09-28 上传图片*/ function convertImgToBase64(url, callback, outputFormat){ var canvas = document ...
随机推荐
- mediawiki登录时第一次会跳回登录页面,第二次才能登录成功
原因是:LocalSetting.php中的$wgServer属性使用的是ip,改为域名后成功解决问题 补充:改为域名后使用ip访问会出现第一次登录跳回登录界面的情况,应该根据实际情况来设置$wgSe ...
- poj3254(状压dp入门第一道题,很详细)
题目链接:http://poj.org/problem?id=3254 学习博客:https://blog.csdn.net/harrypoirot/article/details/23163485 ...
- 牛客网练习赛26B(简单的dp)
题目链接:https://www.nowcoder.com/acm/contest/180/B 链接:https://www.nowcoder.com/acm/contest/180/B来源:牛客网 ...
- python3+Appium自动化08-数据配置yaml
yaml简介 yaml是一种简洁的非标记语言.yaml以数据为中心,使用空白,缩进,分行组织数据,从而使得表示更加简洁易读 由于实现简单,解析成本低,yaml特别适合在脚本语言中使用.现有的语言实现: ...
- python3+Appium自动化01-Appium环境搭建
环境依赖 Node.js Appium Appium-desktop Appium-doctor Appium-Python-Client Python JDK Android SDK 安装Node. ...
- (转)Bash Shell常用快捷键
Bash Shell常用快捷键 原文:https://github.com/hokein/Wiki/wiki/Bash-Shell%E5%B8%B8%E7%94%A8%E5%BF%AB%E6%8D%B ...
- eclipse调试(转)
step into : 单步执行,遇到子函数就进入并且继续单步执行(F5) step over: 在单步执行时,在函数内遇到子函数时不会进入子函数内单步执行,而是将子函数整个执行完在停止,也就是把子函 ...
- linux 跳过登陆修改用户密码
2017-02-11 20:41 6人阅读 评论(0) 收藏 编辑 删除 分类: Linux 版权声明:本文为博主原创文章,未经博主允许不得转载. Linux 系统默认的是有0 1 2 3 ...
- Java图形界面开发—简易登录注册小程序
登录注册小代码,将学过的一些小知识融合在一起进行了使用,加深印象.本例中如果有注释不详细的地方,详见其它博客. Java程序操作数据库SQLserver详解 功能介绍:简单的登录注册系统,使用了数据库 ...
- COGS 11. 运输问题1
★★☆ 输入文件:maxflowa.in 输出文件:maxflowa.out 简单对比时间限制:1 s 内存限制:128 MB [问题描述] 一个工厂每天生产若干商品,需运输到 ...