0

Is it possible to download image from url and physically resize image using jquery without using any server side script ? I have make lot of search but did not find any solution.

Vipin Singh
  • 543
  • 2
  • 8
  • 24
  • What does "physically" resize image mean? Where do you expect the output of such a process to go, to the screen, to a local file, or back to the server? – nnnnnn Jul 22 '16 at 05:57
  • 2
    Possible duplicate of [Jquery resizing image](http://stackoverflow.com/questions/1143517/jquery-resizing-image) – Abhishek Jul 22 '16 at 05:58
  • 1
    "physically" resize means that i want to download image locally and want to create new image with lesser in size. e.g if i have download image of size 1 MB then i want to reduce its size to 200kb. – Vipin Singh Jul 22 '16 at 06:06
  • 1
    @abhisek i don't want to change dimension of image So that url is not solution of my problem – Vipin Singh Jul 22 '16 at 06:15

1 Answers1

1

If you need for download you can use canvas like this

html

<canvas id="c" width="200" height="150"></canvas>
<a id="download">Download as image</a>

javascript

// Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
// Create an image element
var img = document.createElement('IMG');
// Specify the src to load the image
img.setAttribute('crossOrigin', 'anonymous');
img.src = "http://i.imgur.com/adB2oag.png";
// When the image is loaded, draw it
img.onload = function () {
    ctx.drawImage(img, 0, 0, img.width,    img.height, 0, 0, canvas.width, canvas.height );
}

function downloadCanvas(link, canvasId, filename) {
    link.href = document.getElementById(canvasId).toDataURL();
    link.download = filename;
}

document.getElementById('download').addEventListener('click', function() {
    downloadCanvas(this, 'c', 'test.png');
}, false);

put image to canvas and size image as you like, and download canvas as image

you can try from this jsFiddle

Pajar Fathurrahman
  • 991
  • 1
  • 9
  • 19