Send/Recieve Files Online (Recieve Files by Enter 6 Digit Code) 👉

X

Code copied to clipboard!

Data Image URL Generator Script for Blogger

February 02, 2023

<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!

Comment Box

0 Comments