ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / перемещение, вращение, ресайз, обрезка - совместить, нужна помощь
2 сообщений из 2, страница 1 из 1
перемещение, вращение, ресайз, обрезка - совместить, нужна помощь
    #38843332
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
есть код для создания превьюшек, в процессе написания, картинку перемещае,т крутит, обрезает...
задача такая загрузить картинку , создать превью (зона для превью в центре в виде прямоугольника. перемещая картинку, изменяя её размер, поворачивая - в зоне выделения поместить наиболее информативную часть картинки. Добившись желаемого вырезать. и получить превьюшку.
код всё это делает (ресайзит не правильно, но это пока заглушка)
проблема в том что при повороте и последующем перемещении картинка скачет...
надо правильно устанавливать transform-origin, но не могу понять как...help me!!!
 
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="js/libs/jquery/jquery.js" type="text/javascript"></script>
        <script src="js/libs/jqueryui/jquery-ui.js" type="text/javascript"></script>
        <script src="js/jquery.mousewheel.js" type="text/javascript"></script><!--   http://webext.ru/fix-mousewheel/-->
        <!--<link href="CSS/pic.css" rel="stylesheet" type="text/css"/>-->

        <style>
            #div1{
                position: absolute;
                top: 10px;
                left: 15%;
                width: 700px;
                height: 700px;
                border: 1px solid #c0c0c0;
                box-sizing: border-box;
                overflow: hidden;
            }

            #div2{
                position: absolute;
                background: aqua;
            }
            #div2 img{
                width: 100%;
                height: 100%;
            }
            #rotate{
                background: #ffffff;
                z-index: 10;
                height: 700px;
                -webkit-appearance: slider-vertical; 
            }
            #crop{
                pointer-events:none;
                background: transparent;
                position: absolute;
                border: 1px #000156 solid;
                box-shadow: 0 0 0 500px rgba(0, 0, 0, 0.3);
                width: 100px;
                height: 100px;

                top: calc(50% - 50px);
                left: calc(50% - 50px);
                z-index: 100;
            }

        </style>
    </head>
    <body>
        <div id="div1">
            <div id="crop"></div>
            <div id="div2"> 
                <img id="img" src="pic/up.png" alt=""/>
            </div>
        </div>
        <div>
            <input id="rotate" type="range" value="0" min="-180" max="180" step="1">
        </div>
        <input type="file" id="file" >
        <button id="crop_button">crop</button>
        <div class="cropped"></div>
        <script>
            var dx = 0;
            var dy = 0;
            var xb;
            var yb;
            function tr_or() {
                var Cy = $('#div1').height() / 2;
                var Cx = $('#div1').width() / 2;
//                var hp = $('#div2').height() / 2;
//                var wp = $('#div2').width() / 2;
                var xx = 0;
                var yy = 0;
                if (!isNaN(parseFloat($('#div2').css('left'))))
                    xx = parseFloat($('#div2').css('left'));
                if (!isNaN(parseFloat($('#div2').css('top'))))
                    yy = parseFloat($('#div2').css('top'));
                dx = parseFloat(Cx) - xx;
                dy = parseFloat(Cy) - yy;
                var s = '' + dx + 'px' + ' ' + dy + 'px';
                $('#img').css('transform-origin', s);
                console.log($('#img').css('transform-origin'));
            }

            <%-- назначение пермещения --%>
            $(document).ready(function () {
                $('#div2').draggable({
                    stop: function (event, ui) {
                        tr_or();
                    }
                });
            });
            var t = 0;

            <%-- ресайз пока заглушка --%>
            $('#div1').mousewheel(function (event) {
                var movement = 0;
                var d = 0;
                var dir = event.originalEvent.wheelDelta > 0 ? true : false;
                var height = parseInt($('#div2').css('height'), 10);
                var width = parseInt($('#div2').css('width'), 10);
                var top = parseInt($('#div2').css('top'), 10);
                var left = parseInt($('#div2').css('left'), 10);
                if (dir === true) {
                    movement = +2;
                    d = -1;

                } else {
                    movement = -2;
                    d = +1;
                }
                $('#div2').css('top', top + d);
                $('#div2').css('left', left + d);
                $('#div2').css('height', height + movement);
                $('#div2').css('width', width + movement);
            });

            <%-- поворот ползунком --%>
            $(document).on('input', '#rotate', function () {
                tr_or();
                t = $('#rotate').val();
                $('#img').css('transform', 'rotate(' + t + 'deg)');
            });

            <%-- поворот колесом мыши --%>
            $('#rotate').mousewheel(function (event) {
                var t = parseInt($('#rotate').val());
                var d = 0;
                var dir = event.originalEvent.wheelDelta > 0 ? true : false;
                if (dir === true) {
                    d = -1;
                } else {
                    d = +1;
                }
                $('#rotate').val(t + d);
                $('#img').css('transform', 'rotate(' + t + 'deg)');
                tr_or();
            });

            <%-- загрузка файла --%>
            document.querySelector('#file').addEventListener('change', function () {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#img').attr('src', e.target.result);
                    $('#div2').css('width', $('#div1').width());
                    tr_or();
                };
                reader.readAsDataURL(this.files[0]);
                this.files = [];
            });



            <%-- обрезка --%>
            $(document).on('click', '#crop_button', function () {
                var dy = parseInt($('#crop').css('top')) - parseInt($('#div2').css('top'));
                var dx = parseInt($('#crop').css('left')) - parseInt($('#div2').css('left'));
                console.log($('#crop').css('top') + '   ' + $('#div2').css('top'));
                canvas = document.createElement("canvas");
                canvas.height = 150;
                canvas.width = 150;
                var context = canvas.getContext("2d");
                var pic = new Image();
                pic.src = $('#img').attr('src');
                var H = parseFloat(pic.height);
                var h = parseFloat($('#img').height());
                var y = dy * H / h;
                var W = parseFloat(pic.width);
                var w = parseFloat($('#img').width());
                var x = dx * W / w;
                context.drawImage(pic, x, y, 150, 150, 0, 0, 150, 150);
                pic.src = canvas.toDataURL("image/jpeg");
                canvas.height = 150;
                canvas.width = 150;
                context.translate(75, 75);
                context.rotate((parseInt($('#rotate').val()) * Math.PI) / 180);
                context.drawImage(pic, -75, -75);
                pic.src = canvas.toDataURL("image/jpeg");
                canvas.height = 100;
                canvas.width = 100;
                context.drawImage(pic, 25, 25, 100, 100, 0, 0, 100, 100);
//              var  imageData = canvas.toDataURL("image/jpeg");
                document.querySelector('.cropped').innerHTML += '<img id="cc1" src="' + canvas.toDataURL("image/jpeg") + '">';
            });
        </script>
    </body>
