Обрезка изображения с помощью jQuery

-1

Может ли кто-нибудь объяснить мне или привести меня в порядок, как обрезать картинку с помощью JavaScript/jQuery? Я не ищу плагин, я хочу понять, как это делается и использовать его. Я также не хочу div манипуляции с фоновыми позициями. Я хочу обрезать фактическое изображение. Но только для клиентских целей. Мне не нужен крючок на заднем конце, чтобы сохранить обрезанное изображение.Обрезка изображения с помощью jQuery

источник

2012-06-15 Sven Bieder

Где мой код? Вы еще что-нибудь пробовали? http://meta.stackexchange.com/a/128553/157574 – Sparky

Я ничего не могу попробовать до сих пор, потому что я не нашел точки входа. –

Нежелание использовать плагин не мешает вам смотреть на исходный код плагинов. Таким образом, [это] (http://www.google.com/search?client=safari&rls=ru&q=jquery+crop+image&ie=UTF-8&oe=UTF-8) станет хорошей отправной точкой. – Sparky

jQuery не имеет функции обрезки изображения.

Вы можете, например, использовать элемент холста HTML5 для достижения этого. Вот tutorial:

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
     #myCanvas { 
     border: 1px solid #9C9898; 
     } 
    </style> 
    <script> 
     window.onload = function() { 
     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> 
    </head> 
    <body> 
    <canvas id="myCanvas" width="578" height="400"></canvas> 
    </body> 
</html>

источник

2012-06-15 17:55:29

Если jQuery или даже vanilla js не имеет функции кадрирования, как они делают это в ползунках, которые нарезают изображения на плитки для перехода? –

Эти объекты не обрезают изображение, они отображают только часть изображения, либо устанавливая его как обратное изображение, либо используя положение, либо помещая его в div с переполнением: скрытый и перемещая его внутри этого div. Также может использоваться клип: стиль css. –

Обрезка изображения с помощью jQuery

ответ

Смежные вопросы