Изменение размера KineticJS Stage без потери качества

Question

Изменение размера KineticJS Stage без потери качества

0

Мне нужно поместить изображение с высоким разрешением (приблизительно 3072x2304) в интерфейс HTML5 Canvas, используя KineticJS, который пользователь может добавить в текст и затем вывести загружаемое изображение.

Тем не менее, я хочу, чтобы холст мог вписаться в обычный монитор для удобства просмотра. Другими словами, я хочу, чтобы разрешение дисплея было меньше 1024x768. В то же время я все еще хочу, чтобы выходное изображение Canvas HTML5 оставалось на высоком разрешении 3072x2304. Я изо всех сил пытаюсь добиться уменьшенного разрешения дисплея без потери качества изображения.

Прямо сейчас, мне нужно загрузить файл меньшего размера 1024x768 и принести в жертву качество вывода, или я вынужден ввести полосы прокрутки на холст.

Как заставить его работать как обычный тег HTML img, где браузер изменяет размер изображения, но источник остается высоким разрешением?

    var stage = new Kinetic.Stage({
    container: 'container',
    width: 1024,
    height: 768,
    });
    imageObj.onload = function() {                          
    var backgroundimg = new Kinetic.Image({
    x: 0,
    y: 0,
    image: imageObj,                                    
    width: 3072,
    height: 2304,
    draggable: false,
    });
    stage.add(backgroundimg);

user1871471 06 янв. 2014, в 05:34

Источник

0

Возможно, этот ответ может дать вам несколько советов о том, как уменьшить изображение, а затем применить принцип с kineticjs.
user1693593 06 янв. 2014, в 04:24
0

Вы когда-нибудь находили решение?
Chad 10 фев. 2016, в 22:16

Теги:

javascript

jquery

html5

canvas

kineticjs

1 ответ

Ещё вопросы

Возможно, этот ответ может дать вам несколько советов о том, как уменьшить изображение, а затем применить принцип с kineticjs.
Вы когда-нибудь находили решение?

markE · Answer 1 · 2014-01-06T01-44-00.000Z

Вы только что разработали...

Загрузите изображение в объект изображения javascript, а затем используйте его для создания кинетического изображения

imgFull останется на уровне 3072 x 2304 (его первоначальный размер)
backgroundimg будет уменьшено до 1024 x 768

Вот пример кода:

// create the stage

var stage = new Kinetic.Stage({
    container: 'container',
    width: 1024,
    height: 768,
});

// create a layer on the stage

var layer=new Kinetic.Layer();
stage.add(layer);

// create a full sized javascript image object (imgFull)
// and use that to create a Kinetic.Image at 1/3 size (backgroundimg)

var backgroundimg;

var imgFull=new Image();
imgFull.onload=function(){
    backgroundimg=new Kinetic.Image({
        x: 0,
        y: 0,
        image: imageObj,                                    
        width: 1024,
        height: 768,
        draggable: false,
    });
    layer.add(backgroundimg);
}
imgFull.src="yourImage.png";

Спасибо за быстрый ответ. Я должен был быть более ясным в исходном посте, но я стараюсь сохранить перетаскиваемый характер текста, который добавляет мой пользователь. Есть ли способ отображать вещи меньше, не удаляя функцию перетаскивания?
Я не совсем понимаю. Применяете ли вы текст к меньшему кинетическому изображению и хотите экспортировать этот результат - если это так, вы можете использовать stage.toDataURL. Если вы хотите экспортировать увеличенное изображение с текстом, вам нужно будет нарисовать увеличенное изображение на холсте html 3072x3024, а затем context.fillText, используя больший шрифт и 3X [x, y], и, наконец, использовать canvas.toDataURL для экспорта полного изображение с большим текстом. В любом случае работает - выбирай!