I have a ready-made script for downloading images and creating thumbnails in php. When choosing a picture from a computer, the output is straight to the desired div block.

Need to do this thing:
When clamping and dragging the mouse up and down, the picture changed the background-position, thus the user could select the area that is shown in the div. Of course, you also need to make sure that the picture does not move on a horizontal plane and vertically based on the size of the picture itself, so that the background is not displayed and the picture does not move beyond the div.
JavaScript code + jquery

function filter(id,id2){ var input = $("#image"+id)[0], obl = document.getElementById('bk-cover'+id), fon = document.getElementById(id2), bt = document.getElementById("load-button"+id); if ( input.files && input.files[0] ) { if ( input.files[0].type.match('gif|png|jpg|jpeg') ) { var reader = new FileReader(); reader.onload = function(e) { filesize = input.files[0].size; if(filesize <= 10000000){ obl.style.backgroundImage='url('+ e.target.result +')'; fon.style.backgroundImage='url('+ e.target.result +')'; bt.disabled = false; } } reader.readAsDataURL(input.files[0]); } else alert('Загружать можно только картинки в форматах jpg, png, gif'); } else alert('Что-то пошло не так. Попробуйте снова.'); };

Sample page

    1 answer 1

    Image cropper plugin

    I think it will help.