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. Python学习笔记(基本功能的使用)

    整理了以前使用的几个笔记:上传到了github; python_notes 以后在慢慢更新吧:

  2. App.domain http->https

    App.domain = `${location.origin}/toa-mgw/rest/gateway`.replace(/http:\/\//, 'https://');

  3. 新上市Lighthouse专用芯片TS3633规格介绍

    背景介绍 Valve 有远大的愿景.它决心要把 SteamVR 追踪系统推向世界,从虚拟现实里的空间定位,到机器人领域,Valve 想为各种环境下的跟踪应用提供支持. 上个月,Valve 方面宣布会把 ...

  4. C语言第五次作业

    #include<stdio.h> int main() { int a,b,c; printf("请输入3个整数:"); scanf("%d %d %d&q ...

  5. Y-TDC 的一些函数

    typedef void (*func_ptr)(void); func_ptr usm_rom_set_tx2_drive_strength_hs; 定义一个函数指针类型.比如你有三个函数:void ...

  6. TP框架 ---空控制器和空操作

    通过之前的学习我们知道了index.php是一个入口文件,如果没有这个入口文件的话,我们需要自己创建! [视图模板文件创建] 视图模板文件存放发位置在: 里面没有模板文件 如果我们想要访问Login控 ...

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

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

  8. Java Thread wait, notify and notifyAll Example

    Java Thread wait, notify and notifyAll Example Java线程中的使用的wait,notify和nitifyAll方法示例. The Object clas ...

  9. hdu 1004 Let the Balloon Rise

    Let the Balloon Rise Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Oth ...

  10. CentOS-7下安装MySQL5.6.22

    参考: http://www.2cto.com/database/201501/371451.html 安装环境   CentOS版本:CentOS-7 因为之前安装过,没有成功,但是有之前安装的文件 ...