HTML5이미지 업로드 전처리, 백그라운드 처리 없이 HTML5프런트엔드 업로드 페이지만 있는 플러그인으로 바로 사용할 수 있어요~ HTML5에 관심 있는 친구들이 공부할 수 있어요.
스타일이 좀 못생겼지만 괜찮아요
코드:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PHP中文网</title>
</head>
<body>
<script>
window.onload = function () {
var input = document.createElement('input');
input.type = 'file';
input.addEventListener('change', function () {
var file = this.files[0];
var img = document.createElement('img');
img.src = window.URL.createObjectURL(file);
img.onload = function () {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var MAX_WIDTH = 150;
var MAX_HEIGHT = 200;
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
document.body.appendChild(canvas);
var btn = document.createElement('button');
btn.innerHTML = '上传';
document.body.appendChild(btn);
btn.addEventListener('click', function() {
/*
toBlob的兼容性问题使用
https://github.com/blueimp/JavaScript-Canvas-to-Blob 这个库，就可以解决
*/
canvas.toBlob(function(blob) {
var form = new FormData();
form.append('file', blob);
fetch('/api/upload', {method: 'POST', body: form});
});
}, false);
};
// document.body.appendChild(img); 原始图片是不用展示出来的
}, false);
document.body.appendChild(input);
};
</script>
</body>
</html>위는 HTML5 이미지 업로드 전처리를 직접 수정해서 사용해도 되고, 더 자세히 공부해도 됩니다. 기사 및 소스 코드는 PHP 중국어 웹사이트검색
을 참조하세요. 관련 권장 사항:
HTML5를 사용하여 화면 동작 잠금 해제 기능 만들기
의 향후 개발에 대해 간략하게 이야기합니다.위 내용은 HTML5 이미지 업로드 전처리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!