I wonder if there is a way to cut a picture (for example, cut 2 different squares from one photo) on pure javascript ʻe on the client side . I understand that there are libraries, but I just need native js. What technologies and methods to study, what could be the algorithm. Thank you.

PS I will send a picture or several final pictures to the server. Cut to the front.

Pps

Implemented on canvas. Here is an example http://in-web.h1n.ru/projects/photowalls/ . Only front, only js

  • The picture you still do not close. Link to it will remain .. - Drakonoved

3 answers 3

See the source libraries for working with images.

Here , for example, js-cropper, the source shows that the image is first transferred to the canvas, then the canvas is edited, then we save the canvas to a file.

Accordingly, we study work with canvas and FileAPI (for saving to a file).

A simple example of cropping images:

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 = 'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

Taken from here .

    Snippet, in which the picture is divided into left and right side, can be useful to someone

     function putImagePartIntoImg(context, imgDivId, x, y, width, height) { let imageData = context.getImageData(x, y, width, height); let canvasPart = document.createElement('canvas'); let contextPart = canvasPart.getContext('2d'); canvasPart.width = width; canvasPart.height = height; contextPart.putImageData(imageData, 0, 0); document.getElementById(imgDivId).src = canvasPart.toDataURL(); } let image = new Image(); image.crossOrigin = ''; image.onload = function () { let canvas = document.createElement('canvas'); let context = canvas.getContext('2d'); canvas.width = image.width; canvas.height = image.height; context.drawImage(image, 0, 0); document.getElementById('source').src = canvas.toDataURL(); putImagePartIntoImg(context, 'left', 0, 0, image.width / 2, image.height); putImagePartIntoImg(context, 'right', image.width / 2, 0, image.width / 2, image.height); }; image.src = 'https://i.imgur.com/n1iS0S6s.png'; 
     <p>Исходное изображение:</p> <img id="source"> <p>Левая часть:</p> <img id="left"> <p>Правая часть:</p> <img id="right">

      Again, you did not write, but what do you want to do with the picture after you have cut it.

      Suppose you just want to show 2 halves.

      Then the task is very simple and done by means of css. Let's say there is a picture with icons (for example, 2 pieces one under the other). And you need to bring them to different places.

      We do it with the help of background-position (as if we are starting to draw half the picture above):

       <style> #foto-1 { background-image: url(photo.png); width: 100px; height: 100px; overflow: hidden; } #foto-2 { background-image: url(photo.png); background-position: 0 -100px; width: 100px; height: 100px; overflow: hidden; } </style> <div id="foto-1"></div> ... <div id="foto-2"></div>

      All these properties (background-position, width, etc.) instead of css can be set using javascript. There is nothing complicated.

      If you want to save on the server, then see the solution from AirCrisp. Although I would transfer the image completely and cut it with the server, so more image formats can be supported and not tied to the browser.