Показать сообщение отдельно
  #3 (permalink)  
Старый 10.01.2015, 22:02
Интересующийся
Отправить личное сообщение для assan Посмотреть профиль Найти все сообщения от assan
 
Регистрация: 13.07.2010
Сообщений: 27

код
картинка масштабируется, поворачивается, позиционируется таким образом чтоб нужный её фрагмент был вписан в рамку (70px*70px)
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", 1);
                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", 1);
                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 += '<div ><img id="' + crop.id + '" src="' + canvas.toDataURL("image/jpeg", 1) + '"></div>';

картинки с рамкой - скриншоты с экрана, то как выглядит картинка после позиционирования
без рамки - после обрезки canvas
PS
кроссбраузерность не нужна, хром, мозилла(показан результат в хроме)
PSPS
а в мозиле данный код не работает...
для желающих проверить - могу выслать весь код странички.
Изображения:
Тип файла: jpg Захват-1.jpg (3.1 Кб, 34 просмотров)
Тип файла: jpg Захват-2.jpg (3.3 Кб, 30 просмотров)
Тип файла: jpg скачанные файлы.jpg (3.7 Кб, 30 просмотров)
Тип файла: jpg скачанные файлы (4).jpg (3.4 Кб, 36 просмотров)
Тип файла: jpg скачанные файлы (5).jpg (3.0 Кб, 29 просмотров)
Тип файла: jpg скачанные файлы (1).jpg (7.8 Кб, 25 просмотров)

Последний раз редактировалось assan, 11.01.2015 в 00:51.
Ответить с цитированием