HTML5的出現讓移動端Web應用開發變得更加簡單和靈活。其中，手機上傳圖片和尺寸裁剪是開發中經常遇到的功能之一。下面，我們來分享一段關于HTML5手機上傳圖片尺寸裁剪的代碼。 首先，我們需要在HTML頁面的頭部添加以下代碼：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="cropper.js"></script>
<link rel="stylesheet" href="cropper.css">

以上代碼用于引入jQuery庫、圖片裁剪的js和css文件，以及設置viewport的縮放比例為1.0。 接下來，我們需要在HTML頁面的body部分添加一個上傳圖片的input框，在這個input框中，我們可以限制上傳圖片的格式和大小，并且可以通過調用裁剪函數進行圖片尺寸的裁剪。代碼如下：

<input type="file" id="uploadImage" accept="image/*" onchange="previewImage(this)">
<script type="text/javascript">
// 預覽圖片并調用裁剪函數
function previewImage(file) {
// 限制上傳圖片的大小和格式
if (!file || !/image\/\w+/.test(file.files[0].type)) return false;
// 實例化 FileReader 對象
var reader = new FileReader();
reader.readAsDataURL(file.files[0]);
reader.onload = function () {
// 預覽圖片
$("#previewImage").attr("src", this.result);
// 調用裁剪函數
$("#previewImage").cropper({
aspectRatio: 1, // 縱橫比
viewMode: 1, // 預覽模式
crop: function(e) {
// 圖片裁剪完成后的回調函數
console.log(e.detail.x);
console.log(e.detail.y);
console.log(e.detail.width);
console.log(e.detail.height);
}
});
}
}
</script>

以上代碼中，我們首先實例化了FileReader對象，并通過調用其readAsDataURL()方法來讀取上傳的圖片文件內容。接著，將讀取到的圖片內容賦值給一個img標簽的src屬性，以便預覽圖片。最后，調用圖片裁剪函數，設置裁剪的縱橫比、預覽模式以及裁剪完成后的回調函數等參數。 至此，我們已經完成了HTML5手機上傳圖片尺寸裁剪的代碼實現。在實際開發中，我們可以根據具體需求對裁剪的各項參數進行調整和優化，以達到更好的用戶體驗效果。