js 前端图片压缩

/**
File图片类型
callback回调函数，里面传压缩后的File
**/

function compress(file,callback){var ms = file.size/1024;console.log("压缩前的大小"+file.size);if(ms>249) {var ready = new FileReader();ready.onload = function () {// ready.readAsDataURL(file);var path = this.result;var img = new Image();img.onload = function () {var that = this;var w = that.width,h = that.heightscale = w / h;if (w > 1000) {// 宽大大于1000的话。w = 1000;h = w / scale;}var quality = 0.5; // quality 值越小，绘制出的图片越模糊  图片大小为10000，压缩为0.2 大小为2000，压缩1，大小为4000，压缩0.5// 生成canvasvar canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');// 创建属性节点var anw = document.createAttribute("width");anw.nodeValue = w;var anh = document.createAttribute("height");anh.nodeValue = h;canvas.setAttributeNode(anw);canvas.setAttributeNode(anh);ctx.drawImage(that, 0, 0, w, h);// 将base64的图片数据转换成blobvar urlData = canvas.toDataURL('image/jpeg', quality);var arr = urlData.split(","), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}var blobfile = new Blob([u8arr], {type: mime});console.log("压缩前的大小"+blobfile.size);// callbackcallback(blobfile);}img.src = this.result;console.log(img.src);}ready.readAsDataURL(file);}else {callback(file);
}
}

js 前端图片压缩相关推荐

JS前端图片压缩上传
JS前端图片压缩上传重点知识最近在做一个手机端的图片上传,写了一个比较符合自己要求的方法,可供参考在做这个功能模块时,我遇到了以下问题,都花费了大量时间: 1. 不知道怎么压缩图片,(代码和方法) ...
前端图片压缩上传(纯js的质量压缩，非长宽压缩)
前端图片压缩上传(纯js的质量压缩,非长宽压缩) 此demo为大于1M对图片进行压缩上传若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下: <!DOCTYPE html> ...
谈谈JS 的图片压缩
前言说起图片压缩,大家想到的或者平时用到的很多工具都可以实现,例如,客户端类的有图片压缩工具 PPDuck3, JS 实现类的有插件 compression.js ,亦或是在线处理类的 OSS 上传 ...
前端图片压缩上传（压缩篇）
为什么说这是一篇比较适合小白的前端图片压缩文章呢?因为我也是一个刚工作半年的前端小白,最近接到了一个前端图片压缩上传的任务,通过各种百度博客完成了这项任务,但是任务完成后对各种技术细节却还不是特别理解 ...
移动前端—图片压缩上传实践
在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上 ...
前端图片压缩解决办法
文章の目录问题产生背景解决办法 1.使用纯 js 解决 2.插件 js-image-compressor 写在最后问题产生背景在某一h5的项目,要求上传的图片格式为 base64 , 问题是用 ...
使用node.js实现图片压缩
1 images模块介绍处理图片往往会遇到图片压缩的问题,使用Windows系统自带的画图软件或者其它图像处理软件一般都能够实现图片的压缩,但是只能是单张处理,如果涉及到大批量的图片压缩的话,一张一 ...
前端图片压缩 pngquanty
进行前端开发,必然会用到图片压缩,在尽可能小的改变图片视觉效果前提下,尽可能大的压缩图片大小,进行png 图片压缩常用 pngquant,在服务器上上传压缩过后的图片,以节省载宽Official w ...
JS实现图片压缩，兼容ios，
代码参考的七牛官方compress.js(https://github.com/qiniu/js-sdk/blob/master/src/compress.js) 但是七牛官方的压缩,在ios下我试着 ...

js 前端图片压缩

js 前端图片压缩相关推荐

最新文章

热门文章

js 前端 图片压缩

js 前端 图片压缩相关推荐

最新文章

热门文章

js 前端图片压缩

js 前端图片压缩相关推荐