var myCanvas=$('.img-container > img').cropper('getCroppedCanvas');
(function (base64){
var image = new Image(),newBase64,MAX_HEIGHT = 160;
image.onload = function(){
var canvas = document.getElementById("myCanvas");
if(image.height > MAX_HEIGHT) {
image.width *= MAX_HEIGHT / image.height;
image.height = MAX_HEIGHT;
}
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0, image.width, image.height);
newBase64=canvas.toDataURL('image/jpeg',0.4);
      //上传base64编码
$.ajax({
type: "post",
url: '地址',
data: { },
success: function (msg) {
},
error: function (msg) {
tips.error('上传图片服务出错,请稍候再试。')
}
});
console.log('base64Size',newBase64.length/1024); };
image.src = base64;
})(myCanvas.toDataURL('image/jpeg'));

js压缩图片base64长度,不适于与高质量图片;

通过原base64编码在canvas中绘制新图片,并取出canvas使用toDataUrl方法得到新的base64;

绘制图片时通过改变原图片大小和toDataUrl中参数控制图片质量

js压缩图片base64长度的更多相关文章

  1. js压缩上传图片base64长度

    im发送图片,现将图片压缩再上传 1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 Image对象. ...

  2. JS实现图片base64转blob对象,压缩图片,预览图片,图片旋转到正确角度

    base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...

  3. JS压缩图片(canvas),返回base64码

    上传图片时总会遇到图片过大上传不上去的问题,本方法是在网上搜的压缩图片的例子,我测试过了,确实能用,但是照搬别人的代码,发现压缩后图片会失真,不清晰,现经修改图片清晰度还可以,不仔细看差别不大,so, ...

  4. js压缩图片上传插件localResizeIMG

    示例 /** * 本地图片压缩后上传 */ $("#vfile").change(function(){ var _this = $(this); lrz(this.files[0 ...

  5. js 压缩图片(只缩小体积,不更改图片尺寸)

      1.情景展示 如上图所示,点击上传图片按钮,调用手机摄像头拍照功能. <input onchange="javascript:imgFun.uploadPicture();&quo ...

  6. js 压缩图片 上传

    感谢,参考了以下作者的绝大部分内容 https://blog.csdn.net/tangxiujiang/article/details/78755292 https://blog.csdn.net/ ...

  7. 了解JS压缩图片,这一篇就够了

    前言 公司的移动端业务需要在用户上传图片是由前端压缩图片大小,再上传到服务器,这样可以减少移动端上行流量,减少用户上传等待时长,优化用户体验. 插播一下,本文案例已整理成插件,已上传npm ,可通过 ...

  8. base64之js压缩图片

    在日常的一些项目中会有上传图片之类的接口,如果图片过大了再上传的时候是非常的耗时以及占用资源,在这里就给大家分享一下如何在js中把大的图片压缩成小的图片,我这里的功能是用户点击按钮调用相机或者选择文件 ...

  9. HTML5 JS 压缩图片,并取得图片的BASE64编码上传

    基本过程 1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 Image对象. 2) 在image对象的 ...

随机推荐

  1. NSURLSession访问网络数据

    1.NSMutableURLRequest的设置 //创建NSMutableURLRequest对象 NSMutableURLRequest *request = [NSMutableURLReque ...

  2. VS2010 LINK1123:failure during conversion to COFF:file invalid or corrupt

    今天用Visual Studio 2010编译一个C工程时突然遇到下面这个编译错误.fatal error LINK1123:failure during conversion to COFF:fil ...

  3. python入门到精通[二]:基础学习(1)

    摘要:Python基础学习: 注释.字符串操作.用户交互.流程控制.导入模块.文件操作.目录操作. 上一节讲了分别在windows下和linux下的环境配置,这节以linux为例学习基本语法.代码部分 ...

  4. Android 自定义 view(三)—— onDraw 方法理解

    前言: 上一篇已经介绍了用自己定义的属性怎么简单定义一个view<Android 自定义view(二) -- attr 使用>,那么接下来我们继续深究自定义view,下一步将要去简单理解自 ...

  5. mysql免安装方法

    在官网上下载了个mysql-installer-community-5.6.27.0.msi,需要安装环境,检测未通过,很麻烦.之后网上查了资料之后直接下载了个压缩包mysql-5.6.27-winx ...

  6. SQL中exists和in比较

    in 和exists in是把外表和内表作hash 连接,而exists 是对外表作loop 循环,每次loop 循环再对内表进行查询. 一直以来认为exists 比in 效率高的说法是不准确的.如果 ...

  7. paper 116:自然图像抠图/视频抠像技术梳理(image matting, video matting)

    1. Bayesian Matting, Chuang, CVPR 2001.http://grail.cs.washington.edu/projects/digital-matting/paper ...

  8. phonegap android 输入法弹出会遮盖表单框的解决办法

    phonegap android 当页面内容比较多,表单超出屏幕范围时,点击输入,输入法会遮盖住表单框,而且无法向上滑动. 经过测试发现,是由于config.xml中设置了 FullScreen 的全 ...

  9. python学习笔记系列----(七)类

    7.1 python类和相关术语的简介 Python 通过最小的新语法和语义在语言中实现了类. 它是 C++ 或者 Modula-3 语言中类机制的混合.类的大多数重要特性都被完整的保留下来:类继承机 ...

  10. 如何让 XE5 发现你的手机

    首发在 ① FireMonkey[DELPHI XE5]  165232328 欢迎使用 FMX 开发手机程序的高手来访. 1. 手机开启 USB 调试.不用 ROOT.2. 装驱动.(问题就在这里) ...