How to resize an image using javascript / jquery? Once I click on the image and drag it up from lower right corner , it should automatically resize

Question

I am developing an application in d3.js where I am inserting an image and once I click on the inserted image,it should provide me with an interface to resize it.

Below code appends the uploaded image to a rectangle which is a node. When I click on the image, the resize_image() function is invoked. data[] is an array where I store the details of a node like x and y position etc.

function imageIsLoaded(e) 
{

     id= d3.select('.selected').select('.rect').attr('id');
     a = id.replace("node", "");
     x= data[a].x;
     y= data[a].y;

     d3.select(".selected.state")
         .append("image")
         .attr('class','uploaded_image')
         .attr('id','image'+a)
         .attr('x',x)
         .attr('y',y)
         .attr('height','20')
         .attr('width','20')
         .attr('xlink:href',e.target.result)
         .on('click',function(){  

              d3.selectAll(".selected").classed("selected",false);

              d3.select(this).style("opacity","0.5");
              resize_image(a);

            });
 }

I don't know how to resize this image. Please could somebody help me with this? Or atleast could somebody provide me a function that resizes a given image the way mentioned above using javascript/jquery ?