JSFiddle - React, Tailwind, and code Playground

by marlanga

HTML

<canvas id="canvas"></canvas>
<br/>
<button id="btn">Pixelar</button>

JavaScript

function pixelar(data,w,h,pixeles){
    return data;
};

var img=new Image();
img.onload=function(){
    var tamanoPixeles=50;
    
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    canvas.width=img.width;
    canvas.height=img.height;
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    
    var btn=document.getElementById("btn");
    btn.onclick=function(){
        btn.setAttribute("disabled","disabled");
        var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        ctx.putImageData(pixelar(imageData,canvas.width,canvas.height,50), 0, 0);
   ...