讲干货，不啰嗦，当涉及对图片有质量压缩要求的时候，可以使用canvas实现图片压缩。
步骤：
1.获取img元素，既要压缩的图片
2.创建canvas对象
3.使用canvas的drawimage方法绘制图片
4.通过canvas todataurl方法获取图像ba64编码，设置quality参数，实现压缩
参考示例：
<!doctype html><html><head> <meta chart="utf-8"> <title>canvas图片压缩测试</title> <script s洗隐形眼镜rc="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="compresdimg" 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方法获爱情小小说取图像ba64编码，qu抗震救灾手抄报ality为压缩质量参数，值越小图像越模糊 var ba64 = canvas.todataurl('image/jpeg', quality); //测试展示 $("#compresdimg").attr("src",ba64) //获取到ba64后可做进一步处理，如传到后端并储存 }</script><style> #originalimg{ width: 300px; }</style></body></html>压缩前后图片对比：
生成的ba64码：
能力有限，水平一般，错误之处，欢迎指正，感谢关注和评论！
psi本文发布于:2023-04-03 03:23:39，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/d79300a72a44de6f347b4750f4e4bb47.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：使用Canvas压缩图片.doc
本文 PDF 下载地址：使用Canvas压缩图片.pdf
| 留言与评论（共有 0 条评论） |
