隨著移動設備的普及，網頁性能優化顯得愈加重要。其中，圖片壓縮是提高網頁加載速度的關鍵之一。本文將介紹如何使用h5壓縮圖片上傳 PHP實現圖片的壓縮和上傳功能。

圖片壓縮可以通過移動端用戶在上傳圖片時進行，也可以在后臺服務器上進行。在這里，我們將主要討論在移動端進行圖片壓縮，在后臺服務器上進行圖片上傳的情況。

前端實現

首先，我們需要在前端頁面中加入一個文件上傳的表單。

<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="image" accept="image/*" id="upload" />
<input type="submit" value="Upload" />
</form>

上面的代碼中，我們使用了一個文件類型的input元素，限制了文件類型為圖片。我們還為該元素添加了一個id屬性，用于后續在JavaScript中獲取該元素。

接下來，我們使用JavaScript監聽文件選擇事件，以實現圖片的壓縮。

var uploadElement = document.getElementById('upload');
uploadElement.addEventListener('change', function(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(event) {
var img = new Image();
img.onload = function() {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var maxWidth = 800;
var maxHeight = 800;
var width = img.width;
var height = img.height;
if (width >height) {
if (width >maxWidth) {
height *= maxWidth / width;
width = maxWidth;
}
} else {
if (height >maxHeight) {
width *= maxHeight / height;
height = maxHeight;
}
}
canvas.width = width;
canvas.height = height;
context.clearRect(0, 0, width, height);
context.drawImage(img, 0, 0, width, height);
var compressedImage = canvas.toDataURL(file.type, 0.7);
// 在這里將compressedImage上傳到后臺服務器
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
});

上面的代碼中，我們首先使用FileReader讀取文件，并將其轉化為Data URL。接著，我們創建了一個Image對象，并在其加載完成后，創建了一個Canvas對象，然后將圖片繪制到該Canvas中。最后，我們使用Canvas的toDataURL方法將壓縮后的圖片轉化為Data URL。

在這里，我們將壓縮質量設置為0.7，可以根據需求進行調整。

最后，我們可以使用Ajax或其他方式將壓縮后的圖片上傳到服務器。

后臺實現

在后臺服務器上，我們需要使用PHP來接收和處理上傳的圖片。

$image = $_FILES['image'];
$targetPath = 'uploads/';
$targetFile = $targetPath . $image['name'];
if(move_uploaded_file($image['tmp_name'], $targetFile)) {
// 上傳成功，進行其他操作
} else {
// 上傳失敗，進行其他操作
}

上面的代碼中，我們首先獲取到上傳的圖片。然后，我們設置了一個保存上傳圖片的目標路徑，并將上傳后的臨時文件移動到目標路徑中。最后，我們可以對上傳成功和上傳失敗進行相應的處理。

以上就是使用h5壓縮圖片上傳 PHP實例的簡要介紹。通過在前端進行圖片壓縮，可以提高網頁加載速度，同時在后臺進行圖片上傳，可以實現服務器端的圖片保存和管理。