Maison >interface Web >js tutoriel >Prétraitement du téléchargement d'images HTML5
HTML5 Prétraitement du téléchargement d'images, un plug-in qui n'a que HTML5 page de téléchargement frontale sans traitement en arrière-plan, vous pouvez l'utiliser directement ~ Oui pour HTML5Les amis intéressés peuvent le rechercher.
Le style est un peu moche, mais ça va
Code :
<!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>Ce qui précède est une image HTML5 Téléchargez le prétraitement, vous pouvez la modifier et l'utiliser directement, ou vous pouvez l'étudier. Pour plus d'articles et de codes sources, veuillez vous rendre sur le Site Web PHP chinois et recherchez
<.>Recommandations associées :
Utilisez HTML5 pour créer une fonction de déverrouillage par gestes à l'écran
Le balises HTML5 les plus complètes
Une brève discussion sur le développement futur de HTML5
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!