最近遇到了图片压缩的问题,想在前端控制一下,所以有了一下代码。

一.canvas.toDataURL()

具体使用方法为:canvas.toDataURL(type,encoderOptions)

第一个参数type为,支持的类型,默认为images/png,第二个参数是质量,默认为0.92

  • 注意事项:
    • 1、图片跨域问题
    • 2、画布高度为0,会返回字符串”data:,”
    • 3、图片类型,如:image/png、image/jpeg、image/webp
    • 4、图片质量如为默认,则小心压缩的图片质量很有可能比原有大,如我上传一张120kb的图片,压缩后很有可能为140kb,base64会增加一部分。

简单示例:

1
2
3
4
var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
var lowQuality = canvas.toDataURL("image/jpeg", 0.1);

完整代码:

1
<img src="" alt="" id="img"  crossorigin="anonymous">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function drawImg(path, callback) {
var img = new Image();
img.src = path;
img.onload = function () {
//默认按比例压缩
var w = this.width,
h = this.height;
var quality = 0.75; // 默认图片质量为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);
console.log("压缩后的质量:"+ base64.length / 1024 * quality);
// 回调函数返回base64的值
callback(base64);
};

};

drawImg("xinghaivps.png", function (base) {
//直接将获取到的base64的字符串,放到一个image标签中就可看到测试后的压缩之后的样式图了
document.getElementById("img").src = base;
})

二、canvas.drewImage()

完整代码:

1
<canvas id="myCanvas"></canvas>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function render(src,size) {
// 创建一个 Image 对象
var image = new Image();
// 参数,最大高度
// 绑定 load 事件处理器,加载完成后执行
image.onload = function () {
// 获取 canvas DOM 对象
var canvas = document.getElementById("myCanvas");
// 如果高度超标
if (image.height > size) {
// 宽度等比例缩放 *=
image.width *= size / image.height;
image.height = size;
}
// 获取 canvas的 2d 环境对象,
// 可以理解Context是管理员,canvas是房子
var ctx = canvas.getContext("2d");
// canvas清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 重置canvas宽高
canvas.width = image.width;
canvas.height = image.height;
// 将图像绘制到canvas上
ctx.drawImage(image, 0, 0, image.width, image.height);
// !!! 注意,image 没有加入到 dom之中
};
// 设置src属性,浏览器会自动加载。
// 记住必须先绑定事件,才能设置src属性,否则会出同步问题。
image.src = src;
};

render('mei.jpg',1500)

参考:

如果觉得我的文章对您有用,请随意打赏。

Alipay
感谢您的阅读,本文由 李经纶 版权所有。如若转载,请注明出处:李经纶个人博客(https://lijinglun.com/2017/08/06/canvas压缩图片/