会python真的可以为所欲为0(回)
350天前
这里还有人吗1(回)
535天前这里还有人吗0(回)
535天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
760天前到处都是羊，不想上班0(回)
840天前
鸽子
0(回)
844天前/** |
* 图片压缩，默认同比例压缩 |
* @param {Object} path |
* pc端传入的路径可以为相对路径，但是在移动端上必须传入的路径是照相图片储存的绝对路径 |
* @param {Object} obj |
* obj 对象 有 width， height， quality(0-1) |
* @param {Object} callback |
* 回调函数有一个参数，base64的字符串数据 |
*/ |
function dealImage(path, obj, 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 ); |
// 回调函数返回base64的值 |
callback(base64); |
} |
如果可以试着测试一下压缩后的图片大小： |
|
===================================================================================== |
当然返回的是一个base64的一个字符串； |
// 调用函数处理图片 dealImage("路径", {// 注意：在pc端可以用绝对路径或相对路径，移动端最好用绝对路径（因为用take photo后的图片路径，我没有试成功（如果有人试成功了可以分享一下经验）） width : 200}, function(base){//直接将获取到的base64的字符串，放到一个image标签中就可看到测试后的压缩之后的样式图了 document.getElementById("transform").src = base; console.log("压缩后：" + base.length / 1024 + " " + base); }) |
by: 发表于：2017-10-17 15:03:09 顶(0) | 踩(0) 回复
??
回复评论