У меня сложная проблема, которую нужно решить. Теперь мне нужно написать такую функцию в javascript, которая поддерживает объектную канву в html5, которая будет вырезать часть изображения и показывать ее в предварительном просмотре. Мне нужно сделать, чем с различным разрешением изображений. Для этого я использую библиотеку jQuery, особенно jquery.Jcrop.js. Видимая часть изображения в предварительном просмотре, которую я собираюсь использовать позже для дальнейших целей, должна быть доступна для записи в виде обрезки в файл - поэтому я использую возможности холста. Этот скрипт работает хорошо, но проблема заключается в том, что я пытаюсь масштабировать фотографию от большего к меньшему (я хочу, чтобы каждое изображение было зафиксировано в окне браузера до высоты 500 пикселей). Я представляю ниже текущий рисунок сценария:
function updatePreview(c)
{
if (parseInt(c.w) > 0)
{
var rx = 200 / c.w;
var ry = 300 / c.h;
// Show canvas image preview2
var imageObj = $("#target")[0];
var canvas = $("#preview2")[0];
var context = canvas.getContext("2d");
canvas.setAttribute('width', '200');
canvas.setAttribute('height', '300');
//context.scale(2, 2);
context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0,
canvas.width, canvas.height);
$('#preview').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
};
А вот упрощенный HTML-код, предназначенный для обработки сценарием
<table>
<tr>
<td>
<img src="http://imgon.net/di-M7Z9.jpg" id="target"
alt="obrazek" height="450"/>
</td>
<td>
<div style="width:200px;height:300px;overflow:hidden;">
<img src="http://imgon.net/di-M7Z9.jpg" id="preview" alt="Preview" />
</div>
<br />
<div>
<canvas id="preview2" style="width:200px;height:300px;"></canvas>
</div>
</td>
</tr>
</table>
Первый предварительный просмотр основан на CSS и работает правильно, но CSS охватывает только часть изображения, а не обрезает его. В отличие от этого, холст видит изображение в высоком разрешении, а предварительный просмотр не отражает сегмент масштабированных изображений (я только увеличил раздел). Это происходит в Firefox. Для Internet Explorer есть специальная библиотека, и там результат для холста такой же, как и для CSS. Мой последний вопрос. Как я могу сказать функции, чтобы создать предварительный просмотр для масштабированного изображения, а не предварительный просмотр для исходного разрешения? Я попытался заменить эту переменную c.y, например, Math.round (rx * boundx) и на cx Math.round (ry * boundy), но это неправильно.
Я даю здесь страницу, где вы можете увидеть сценарий в прямом эфире: agd-brita.pl/mobile2/tutorial.html
Я прошу вас о помощи. Спасибо за продвижение.