Wie komprimiere ich Bilder mit Canvas?

Heutzutage sind die mit Mobiltelefonen aufgenommenen Fotos oft mehrere Megabyte groß. Wenn Benutzer Fotos auf ihre Mobiltelefone hochladen, verbraucht das eine eine Menge Daten und das andere dauert lange, um dieses Problem zu lösen. Es ist notwendig, die Bilder zu komprimieren:

Idee: Verwenden Sie die Leinwand, um das Bild neu zu zeichnen, wobei das Seitenverhältnis unverändert bleibt. Die spezifische Breite und Höhe hängt von der jeweiligen Situation ab.

Code:

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;
}

Rendering:

Dieses Rendering wurde auf dem Computer getestet. Die mobile Version ist ähnlich:

Bemerkungen:

Diese Methode konvertiert Bilder in das Base64-Format, was im Front-End-Seitencode sehr lang und unbequem aussieht. Eine Lösung besteht darin, auf das Bild zu warten Bei der Übertragung an den Server zeigt das komprimierte Bild direkt die Bildadresse auf dem Server an.

Das obige ist der detaillierte Inhalt vonWie komprimiere ich Bilder mit Canvas?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!