"// 图片压缩 参数 file 图像质量 回调函数 photoCompress: function(file, qualityObj, callback) { var ready = new FileReader(); ready.readAsDataURL(file); ready.onload = function .."

js 图片压缩

// 图片压缩 参数 file 图像质量 回调函数

photoCompress: function(file, qualityObj, callback) {

var ready = new FileReader();

ready.readAsDataURL(file);

ready.onload = function () {

var re = this.result;

utils.canvasDataURL(re, qualityObj, file.name, callback)

}

},

canvasDataURL: function(path, obj, name, callback) {

var img = new Image();

img.src = path;

img.onload = function () {

var that = this;

// 默认按比例压缩

var w = that.width,

h = that.height,

scale = w / h;

w = obj.width || w;

h = obj.height || (w / scale);

var quality = 0.7; // 默认图片质量为 0.7

// 生成 canvas

var 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);

// 图像质量

if (obj.quality && obj.quality <= 1 && obj.quality > 0) {

quality = obj.quality;

}

// quality 值越小,所绘制出的图像越模糊

var base64 = canvas.toDataURL('image/jpeg', quality);

var arr = base64.split(','), mime = arr[0].match(/:(.*?);/)[1],

bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

while (n--) {

u8arr[n] = bstr.charCodeAt(n);

}

let file = new File([new Blob([u8arr], {type: mime})], name);

// 回调函数返回 base64 的值

callback(file);

}

  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    336 引用 • 972 回帖 • 1001 关注
感谢    关注    收藏    赞同    反对    举报    分享
回帖    
请输入回帖内容...