캔버스를 사용하여 이미지를 압축하는 방법은 무엇입니까?

요즘 휴대폰으로 촬영한 사진의 크기는 수 메가바이트에 달하는 경우가 많습니다. 사용자가 휴대폰으로 사진을 업로드하면 이 문제를 해결하기 위해 많은 양의 데이터가 소모되고, 다른 하나는 업로드하는 데 오랜 시간이 걸립니다. 사진을 압축하는 데 필요함:

아이디어: 캔버스를 사용하여 사진을 다시 그리되 종횡비를 변경하지 않고 특정 너비와 높이는 특정 상황에 따라 달라집니다.

코드:

　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");//创建一个隐藏的canvasvar 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并传到新的图片上，再删除canvasvar Pic = document.getElementById("myCanvas").toDataURL("image/png");
        newImg.src = Pic;
        document.body.removeChild(canvas);}
}//建立一個可存取到該file的urlfunction getObjectURL(file) {var url = null;if(window.createObjectURL != undefined) { // basicurl = window.createObjectURL(file);
    } else if(window.URL != undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file);
    } else if(window.webkitURL != undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file);
    }return url;
}

렌더링:

렌더링은 컴퓨터에서 테스트되었으며 모바일 버전도 비슷합니다.

참고:

이 방법은 이미지를 base64 형식으로 변환하므로 프런트 엔드 페이지 코드가 매우 길고 불편해 보입니다. 방법은 이미지가 서버로 전송될 때까지 기다리는 것입니다. 그러면 압축된 이미지가 서버의 이미지 주소를 직접 표시합니다.

위 내용은 캔버스를 사용하여 이미지를 압축하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!