No sé cuantas veces he tenido que soportar una presentación PowerPoint con imágenes estiradas o apachurradas, completamente fuera de su proporción original. Este crimen también se hace con el texto, seguramente habrás visto un anuncio de este tipo:

serenta.png

Es mejor usar tipografía condensada en lugar de cambiar la proporción natural de la palabra, de otra forma se dificulta la lectura. Para corregir este problema siempre presiona shift al transformar el tamaño de una imagen o texto.

Claro que si la imagen ya está distorsionada tenemos que recuperar la proporción original, y eso sólo se logra con un buen ojo. Este es un jueguito para practicarlo.

Te falta completar 8 imágenes para obtener una calificación

var dom = {};

var stages = [ { name: “Aubrey Hepburn”, url: “https://cdn.method.ac/duopixel/images/hepburn.jpg”, width: 400, height: 360 }, { name: “Stretch”, url: “https://cdn.method.ac/duopixel/images/stretch.png”, width: 460, height: 280 }, { name: “Mountain”, url: “https://cdn.method.ac/duopixel/images/mountain.jpg”, width: 338, height: 390 }, { name: “Grumpy Cat”, url: “https://cdn.method.ac/duopixel/images/grumpy.jpg”, width: 400, height: 300 }, { name: “Snail”, url: “https://cdn.method.ac/duopixel/images/snail.jpg”, width: 400, height: 218 }, { name: “Naomi”, url: “https://cdn.method.ac/duopixel/images/naomi.jpg”, width: 305, height: 400 }, { name: “Howdy”, url: “https://cdn.method.ac/duopixel/images/howdy.png”, width: 460, height: 280 }, { name: “Pig”, url: “https://cdn.method.ac/duopixel/images/pig.jpg”, width: 500, height: 333 }, ];

dom.imageCount = document.getElementById(“imageCount”); dom.stage = document.getElementById(“stage”) || createAndInsertEl(“div”, {id: “stage”}, document.querySelector(“.entry_content”)); dom.grade = document.getElementById(“grade”);

dom.stages = stages.map(function(stage, i){

var padding = 10;

var el = createEl("div", {
  "class": "stage",
  "style": "height:" + (stage.height+(padding*2)) + "px"
});
var isWide = Math.random()*2 > 1
var max = isWide ? Math.min(stage.width * 2, 610) : stage.width * .75;
var min = isWide ? stage.width * 1.25 : 200;
var randomWidth = (Math.random()*(max - min) + min);

var image = createEl("img", {
  "src": stage.url,
  "style": "left:" + (610/2 - stage.width/2) + "px;\
            width: " + randomWidth + "px;\
            height: " + stage.height + "px;",
  "data-width": stage.width
});

var done = createEl("div", {
  "class": "done"
});

image.addEventListener("dragstart", function(e){e.preventDefault(); return false; })

el.appendChild(image);
dom.stage.appendChild(el);
leftControl  = createEl("div", {"class": "control left"});
rightControl = createEl("div", {"class": "control right"});
leftControl.style.left =   dom.stage.offsetWidth/2 - randomWidth/2 + "px";
rightControl.style.left = (dom.stage.offsetWidth/2 - randomWidth/2 + randomWidth) + "px";

resizer(leftControl);
resizer(rightControl);

[leftControl, rightControl].forEach(function(control){
  control.addEventListener("mouseenter", function(e){
    e.target.parentNode.classList.add("hovered");
  });
  control.addEventListener("mouseleave", function(e){
    e.target.parentNode.classList.remove("hovered");
  });
});

done.addEventListener("click", gradeStage);
done.addEventListener("touchend", gradeStage);

el.appendChild(done);
el.appendChild(leftControl);
el.appendChild(rightControl);

return el;

});

dom.imageCount.textContent = dom.stages.length;

function gradeStage(e){ var parent = e.target.parentNode; var image = parent.querySelector(“img”); var realWidth = parseInt(image.getAttribute(“data-width”), 10); var currentWidth = image.offsetWidth; var currentHeight = image.offsetHeight; var difference = Math.round(Math.abs(realWidth - currentWidth), 0); var score = 100-Math.round(difference/realWidth*100, 0); score = Math.max(0, score); var rectEl = createAndInsertEl(“div”, { “class”: “real-size”, “style”: “width:” + currentWidth + “px;
height:” + currentHeight + “px;
left:” + image.offsetLeft + “px” }, parent);

var scoreEl = createAndInsertEl("div", {
  "class": "score",
  "style": "top:" + parent.querySelector(".done").offsetTop + "px; \
            left:"   + parent.querySelector(".done").offsetLeft + "px"
}, parent);

scoreEl.textContent = score;
var currentlyGraded = parseInt(dom.imageCount.textContent, 10)-1;
if (currentlyGraded < 1) {
  var finalGrade = _a(document.querySelectorAll(".score"))
    .map(function(el){ return parseInt(el.textContent, 10)})
    .reduce(function(a, b){ return a + b });
  finalGrade /= dom.stages.length;
  dom.grade.innerHTML = "Tu calificación promedio ha sido de <span id='final'>" + Math.round(finalGrade, 0) + "</span>, compártelo en <a href='#comenta'>los comentarios</a> &darr;";
  document.getElementById("comment-text").value = "Mi calificación fue " + Math.round(finalGrade, 0) + "%. \n\n";
}
else {
  dom.imageCount.textContent = currentlyGraded;
}
parent.classList.add("scored");
image.style.width = realWidth + "px";
parent.querySelector(".done");

}

function hover(e) { e.target.parent.classList }

function resizer(el) { el.addEventListener(“mousedown”, start); el.addEventListener(“touchstart”, start); }

window.addEventListener(“mouseup”, end); window.addEventListener(“mousemove”, move); window.addEventListener(“touchend”, end); window.addEventListener(“touchmove”, move);

function end(e) { e.preventDefault(); if (e.touches) e = e.touches[0]; if (!dragging) return; var isLeft = dragging.target.classList.contains(“left”);

var sibling = isLeft ? dragging.leftControl : dragging.rightControl;
var offset = {left: sibling.offsetLeft, top: sibling.offsetTop};
var check = dragging.parent.querySelector(".done");
check.style.left = offset.left + "px";
check.style.top = (offset.top+50) + "px";
dragging.parent.classList.remove("dragging");
check.classList.add("enabled");
dragging = false;

}

function start(e) { e.preventDefault(); if (e.touches) e = e.touches[0]; var parent = e.target.parentNode; var el = e.target.parentNode.querySelector(“img”); var ol = e.target.offsetLeft;

var offsetX = ol + (ol-e.pageX);
var width = el.offsetWidth;
parent.querySelector(".done").classList.remove("enabled");
return dragging = {
  target: e.target,
  parent: parent,
  leftControl: parent.querySelector(".control.left"),
  rightControl: parent.querySelector(".control.right"),
  ox: e.pageX,
  offsetX: e.pageX-e.target.offsetLeft-30,
  img: el,
  width: width,
  newWidth: 0
};

}

function move(e) { if (!dragging) return; e.preventDefault(); if (e.touches) e = e.touches[0]; dragging.parent.classList.add(“dragging”) var isLeft = dragging.target.classList.contains(“left”); var dx = dragging.dx = dragging.ox - e.pageX; dragging.newWidth = dragging.width + dx * (isLeft ? 2 : -2); if (dragging.newWidth < 100 || dragging.newWidth > 610) return; var x = e.pageX-dragging.offsetX-10; dragging.leftControl.style.left = (isLeft ? x : mirror(x)) + “px”; dragging.rightControl.style.left = (isLeft ? mirror(x) : x) + “px”; dragging.img.style.left = (isLeft ? x : mirror(x)) + “px”; dragging.img.style.width = dragging.newWidth + “px”; function mirror(d, direction) { return 610 - d; } }

function createEl(elName, attrs) { var isSVG = “rect circle text”.indexOf(elName) != -1; var xmlns = “http://www.w3.org/2000/svg”; var el = isSVG ? document.createElementNS(xmlns, elName) : document.createElement(elName); for (attr in attrs) { el.setAttribute(attr, attrs[attr]); } return el; }

function _a(nl) { return Array.prototype.slice.call(nl, 0); }

function createAndInsertEl(elName, attrs, place) { var el = createEl(elName, attrs); // todo correctly var parent = place || document; parent.appendChild(el); return el; }

})();