前言
好像沒啥好說的~
大概做法
- 先由filereader獲取圖片的base64,控制圖片生成,但不顯示。
- 然後將圖片按比例設置好壓縮後的寬高繪製在canvas畫布上。
- 之後利用canvas的自帶方法再次轉換成base64,再對base64進行解碼存儲到數組緩存區,生成blob,然後創建下載鏈接就完了。
上代碼,看註釋就完了
//html
<input type="file" id="file"> //這裏選擇圖片
<canvas id="canvas"></canvas> //canvas畫布
//js
document.getElementById('file').onchange = function () {
console.log(this.files[0]);
//注意這個files是數組
reader.readAsDataURL(this.files[0]);
var reader = new FileReader();
reader.onload = function (e) {
//下面這三行就可以實現文件選擇了圖片以後,預覽的功能,但是有些圖片可能太大了影響頁面觀感,得統一縮小下。
//var img = new Image();
// img.src = e.target.result;
// document.body.appendChild(img);
render(e.target.result) //這個方法實現圖片的壓縮下載
}
}
var MAX_H = 100;
function render(src){
// 創建一個 Image 對象
var image = new Image();
// 設置src屬性,加載圖片內容,此時還未壓縮
image.src = src;
// 綁定 load 事件處理器,加載完成後執行
image.onload = function(){
// 獲取 canvas DOM 對象
var canvas = document.getElementById("canvas");
// 如果高度超標
if(image.height > MAX_H) {
// 寬度等比例縮放 *=
image.width *= MAX_H / image.height;
image.height = MAX_H;
}
// 獲取 canvas的 2d 環境對象, 有些上古瀏覽器不支持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上
//drawImage(img,startX,startY,endX,endY)
ctx.drawImage(image, 0, 0, image.width, image.height);
//將繪製好的canvas圖像轉爲DataURL
//toDataURL(圖片類型,圖片質量),這個圖片質量越高就越清晰(相同寬高)
//canvas.toDataURL 返回的默認格式就是 image/png
var data = canvas.toDataURL('image/jpeg',0.5);
//獲取圖片的dataUrl轉成blob
//這下面轉blob的代碼我也沒搞懂,無百度了DataURL轉blob就是這些代碼了
data = data.split(',')[1];
data = window.atob(data);
var ia = new Uint8Array(data.length);
for (var i = 0; i < data.length; i++) {
ia[i] = data.charCodeAt(i);
};
var blob = new Blob([ia], {
type: "image/jpeg"
});
//生成blob文件的下載鏈接,把鏈接附在a便籤上,把a便籤加入dom中,點擊就可以下載啦
var url3 = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url3;
a.text = '測試圖片';
a.download = 'mytest.jpg';
document.body.appendChild(a);
};
};
效果預覽
後語
壓縮後上傳的操作,這裏就不寫了,百度下blob如何生成file上傳即可。