<style>
.centerer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
}
canvas {
display: block;
box-shadow: 0 0 1px 0 black inset;
margin: 20px auto;
}
input {
text-align: center;
background-color: #ccc;
color: black;
box-shadow: 0 0 1px 0 black inset;
}
textarea {
width: 100%;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
<body translate="no" >
<main class="centerer">
<input type="file" id="input" />
<canvas id="canvas"></canvas>
<textarea id="textarea"></textarea>
</main>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
<script id="rendered-js" >
// Resources:
// - https://stackoverflow.com/questions/19262141/resize-image-with-javascript-canvas-smoothly
// - https://stackoverflow.com/questions/5802580/html-input-type-file-get-the-image-before-submitting-the-form
// - http://entropymine.com/resamplescope/notes/browsers/
const $input = document.getElementById('input');
const $canvas = document.getElementById('canvas');
const $textarea = document.getElementById('textarea');
const ctx = $canvas.getContext("2d");
const reader = new FileReader();
const image = new Image();
const size = 120;
$input.addEventListener('change', event => {
const input = event.target;
if (input.files && input.files[0]) {
reader.readAsDataURL(input.files[0]);
}
});
reader.onload = event => {
image.src = event.target.result;
};
image.onload = () => {
// set size proportional to image
$canvas.width = size;
$canvas.height = $canvas.width * (image.height / image.width);
const oc = document.createElement('canvas');
const octx = oc.getContext('2d');
oc.width = $canvas.width;
oc.height = $canvas.height;
octx.drawImage(image, 0, 0, oc.width, oc.height);
ctx.drawImage(oc, 0, 0, oc.width, oc.height, 0, 0, oc.width, oc.height);
const jpegUrl = $canvas.toDataURL('image/jpeg');
$textarea.innerHTML = jpegUrl;
};
//# sourceURL=pen.js
</script>
Contact Us!
0 Comments
type your comment...