Как сохранить изображение размера a * a в холсте HTML5, canvas.toDataURL (), а затем нарисовать его в разных размерах, a * a/2a * 2a?

Question

Как сохранить изображение размера a * a в холсте HTML5, canvas.toDataURL (), а затем нарисовать его в разных размерах, a * a/2a * 2a?

Как сохранить одно изображение размера a * a с помощью холста HTML5, canvas.toDataURL() , а затем нарисовать его в разных размерах, a * a / 2a * 2a без искажений?

ИЛИ

У меня есть веб-приложение HTML5/JavaScript. Существует каталог товаров, в котором, когда я добавляю новый элемент, я добавляю изображение элемента с помощью холста HTML5:

Изображение 100 * 100 преобразуется в $ ('# canvasnew') [0] .toDataURL() и сохраняется в моей базе данных. И изображение позже втягивается в другой холст следующим образом:

var ctx = $(this.el).find('#canvas')[0].getContext('2d');
var img = new Image;
img.onload = function() {
    ctx.drawImage(img, 0, 0);
};
img.src = this.model.toJSON().ImageUrl;`

this.model.toJSON().ImageUrl gets the image (size 100 * 100)saved in dataUrl form. Now, I need to draw this same image into one more canvas of size 400 * 400 without distortion. How do I do this?

0

добавлено 28 Декабрь 2012 в 07:10 автор dany отредактировано 28 Декабрь 2012 в 08:21

Просмотры: 3

источник

nl ja de

1 ответы

автор Cerbrus · Answer 1 · 2012-12-28T07:54Z

Попробуй это:

ctx.drawImage(img, 0, 0, 400, 400);

drawImage accepts up to 9 parameters, the first 5 being:

Изображение,
x позиция,
y,
высота.

So: drawImage(img, x, y, width, height);

Однако растягивание такого изображения всегда будет приводить к искажению, поскольку «новые» пиксели должны быть рассчитаны/интерполированы. Некоторые алгоритмы интерполяции более эффективны или приводят к лучшим изображениям, чем другие, но пока