AnimatedSkinner

by Godlander

HTML

<html>

<div id="dragon" style="position:fixed; width:90%; height:90%; margin:0 3.5%; border:2px dashed grey; color:grey; text-align:center; line-height:80vh;">Drop Skin Here</div>
<div id="page" style="visibility:hidden;">
  <canvas id="canvas"></canvas><img id="img" src="" style="visibility:hidden; display:inline-flex; margin:0; padding:0;">
  <div id="txt" style="display:inline-block; white-space:pre-wrap;">Right click the image &#10;to copy or save the new skin.&#10;
  </div><br>
  <label>First frame duration</label><br>
  <input id="dur1a" type="range" value="80" min="1" max="255" oninput="duration(this,0,0)">
  <input id="dur1" type="number" value="80" min="1" max="255" oninput="duration(this,1,0)"><br>
  <label>Second frame duration</label><br>
  <input id="dur2a" type="range" value="2" min="1" max="255" oninput="duration(this,0,1)">
  <input id="dur2" type="number" value="2" min="1" max="255" oninput="duration(this,1,1)"><br>
  <label>Interpolate<input id="inter" type="checkbox" oninput="draw()"></label>
</div>

<script>
const dragon = document.getElementById('dragon');
const page = document.getElementById('page');
const dur1a = document.getElementById('dur1a');
const dur2a = document.getElementById('dur2a');
const dur1 = document.getElementById('dur1');
const dur2 = document.getElementById('dur2');
const inter = document.getElementById('inter');
const txt = document.getElementById('txt');
const canvas = document.getElementById('canvas');
const img = document.getElementById('img');
var ctx = canvas.getContext("2d");
dragon.ondrop = function(droppedFile) {
  droppedFile.preventDefault();
  const file = droppedFile.dataTransfer.files[0];
  dragon.style.display = "none"; // hides drag and drop
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = async function() {
    img.src = reader.result;
    page.style.visibility = 'visible';
    let a = ctx.getImageData(32,0,1,1).data;
    if (a[3]==234) {
    	dur1a.value = a[0]; dur1.value...

CSS

img {
  image-rendering: crisp-edges;
}