canvas压缩图片

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

一.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会增加一部分。

简单示例：

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">

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>

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)

参考：

上次更新：2023-08-30 22:52:25