JS压缩图片(canvas),返回base64码
上传图片时总会遇到图片过大上传不上去的问题,本方法是在网上搜的压缩图片的例子,我测试过了,确实能用,但是照搬别人的代码,发现压缩后图片会失真,不清晰,现经修改图片清晰度还可以,不仔细看差别不大,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码的更多相关文章
- JS将图片转换成Base64码
直接上代码 html页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- js压缩图片base64长度
var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...
- JS将本地图片转化成base64码
在图片上传的时候,有时候后台需要前台上传base64文件,这时候我们就需要将图片资源转化成base64,下面这段js代码就可实现此功能. 1.首先在html里定义一个input输入框: BASE64图 ...
- js 压缩图片 上传
感谢,参考了以下作者的绝大部分内容 https://blog.csdn.net/tangxiujiang/article/details/78755292 https://blog.csdn.net/ ...
- base64之js压缩图片
在日常的一些项目中会有上传图片之类的接口,如果图片过大了再上传的时候是非常的耗时以及占用资源,在这里就给大家分享一下如何在js中把大的图片压缩成小的图片,我这里的功能是用户点击按钮调用相机或者选择文件 ...
- js 压缩图片(只缩小体积,不更改图片尺寸)
1.情景展示 如上图所示,点击上传图片按钮,调用手机摄像头拍照功能. <input onchange="javascript:imgFun.uploadPicture();&quo ...
- js实现图片的Blob base64 ArrayBuffer 的各种转换
一.相关基础知识 构造函数 FileReader() 返回一个新构造的FileReader 事件处理 FileReader.onabort 处理abort事件.该事件在读取操作被中断时触发. Fil ...
- 了解JS压缩图片,这一篇就够了
前言 公司的移动端业务需要在用户上传图片是由前端压缩图片大小,再上传到服务器,这样可以减少移动端上行流量,减少用户上传等待时长,优化用户体验. 插播一下,本文案例已整理成插件,已上传npm ,可通过 ...
- js压缩图片到2m以下
用的canvas.这个问题测试妹子反馈了好几次bug,解决了好多次,虽然用了比较僵硬的办法,但总算最终解决了. 因为php的同事说,页面上的图片要直接调用七牛的接口上传到七牛,所以后端那边不能处理,必 ...
随机推荐
- Meanshift,聚类算法
记得刚读研究生的时候,学习的第一个算法就是meanshift算法,所以一直记忆犹新,今天和大家分享一下Meanshift算法,如有错误,请在线交流. Mean Shift算法,一般是指一个迭代的步骤, ...
- hdu 1533KM算法
#include<stdio.h> #include<string.h> #include<math.h> #define inf 0x3fffffff #defi ...
- [K/3Cloud] KSQL 关联表更新字段Update语法
关联表更新字段 UPDATE tmp369faa3f7d224b0595670425008 as t1 SET FStatus=-1 where exists(select 1 from t_BD_S ...
- codevs1005 生日礼物
题目描述 Description 9月12日是小松的朋友小寒的生日.小松知道小寒特别喜欢蝴蝶,所以决定折蝴蝶作为给小寒的生日礼物.他来到了PK大学最大的一家地下超市,在超市里,小松找到了n种可以用来折 ...
- Java设计模式补充:回调模式、事件监听器模式、观察者模式(转)
一.回调函数 为什么首先会讲回调函数呢?因为这个是理解监听器.观察者模式的关键. 什么是回调函数 所谓的回调,用于回调的函数. 回调函数只是一个功能片段,由用户按照回调函数调用约定来实现的一个函数. ...
- 【CV论文阅读】action recognition by dense trajectories
密集轨迹的方法是通过在视频帧上密集地采样像素点并且在追踪,从而构造视频的局部描述子,最后对视频进行分类的方法依然是传统的SVM等方法. 生成密集轨迹: (1)从8个不同的空间尺度中采样,它们的尺度差因 ...
- javascript 事件对象(event 对象)
原文: http://www.cnblogs.com/songyaqi/p/5204143.html <html> <head> <title> Track Mou ...
- window.setTimeout() 和window.setInterval() 的差别
setTimeout 和setInterval的功能都是经过某一个时间段后发生某件指定的事件或者方法. 如window.setTimeout("sleep()",5000);指的是 ...
- Raphael.js image 在ie8以下的兼容性问题
Raphael.js 在ie7,ie8浏览器内绘制图形採用的vml,在绘制image的时候会解析成 <?xml:namespace prefix = "rvml" ns = ...
- 使用openstack的虚拟机模版注意事项
openstack虚拟机模版(flavor)是一个非常奇怪的设计.讲讲我測试时遇到的问题,尽管说在project应用中虚拟机模版在開始时就定制好.后期可能做改动,可是改动时一定要注意,有以下几种情况: ...