黑马程序员技术交流社区

标题: 【上海校区】使用Canvas压缩图片 [打印本页]

作者: 梦缠绕的时候 时间: 2019-7-25 15:52
标题: 【上海校区】使用Canvas压缩图片

步骤：

1.获取img元素，既要压缩的图片

2.创建canvas对象

3.使用canvas的drawImage方法绘制图片

4.通过canvas toDataURl方法获取图像base64编码，设置quality参数，实现压缩

参考示例：

[url=]

[/url]
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Canvas图片压缩测试</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script></head><body><div class="container"> <h2>压缩前图片</h2> <img id="originalImg" src="test.jpg"> <h2>压缩后图片</h2> <img id="compressedImg" src=""></div><script> $(document).ready(function(){ compressImg(300,0.2) }); function compressImg(width,quality ) { // 图片压缩方法，接受2个参数 // width：压缩后图片宽度,高度按比例计算 // quality：压缩比例参数，范围0-1 var img=$("#originalImg")[0];//获取图像元素 var height=width/img.width*img.height; //生成canvas var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); canvas.width = width; canvas.height = height; //通过canvas drawImage方法绘制图片 ctx.drawImage(img,0,0,width,height);//后四个为位置参数，左上角x,y坐标，右下角x,y坐标 //通过canvas toDataURl方法获取图像base64编码，quality为压缩质量参数，值越小图像越模糊 var base64 = canvas.toDataURL('image/jpeg', quality); //测试展示 $("#compressedImg").attr("src",base64) //获取到base64后可做进一步处理，如传到后端并储存 }</script><style> #originalImg{ width: 300px; }</style></body></html>[url=]

[/url]

压缩前后图片对比：

　　生成的base64码：

作者: 梦缠绕的时候 时间: 2019-7-25 15:53
有任何问题欢迎在评论区留言

作者: 梦缠绕的时候 时间: 2019-7-25 15:53
或者添加学姐微信号
DKA-2018

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2