js压缩图片base64长度
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长度的更多相关文章
- js压缩上传图片base64长度
im发送图片,现将图片压缩再上传 1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 Image对象. ...
- JS实现图片base64转blob对象,压缩图片,预览图片,图片旋转到正确角度
base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...
- JS压缩图片(canvas),返回base64码
上传图片时总会遇到图片过大上传不上去的问题,本方法是在网上搜的压缩图片的例子,我测试过了,确实能用,但是照搬别人的代码,发现压缩后图片会失真,不清晰,现经修改图片清晰度还可以,不仔细看差别不大,so, ...
- js压缩图片上传插件localResizeIMG
示例 /** * 本地图片压缩后上传 */ $("#vfile").change(function(){ var _this = $(this); lrz(this.files[0 ...
- js 压缩图片(只缩小体积,不更改图片尺寸)
1.情景展示 如上图所示,点击上传图片按钮,调用手机摄像头拍照功能. <input onchange="javascript:imgFun.uploadPicture();&quo ...
- js 压缩图片 上传
感谢,参考了以下作者的绝大部分内容 https://blog.csdn.net/tangxiujiang/article/details/78755292 https://blog.csdn.net/ ...
- 了解JS压缩图片,这一篇就够了
前言 公司的移动端业务需要在用户上传图片是由前端压缩图片大小,再上传到服务器,这样可以减少移动端上行流量,减少用户上传等待时长,优化用户体验. 插播一下,本文案例已整理成插件,已上传npm ,可通过 ...
- base64之js压缩图片
在日常的一些项目中会有上传图片之类的接口,如果图片过大了再上传的时候是非常的耗时以及占用资源,在这里就给大家分享一下如何在js中把大的图片压缩成小的图片,我这里的功能是用户点击按钮调用相机或者选择文件 ...
- HTML5 JS 压缩图片,并取得图片的BASE64编码上传
基本过程 1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 Image对象. 2) 在image对象的 ...
随机推荐
- web网站的url设计
通常再web网站设计url时是按功能模块设计url,然后再control层一个功能模块对应一个control层类,每个control类中的方法映射相应的url请求. 如果遇见另一个功能模块需要实现同样 ...
- 关于sigwait
刚开始看sigwait函数,只是知道它是用来解除阻塞的信号,可是使我疑惑的是那么解除了以后为什么线程收到终止信号SIGINT的时候还是没能终止呢? 于是网上找了一些资料,总的理解如下所示: sig ...
- react.js语法为了更好的兼容可以选以下这种方法配置即可
首先下一个sublime text3 的编辑器: 支持大家使用正版,不过我是为了方便才所以这版本而已... 地址: http://sublimetext.iaixue.com/forum.php?mo ...
- 一个python的计算熵(entropy)的函数
计算熵的函数: # -*- coding: utf-8 -*- import math #the function to calculate entropy, you should use the p ...
- yii2输出sql语句
yii2如何输出具体的查询的sql语句: $query = User::find() ->where(['id'=>[1,2,3,4]) ->select(['username']) ...
- 推荐一篇好文:OSG OSGearth vs2010编译
链接:http://weibo.com/p/2304189447a8480102v2c2 此文作者把用到的相关代码包放在:http://pan.baidu.com/s/1qW9a4zU 按照步骤操作完 ...
- 7.Git的版本退回
现在,你已经学会了修改文件,然后把修改提交到Git版本库,现在,再练习一次,修改readme.txt文件如下: Git is a distributed version control system. ...
- 在eclipse上跑hadoop的helloworld
关于hadoop的用处什么我就不说了,在这里记录下在eclipse上第一次跑hadoop遇到的问题吧~ hadoop的安装我就不说啦,网上教程一大堆~我直接用的公司的Linux上的hadoop. ec ...
- npm Scripts使用教程【译】
Why npm Scripts? 原文发表于 2016.2.12,原文地址: https://css-tricks.com/why-npm-scripts/ 以下是访客Damon Bauer发布的一篇 ...
- 程序员面试大揭秘——应聘微软、亚马逊、谷歌、苹果等IT公司你都要做什么准备?
对于多数求职者而言,面试好似一个迷局.你去了,见了几个面试官,答了一堆问题,然后,或两手空空离开,或幸运地拿到录用通知. 你有没有想过: 面试结果是怎么得出的? 面试官会不会互相交流? 公司最看重哪些 ...