Большое изображение не отображается на холсте с помощью KonvaJS при использовании кеша
Я использую konvajs и vue-konva для размещения изображения в области прямоугольника. Мне нужно кэшировать это изображение, чтобы применить к нему собственный фильтр.
Это изображение загружается пользователем, и его размеры могут быть довольно большими (например, с камеры устройства), а устройством может быть смартфон с ограниченными ресурсами.
С небольшими изображениями все работает нормально, но когда пользователь выбирает большое изображение на мобильном телефоне (например, 2500x2500), изображение сначала отображается и исчезает, когда cache() метод вызывается на узле изображения.
Похоже, это зависит от устройства: на моем ноутбуке все в порядке, но не на моем смартфоне (оба устройства высокого класса), оба с последней версией Google Chrome. Мне удалось воспроизвести проблему на моем ноутбуке с еще большим изображением (~6000x6000).
Я действительно не знаю, связано ли это с Konva или я достигаю ограничений браузера с большими файлами (что может объяснить, что это зависит от устройства). Если это так, мы будем очень признательны за любой совет / обходной путь.
И последнее, но не менее важное: мне нужно сделать экспорт холста, чтобы распечатать его позже (разрешение 300 точек на дюйм, окончательное изображение должно быть около 2300 пикселей), поэтому я не могу слишком сильно уменьшить размер изображения.
Вы можете воспроизвести по этой ссылке.
1 ответ
Это связано с ограничениями браузера. Иногда они могут не рисовать слишком большие изображения. Также в устройствах HDPI (практически на всех современных экранах)Konvaпытается улучшить качество кеша за счет увеличения размера кеша. Это имеет смысл для любых векторных фигур (например, прямоугольников, кругов и т. Д.). Но для изображения это не очень помогает.
Таким образом, вы можете уменьшить размер кэшированного изображения следующим образом:
image.cache({ pixelRatio: 1})
С участием pixelRatio = 1размер кэшированного холста будет точно таким же, как размер изображения. Вы можете попытаться уменьшить его еще больше. подобноpixelRatio = 0.5. Если у вас большое изображение и оно уменьшено до меньшего размера, пользователь может не заметить разницу в снижении качества.