Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<input type="file" onchange="previewFile();"><br> <img src="">
HTML
Autoformát
Standardní režim
Mobilní zobrazení
CSS
Autoformát
CSS reset
Až na konci
function resizeImage(dataUri, targetWidth, callback) { var image = new Image(); image.src = dataUri; image.onload = function() { var canvas = document.createElement("canvas"), ctx = canvas.getContext("2d"); canvas.width = targetWidth; canvas.height = (targetWidth / image.width) * image.height; ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height); callback(canvas.toDataURL("image/jpeg", 0.2)); } } function previewFile() { var preview = document.querySelector('img'); var file = document.querySelector('input[type=file]').files[0]; var reader = new FileReader(); reader.addEventListener("load", function () { resizeImage(reader.result, 440, function(result) { preview.src = result; }) }, false); if (file) { reader.readAsDataURL(file); } }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>