</html>


кросбраузерность не нужна - хром, мозилла(даже одного хрома достаточно)
ползунок справа - поворачивает(если мышь на нем- поворачивать можно колесом)
при мыше на основной зоне - ресайз
нажатие на картинке - перемещение.
...
Рейтинг: 0 / 0
25.12.2014, 20:48
| Ответить | Цитировать | Написать  
перемещение, вращение, ресайз, обрезка - совместить, нужна помощь
    #38849913
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
сделал, всё работает
 
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="js/libs/jquery/jquery.js" type="text/javascript"></script>
        <script src="js/libs/jqueryui/jquery-ui.js" type="text/javascript"></script>
        <script src="js/jquery.mousewheel.js" type="text/javascript"></script><!--   http://webext.ru/fix-mousewheel/-->
        <!--<link href="CSS/pic.css" rel="stylesheet" type="text/css"/>-->
        <style>
            #div1{
                position: absolute;
                top: 10px;
                left: 15%;
                width: 700px;
                height: 700px;
                border: 1px solid #c0c0c0;
                box-sizing: border-box;
                overflow: hidden;
            }
            #div1 img{
                position: relative;
            }
            #rotate{
                background: #ffffff;
                z-index: 10;
                height: 700px;
                -webkit-appearance: slider-vertical; 
            }
            #crop{
                pointer-events:none;
                background: transparent;
                position: absolute;
                border: 1px #000156 solid;
                z-index: 400;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="crop"></div>
            <img id="img" src="" alt=""/>
        </div>
        <div>
            <input id="rotate" type="range" value="0" min="-180" max="180" step="1">
        </div>
        <input type="file" id="file" >
        <button id="crop_button">crop</button>
        <div class="cropped"></div>
        <script>
            var matrix = new Array(6);
            var current_img = {
                top: 0,
                left: 0,
                x: 0,
                y: 0,
                height: 0,
                width: 0
            };
            var new_img = {
                top: 0,
                left: 0,
                x: 0,
                y: 0,
                height: 0,
                width: 0
            };
            var img = {
                height: 0,
                width: 0,
                rotate: 0,
                scale: 1
            };
            var crop = {
                height: 150,
                width: 100
            };
            var Cy = $('#div1').height() / 2;
            var Cx = $('#div1').width() / 2;
            $('#crop').css({
                height: crop.height,
                width: crop.width,
                top: Cy - crop.height / 2,
                left: Cx - crop.width / 2
            });


            var deg_to_rad = Math.PI / 180;
            var rad_to_deg = 180 / Math.PI;

            function tr_or() {
                var dx = new_img.left - current_img.left;
                var dy = new_img.top - current_img.top;
                var beta = Math.atan2(dx, dy);
                var alfa = img.rotate * deg_to_rad;
                var len = (Math.sqrt(dx * dx + dy * dy));
                new_img.x = current_img.x - len * Math.sin(beta + (alfa));
                new_img.y = current_img.y - len * Math.cos(beta + (alfa));
                new_img.top = (Cy - new_img.y);
                new_img.left = (Cx - new_img.x);
                set_css_img();
                current_img.x = new_img.x;
                current_img.y = new_img.y;
            }

            <%-- назначение пермещения --%>
            $(document).ready(function () {
                $('#img').draggable({
                    stop: function (event, ui) {
                        current_img.top = ui.originalPosition.top;
                        current_img.left = ui.originalPosition.left;
                        new_img.top = ui.position.top;
                        new_img.left = ui.position.left;
                        tr_or();
                    }
                });
            });
            var t = 0;

            <%-- ресайз --%>
            $('#div1').mousewheel(function (event) {

                img.scale += event.originalEvent.wheelDelta > 0 ? 0.01 : -0.01;

                var new_h = img.height * img.scale;
                new_img.x = new_img.x * new_h / new_img.height;
                new_img.height = new_h;

                var new_w = img.width * img.scale;
                new_img.y = new_img.y * new_w / new_img.width;
                new_img.width = new_w;

                current_img.x = new_img.x;
                current_img.y = new_img.y;
                new_img.top = (Cy - new_img.y);
                console.log(Cy + '   ' + new_img.y);
                new_img.left = (Cx - new_img.x);
                set_css_img();
            });

            function set_css_img() {
                var ang = -1 * img.rotate * deg_to_rad;
                matrix[0] = Math.cos(ang);
                matrix[1] = -1 * Math.sin(ang);
                matrix[2] = Math.sin(ang);
                matrix[3] = Math.cos(ang);
                matrix[4] = 0;
                matrix[5] = 0;

                $('#img').css({
                    'width': (img.width * img.scale),
                    'height': (img.height * img.scale),
                    'transform-origin': new_img.x + 'px ' + new_img.y + 'px',
                    'top': new_img.top,
                    'left': new_img.left,
                    'transform': 'matrix(' + matrix.join(',') + ')'
                });
            }

            <%-- поворот ползунком --%>
            $(document).on('input', '#rotate', function () {
                img.rotate = parseInt($('#rotate').val());
                set_css_img();
            });

            <%-- поворот колесом мыши --%>
            $('#rotate').mousewheel(function (event) {
                img.rotate = parseInt($('#rotate').val());
                img.rotate += event.originalEvent.wheelDelta > 0 ? 1 : -1;
                $('#rotate').val(img.rotate);
                set_css_img();
            });

            <%-- загрузка файла --%>
            document.querySelector('#file').addEventListener('change', function () {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#img').attr('src', e.target.result);
                    img.height = $('#img').height();
                    img.width = $('#img').width();
                    current_img.height = $('#img').height();
                    current_img.width = $('#img').width();
                    new_img.height = $('#img').height();
                    new_img.width = $('#img').width();
                    current_img.top = 0;
                    current_img.left = 0;
                    new_img.top = 0;
                    new_img.left = 0;
                    current_img.x = $('#div1').width() / 2;
                    current_img.y = $('#div1').height() / 2;
                    new_img.x = $('#div1').width() / 2;
                    new_img.y = $('#div1').height() / 2;

                    img.rotate = 0;
                    tr_or();
                };
                reader.readAsDataURL(this.files[0]);
                this.files = [];
            });



            <%-- обрезка --%>
            $(document).on('click', '#crop_button', function () {
                canvas = document.createElement("canvas");
                var context = canvas.getContext("2d");
                
                var pic = new Image();
                pic.src = $('#img').attr('src');
                var sq = Math.sqrt(crop.width * crop.width + crop.height * crop.height);
                var k = crop.width / crop.height;
                var wc, hc;
                if (k >= 1) {
                    wc = sq;
                    hc = sq / k;
                } else {
                    wc = sq;
                    hc = sq / k;
                }

                var x = new_img.x * pic.width / new_img.width - wc / 2 / img.scale;
                var y = new_img.y * pic.height / new_img.height - hc / 2 / img.scale;
                var w = wc / img.scale;
                var h = hc / img.scale;

                canvas.height = hc;
                canvas.width = wc;
                context.fillStyle='#ffffff';
                context.fillRect(0,0,wc,hc);
                context.drawImage(pic, x, y, w, h, 0, 0, wc, hc);
                pic.src = canvas.toDataURL("image/jpeg");
                context.translate(wc / 2, hc / 2);
                context.rotate((img.rotate * Math.PI) / 180);
                context.drawImage(pic, -wc / 2, -hc / 2);
                pic.src = canvas.toDataURL("image/jpeg");
                canvas.height = crop.height;
                canvas.width = crop.width;
                x = (wc - crop.width) / 2;
                y = (hc - crop.height) / 2;
                
                context.drawImage(pic, x, y, crop.width, crop.height, 0, 0, crop.width, crop.height);
                document.querySelector('.cropped').innerHTML += '<img id="cc1" src="' + canvas.toDataURL("image/jpeg") + '">';
            });
        </script>
    </body>
</html>



есть пожелания по улучшению цветопередачи для обработанного фрагмента, это что-то с canvas надо подправить...
есть знатоки этого?
...
Рейтинг: 0 / 0
07.01.2015, 22:34
| Ответить | Цитировать | Написать  
2 сообщений из 2, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / перемещение, вращение, ресайз, обрезка - совместить, нужна помощь
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&tid=1446382]:
 0ms
get settings:
 6ms
get forum list:
 17ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 193ms
get topic data:
 6ms
get forum data:
 2ms
get page messages:
 22ms
get tp. blocked users:
 1ms
others: 215ms
total:  466ms
созд. / загр.: 466ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]