JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<div class="container"></div>

<input class="url"> <a href="#" class="add">Add Image</a>

CSS

/* Example CSS to make sure computed height/width works */
img {
    width: 300px;
    height: auto;
}

JavaScript

// Reusable Implementation
$(".container").delegate("img","DOMNodeInserted", function(){
    
    // Bind Load
    $(this).bind("load", function(){
        
        // Setup
        var canvas = document.createElement('canvas'),
            ctx = canvas.getContext('2d'),
            height = 0,
            width = 0;
    
        // Store Vales & Draw to Canvas
        width = this.clientWidth;
        height = this.clientHeight;
        
        // Set Canvas Dimension
        canvas.height = height;
        canvas.width = width;
        
        // Draw Image
        ctx.drawImage(this,0,0,width,height);
        
        // Append Canvas
        $(".container").append(canvas); 
        
        // Remove Image
        $(this).remove();
        
    });
});


// Simple bind for demo
$(".add").bind("click", function(e){
   e.preventDefault();
   $("<img src='"+$(".url").val()+"'>").appendTo(".container");
});