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对象的 ...
随机推荐
- IOS 支持HTTPS调用(AFNetWorking框架)
1.ATS开关开启2.manager.securityPolicy.allowInvalidCertificates = YES; manager.securityPolicy.validatesDo ...
- 不同数据库中同一张表的SQL循环修改语句
select sample_value,Sample_GUID,row_number() over(order by sample_value )as rownumber into #AATemp ...
- Android实现文章+评论(MVP,RxJava,Dagger2,ButterKnife)
简介 这个项目主要有两个功能,一个加载网页/文章,另一个用来显示评论.并应用了MVP模式,Dagger2.RxJava.ButterKnife等开源框架.效果图如下: 结构 首先来看一下布局文件: & ...
- Cassandra 配制 cassandra.yaml
一.设置用户名和密码 修改cassandra.yaml配置文件 把默认的 authenticator: AllowAllAuthenticator 改成 authenticator: Password ...
- 客户端使用java,服务端使用c++的corba编程环境搭建
我们先用c++实现服务端和客户端,然后再用java编写客户端. 1. 首先安装omniORB,omniORB提供 omniidl命令,以及一些头文件和库. omniORB一般是需要你自己进行编译. 2 ...
- linux安全运维之谁动了chattr
安全一直是老生常谈的问题,今天我们来谈谈chattr. 如果涉及到侵权问题:请联系w18030432178@outlook.com,我会尽快删除帖子 目录 0.chattr的简介 0.0 chattr ...
- Centos vsftpd服务器搭建
Centos vsftpd服务器搭建 时间:2016-07-18 1.最为简单的vsftpd服务器搭建 1.安装vsftpd 1.yum 安装 yum install vsftpd 2.rpm文件安装 ...
- spring-cloud-event-sourcing-example-master 运行效果及说明
1.微服务架构下电商示例,部署成功!监控等技术细节未深入研究. 简单介绍: 配置服务(config-service ),端口8888,健康检查 xx:8888/hea ...
- 启动Tomcat服务器报错
启动Tomcat服务器报错: Several ports (8005, 8080, 8009) required by Tomcat v5.5 Server at localhost are alre ...
- Material Design Lite,简洁惊艳的前端工具箱 之 交互组件。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接, 博客地址为http://www.cnblogs.com/jasonnode/ . 网站上有对应 ...