利用canvas压缩图片

时间：2024-01-14 12:14:32

现在手机拍的照片动不动就是几M，当用户上传手机里的照片时一个消耗流量大，一个上传时间长，为了解决这个问题，就需要压缩图片：

想法：利用canvas重绘图片，保持宽高比不变，具体宽高根本具体情况而定。

代码 :

　　html:

<input type="file" id="upload" />

<p>压缩前：</p>

<img id="oldImg" src=""/>

<p>压缩后：</p>

<img id="newImg" src=""/>

　　js:

var oldImg = document.getElementById("oldImg");

var newImg = document.getElementById("newImg");

//创建一个隐藏的canvas

var canvas = document.createElement("canvas");

canvas.id = "myCanvas";

canvas.style.display = "none";

document.body.appendChild(canvas);

var cxt = canvas.getContext('2d');

var upload = document.getElementById("upload");

upload.onchange = function(){

    //获取input file里面的图片路径，该路径为blob格式

    var url = getObjectURL(this.files[0]);

    oldImg.src = url;

    canvasImg.src = oldImg.src;

    canvasImg.onload = function(){

        //这是一个过渡的img,当这个img加载完成时绘制到canvas上面

        var m = oldImg.height/oldImg.width;

        canvas.width = 375;

        canvas.height = canvas.width*m;

        cxt.drawImage(canvasImg,0,0,canvas.width,canvas.height);

        //canvas绘制完成则转换为base64并传到新的图片上，再删除canvas

        var Pic = document.getElementById("myCanvas").toDataURL("image/png");

        newImg.src = Pic;

        document.body.removeChild(canvas);

    }

}

//建立一個可存取到該file的url

function getObjectURL(file) {

    var url = null;

    if(window.createObjectURL != undefined) { // basic

        url = window.createObjectURL(file);

    } else if(window.URL != undefined) { // mozilla(firefox)

        url = window.URL.createObjectURL(file);

    } else if(window.webkitURL != undefined) { // webkit or chrome

        url = window.webkitURL.createObjectURL(file);

    }

    return url;

}

效果图 :

该效果图是在电脑端测试的，手机端类似：

利用canvas压缩图片

利用canvas压缩图片

利用canvas压缩图片

备注 :

该方法转换成的是base64格式的图片，在前端页面代码里面看着很长，不舒服，有一个解决方法是等图片传到服务器之后，压缩后的图片直接显示服务器上的图片地址。

相关文章