HTML5已經(jīng)成為了Web開發(fā)的標(biāo)準(zhǔn)，其中最讓人興奮的功能就是能夠在手機(jī)上上傳圖片并裁剪尺寸。 為了能夠?qū)崿F(xiàn)這種功能，我們需要使用一些HTML5 API，以及一些JavaScript庫來幫助完成。 以下是一個簡單的HTML5手機(jī)上傳圖片裁剪尺寸代碼：

HTML:

<div class="container">
<form>
<input type="file" id="image" name="image"/>
<input type="submit" value="Upload"/>
</form>
</div>
<div id="result"></div>

CSS:

.container {
width: 100%;
max-width: 500px;
margin: 0 auto;
}
#result {
margin-top: 30px;
}

JavaScript:

var input = document.getElementById('image');
var result = document.getElementById('result');
input.addEventListener('change', function() {
var reader = new FileReader();
reader.onload = function(e) {
var image = new Image();
image.src = e.target.result;
//裁剪尺寸
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var width = image.width;
var height = image.height;
var size = 500;
if (width >height) {
if (width >size) {
height *= size / width;
width = size;
}
} else {
if (height >size) {
width *= size / height;
height = size;
}
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(image, 0, 0, width, height);
//顯示結(jié)果
result.innerHTML = '<img src="' + canvas.toDataURL("image/jpeg") + '" alt=""/>';
}
reader.readAsDataURL(input.files[0]);
});

這段代碼使用了HTML5的FileReader API來讀取上傳的圖片，然后使用Canvas API對圖片進(jìn)行裁剪，并將裁剪后的結(jié)果轉(zhuǎn)換為Data URI Scheme，然后將結(jié)果顯示在頁面上。 當(dāng)然，這只是一個簡單的示例，在實(shí)際開發(fā)中還需要考慮到更多的方面，如圖片質(zhì)量、裁剪框位移等等。但是這段代碼提供了一個非常好的起點(diǎn)，幫助我們快速上手實(shí)現(xiàn)HTML5手機(jī)上傳圖片裁剪尺寸。