Кроп как в твитере?

Question

[WingRS]

Может кто подсказать какую библиотеку использоватьи или плагин для такого же "кропа" как кроп кавера в твитере?

Answer 1

[WingRS]

Идеальное решение : scottcheng.github.io/cropit
в конце, если не нужен кроп, просто считываем параметры preview изображения и вставляем потом на кавер

Answer 2

[Alexander Pushkarev]

Как у твиттера не знаю, но по тегам могу сказать, что это может помочь tj-s.ru/tod/crop-on-html5.html

Comments

[WingRS]

да там скорее не кроп, а просто двигать картинку внутри блока а потом задавать background-position:, но я тоже пока не пойму как

Answer 3

[Никита Кит]

а в чём сложность самому написать? у нас блок с overflow:hidden. Внутри картинка. Это во-первых - не делай через background-image - это неправильно. Правильно зарусовать в блок картинку, а на картинку написать несколько коллбэков. 1) ontouchstart - хватать оффсеты картинки и передавать в transform: translate(). 2) По ontouchmove следить на позицией курсора и обновлять transform: translate().
Я писал что-то подобное на одном проекте, постараюсь найти и сделать UPD
Нашёл. Но тут ещё и scale есть, так как я делал приближалку для галереи - оно почти одинаково реализуется. Он тебе не нужен. Я выделнул кусок из своей галереи, так что просто установить чтоб сразу работал не выйдет - переопредели переменные.

var swipeStart	 = 0,
						swipeEnd	 = 0,
						imagePosLeft = 0;
						
						var startCoordX = 0, startCoordY = 0, currentCoordX = 0, currentCoordY = 0, translateX = 0, translateY = 0;
    				
                       
                        var scale = 2.5,
                        translate = { x: 0, y: 0 },
                        startCoords,
                        currentCoords;
                        console.log(image);
                        var updateImgTransform = function (withScale) {
                            var translateX = currentCoords.x - startCoords.x + translate.x,
                            translateY = currentCoords.y - startCoords.y + translate.y;
                            if (withScale) {
                                image.css({"transform":"scale(" + scale + ") translate(" + translateX / scale + "px, " + translateY / scale + "px)"});
                            } else {
                               image.css({"transform":"translate(" + translateX + "px, " + translateY + "px)"});
                            }
                        };
                        
                        var ontouchstart = function (e) {
                            startCoords = currentCoords = {
                                x: e.originalEvent.touches[0].clientX,
                                y: e.originalEvent.touches[0].clientY
                            };
                        
                            updateImgTransform(true);
                            image.on("touchmove", ontouchmove);
                            image.on("touchend", ontouchend);
                        };
                        
                        var ontouchmove = function (e) {
                            image.addClass('looped');
                            currentCoords = {
                                x: e.originalEvent.touches[0].clientX,
                                y: e.originalEvent.touches[0].clientY
                            };
                        
                            updateImgTransform(true);
                        };
                        
                        var ontouchend = function (e) {
                            updateImgTransform(true);
                        
                            translate.x += currentCoords.x - startCoords.x;
                            translate.y += currentCoords.y - startCoords.y;
                        
                            image.off("touchmove", ontouchmove);
                            image.off("touchend", ontouchend);
                        };
                        
                        image.on("touchstart", ontouchstart);

Comments

[WingRS]

не смог разобраться в коде, не совсем понятно

[Никита Кит]

WingRS: да просто свой image в jquery положи и убери аргумент scale. Тут даже ребёнок, 5 минут посидевший за туториалами яваскрипта способен вдуплить процесс. Для тебя это лучший вариант. Думаешь я не искал плагин подобного функционала когда это всё делал?) Искал, как видишь, безуспешно)

Answer 4

[Elvis]

вот еще например Jcrop deepliquid.com/content/Jcrop.html