JSFiddle - React, Tailwind, and code Playground

by gamealchemist

HTML

<img alt=""...

CSS

img { display: block; float: left;}

JavaScript

var img = document.getElementsByTagName('img')[0];
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;

canvas.getContext('2d').drawImage(img, 0, 0);

var resulting_canvas = downScaleCanvas(canvas, 0.8);
var resulting_img = document.createElement('img');

resulting_img.src = resulting_canvas.toDataURL();
console.log(resulting_img)
document.body.appendChild(resulting_img);


// scales the canvas by (float) scale < 1
// returns a new canvas containing the scaled image.
function downScaleCanvas(cv, scale) {
    if (!(scale < 1) || !(scale > 0)) throw ('scale must be a positive number <1 ');
    var sqScale = scale * scale; // square scale = area of source pixel within target
    var sw = cv.width; // source image width
    var sh = cv.height; // source image height
    var tw = Math.ceil(sw * scale); // target image width
    var th = Math.ceil(sh * scale); // target image height
    var sx = 0, sy = 0, sIndex = 0; // source x,y, index within source array
    var tx = 0, ty = 0, yIndex = 0, tIndex = 0; // target x,y, x,y index within target array
    var tX = 0, tY = 0; // rounded tx, ty
    var w = 0, nw = 0, wx = 0, nwx = 0, wy = 0, nwy = 0; // weight / next weight x / y
    // weight is weight of current source point within target.
    // next weight is weight of current source point within next target's point.
    var crossX = false; // does scaled px cross its current px right border ?
    var crossY = false; // does scaled px cross its current px bottom border ?
    var sBuffer = cv.getContext('2d').
    getImageData(0, 0, sw, sh).data; // source buffer 8 bit rgba
    var tBuffer = new Float32Array(4 * sw * sh); // target buffer Float32 rgb
    var sR = 0, sG = 0,  sB = 0; // source's current point r,g,b
    // untested !
    var sA = 0;  //source alpha    

    for (sy = 0; sy < sh; sy++) {
        ty = sy * scale; // y src position within target
        tY = 0 | ty;     // rounded : target pixel's y
       ...