All geek questions in one place

Crop and resize images on the client

Is it possible to work with images selected by the client on the client PC without uploading the image to the server.

If so, which web programming language can do this?

+3
source share
4 answers

This can only be done using Flash, Silverlightor custom Plugin/ActiveX, depending on the target browser.

+1
source

You can use HTML5 Canvas, no need to use plugins or such.

Download the image, resize the canvas and draw the image. You can also extract the result as dataUrl.

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body { margin: 0px; padding: 0px; }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

      imageObj.onload = function() {
        // draw cropped image
        var sourceX = 150;
        var sourceY = 0;
        var sourceWidth = 150;
        var sourceHeight = 150;
        var destWidth = sourceWidth;
        var destHeight = sourceHeight;
        var destX = canvas.width / 2 - destWidth / 2;
        var destY = canvas.height / 2 - destHeight / 2;

        context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
    </script>
  </body>
</html>

Credit:

http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/

+7

javascript-, jQuery, MooTools, Prototype script.aculo.us:

http://www.bitrepository.com/image-cropping-with-jquery-mootools-prototype-scriptaculous.html

+1
source

If you are looking for an image using javascript, check out: https://github.com/supnate/icropper . It provides a user interface for cropping, but does not allow cropping an image.

0
source

Source: https://habr.com/ru/post/1754875/

More articles:


All Articles