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

JS   返回的是一个base64字符串

/**
* 图片压缩,默认同比例压缩
* @param {Object} path
* pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照相图片储存的绝对路径
* @param {Object} obj
* obj 对象 有 width, height, quality(0-1)
* @param {Object} callback
* 回调函数有一个参数,base64的字符串数据
*/
function dealImage(path, callback){
var img = new Image();
img.src = path;
img.onload = function(){
//默认按比例压缩
var w = this.width,
h = this.height;
var quality = 0.95; // 默认图片质量为0.7 //生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d'); // 创建属性节点
canvas.setAttribute("width", w);
canvas.setAttribute("height", h); ctx.drawImage(this, 0, 0, w, h);
// quality值越小,所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality);
// 回调函数返回base64的值
callback(base64);
};
}; 使用的方法
// 调用函数处理图片                 
dealImage("路径",function(base){
//直接将获取到的base64的字符串,放到一个image标签中就可看到测试后的压缩之后的样式图了
document.getElementById("transform").src = base;
console.log("压缩后:" + base.length / 1024 + " " + base);
})

JS压缩图片(canvas),返回base64码的更多相关文章

  1. JS将图片转换成Base64码

    直接上代码 html页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. js压缩图片base64长度

    var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...

  3. JS将本地图片转化成base64码

    在图片上传的时候,有时候后台需要前台上传base64文件,这时候我们就需要将图片资源转化成base64,下面这段js代码就可实现此功能. 1.首先在html里定义一个input输入框: BASE64图 ...

  4. js 压缩图片 上传

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

  5. base64之js压缩图片

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

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

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

  7. js实现图片的Blob base64 ArrayBuffer 的各种转换

    一.相关基础知识 构造函数 FileReader() 返回一个新构造的FileReader 事件处理 FileReader.onabort  处理abort事件.该事件在读取操作被中断时触发. Fil ...

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

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

  9. js压缩图片到2m以下

    用的canvas.这个问题测试妹子反馈了好几次bug,解决了好多次,虽然用了比较僵硬的办法,但总算最终解决了. 因为php的同事说,页面上的图片要直接调用七牛的接口上传到七牛,所以后端那边不能处理,必 ...

随机推荐

  1. Java Web学习总结(30)——Service层在MVC框架中的意义和职责

    mvc框架由model,view,controller组成,执行流程一般是:在controller访问model获取数据,通过view渲染页面. mvc模式是web开发中的基础模式,采用的是分层设计, ...

  2. 如何高效读写百万级的Excel?

    高效读取百万级数据 接上一篇介绍的高效写文件之后,最近抽时间研究了下Excel文件的读取.概括来讲,poi读取excel有两种方式:用户模式和事件模式. 然而很多业务场景中的读取Excel仍然采用用户 ...

  3. [bzoj5301][Cqoi2018]异或序列_莫队

    异或序列 bzoj-5301 Cqoi-2018 题目大意:题目链接. 注释:略. 想法: 由于a^a=0这个性质,我们将所有的数变成异或前缀和. 所求就变成了求所有的$l_i\le x<y\l ...

  4. hihoCoder #27

    A QvQ B 题目:http://hihocoder.com/problemset/problem/1470 分析:dfs序+栈+数学 可以发现,对于每组询问,树上是有很多点都只能等于0的 对于每个 ...

  5. Ubuntu 16.04粘贴板增强工具Parcellite

    默认在Ubuntu已经有粘贴板增强工具,比如保存最近五个的复制文本历史. 1.系统默认 使用:[Ctrl]+[;] 然后用数字进行选择即可,但是只支持文本,只能保存最近5次 2.安装Parcellit ...

  6. js事件捕获和冒泡解析

    <div id="box"> <div id="box2"> <p id="test">test< ...

  7. 查看程序占用tomcat内存情况

    近期,公司线上tomcat常常无缘无辜宕机.总结了一下定位问题的方法,仅供參考: 报错信息: Maximum number of threads (200) created for connector ...

  8. jdk1.6下使用sardine和jackrabbit-webdav的问题

    同步一个遇到的问题,前几天,客户给了一个server地址和usernamepassword.让把上面的文件,download到还有一台server上.我查了下,发现该server使用文件协议是webd ...

  9. Android学习之仿QQ側滑功能的实现

    如今项目越来越多的应用了滑动删除的功能,Android本来遵循的是长按删除,IOS定制的是滑动删除,不可否认滑动删除确实在客户体验上要好一点,所以看了非常多关于仿QQ滑动删除的样例,还是感觉代码家的A ...

  10. java后端判断用户是否关注公众号

    /** * 判断用户是否关注了公众号 * @param openid * @return */ public static boolean judgeIsFollow(String openid){ ...