Обрезать и изменить размер изображения на стороне клиента - PullRequest
3 голосов
/ 15 июля 2010

Возможно ли работать с выбранными клиентом изображениями на клиентском ПК без загрузки изображения на сервер.

Если да, то на каком языке веб-программирования это возможно?

Ответы [ 4 ]

7 голосов
/ 08 сентября 2011

Вы можете использовать HTML5 Canvas, нет необходимости использовать плагины или тому подобное.

Загрузите изображение, измените размер холста и нарисуйте изображение. Также возможно извлечь результат как 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>

Весь кредит поступает на:

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

1 голос
/ 15 июля 2010

Это также можно сделать с помощью библиотек javascript, таких как jQuery, MooTools, Prototype и script.aculo.us:

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

1 голос
/ 15 июля 2010

Это можно сделать только с помощью Flash, Silverlight или пользовательского Plugin/ActiveX в зависимости от целевого браузера.

0 голосов
/ 03 декабря 2013

Если вы ищете обрезку изображений по javascript, взгляните на: https://github.com/supnate/icropper. Предоставляет пользовательский интерфейс для обрезки, но не реальное обрезание изображения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...