<!DOCTYPE html> | |
<section> | |
<input type="file" id="input" /> | |
<input type="number" id="maxWidth" /> × <input type="number" id="maxHeight" /> | |
<button onclick="convert()">Convert</button> | |
</section> | |
<section><pre id="output"></pre></section> | |
<section><img id="outputImage"></pre></section> | |
<script type="application/javascript"> | |
function convert() { | |
var image = new Image; | |
image.onload = function () { | |
var width = image.width; | |
var height = image.height; | |
var maxWidth = parseInt(document.getElementById("maxWidth").value, 10) || Infinity; | |
var maxHeight = parseInt(document.getElementById("maxHeight").value, 10) || Infinity; | |
var scale = Math.max(1, height / maxHeight, width / maxWidth); | |
width /= scale; | |
height /= scale; | |
var canvas = document.createElement("canvas"); | |
canvas.width = width; | |
canvas.height = height; | |
canvas.getContext("2d").drawImage(image, 0, 0, width, height); | |
URL.revokeObjectURL(image.src); | |
var result = canvas.toDataURL("image/png"); | |
document.getElementById("output").textContent = result; | |
document.getElementById("outputImage").src = result; | |
}; | |
image.onerror = alert.bind(window, "Not an image!"); | |
image.src = URL.createObjectURL(document.getElementById("input").files[0]); | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment