Я все еще собираю части, необходимые для понимания редактора печати Web 2 в HTML5. Я использую FabricJS и кучу других сторонних инструментов, чтобы сделать это возможным.
Мой последний блокпост — мой Samsung Chromebook Pro с дисплеем HiDPI/retina. window.devicePixelRatio отличается, и я пытаюсь понять, как справиться с этим более высоким DPI с помощью FabricJS. Я следовал тому, что все остальные говорили, успешно, но, похоже, это не работает и не помогает мне. Кроме того, мой холст становится чрезвычайно большим, и объекты больше не двигаются.
Я также использую другую стороннюю библиотеку, PetitoJPEG, которую я использую для кодирования необработанных данных пикселей. из холста FabricJS. Из-за того, что devicePixelRatio отличается от моего другого ноутбука, запуск кодировщика приводит к тому, что красная точка в правой части холста не отображается на пробном изображении.
Мне интересно, как я могу кодировать весь холст на дисплее HiDPI.
Из-за всех сторонних ресурсов я готов предоставить прямую ссылку вместо JSFiddle: http://xbit.x10host.com/editor2.php
Я думаю, что понимаю, что метод масштабирования, о котором говорят люди, является успешным, но мне интересно, работает ли он должным образом из-за моего преобразования CSS в контейнере холста. Я пытался настроить масштабирование и ширину/высоту холста и ширину/высоту CSS через консоль, но безрезультатно.
Любая помощь будет оценена по достоинству. Я вставлю фрагмент, который, как все говорят, работает ниже.
Примечание. Мой Samsung Chromebook Pro регистрирует 26562 записанных байта, а мой ноутбук Lenovo x230 Windows записывает 27586 байт.
if( window.devicePixelRatio !== 1 ){
var c = canvas.getElement(); // canvas = fabric.Canvas
var w = c.width, h = c.height;
// Scale the canvas up by two for retina
// just like for an image
c.setAttribute('width', w*window.devicePixelRatio);
c.setAttribute('height', h*window.devicePixelRatio);
// then use css to bring it back to regular size
// or set it here
c.setAttribute('style', 'width="'+w+'"; height="'+h+'";')
// or jQuery $(c).css('width', w);
// $(c).css('width', w);
// $(c).css('height', h);
// finally set the scale of the context
c.getContext('2d').scale(window.devicePixelRatio, window.devicePixelRatio);
canvas.renderAll();
}
Я знаю, что приведенный выше фрагмент кода работает для большинства людей, но не является ли следующая строка неверной?
c.setAttribute('style', 'width="'+w+'"; height="'+h+'";')
Это не то, как вы определяете встроенные стили. Вам нужно ":" вместо "=" и нет единицы измерения, поэтому мне интересно, как это работает.
Вот скриншот новой страницы изоляции, которую я создал для более эффективной изоляции проблемы: 
А вот и прямой URL: http://xbit.x10host.com/isolation.php
Вы можете видеть, как использование метода, о котором все говорят, что он работает, на самом деле не работает. Недопустимые значения свойства CSS. Может быть, я просто запутался, но даже если я правильно установлю ширину и высоту CSS, я использую 1125x675 для getImageData или новые 4500x1200? Использование последнего приводит к тому, что пробное изображение становится слишком большим; 4500x1200 содержит все данные, которые я хочу, но затем есть все это черное пространство. Ниже приведен снимок экрана с этим результатом. .com/VPA5e.png" alt="введите здесь описание изображения">
Теперь 2250x1350 (вывод с использованием метода goto с правильным встроенным синтаксисом CSS) кажется правильным, но я думал, что исправление холста должно помочь вывести то же самое, что и мой другой ноутбук. Означает ли это, что люди с дисплеями HiDPI будут получать контрольные изображения (и отпечатки) более высокого качества, чем люди, у которых нет дисплея HiDPI? Я хочу, чтобы размеры и количество пикселей были одинаковыми независимо от DPI устройства.
