Я все еще собираю кусочки, необходимые для понимания редактора печати web 2 в HTML5.Я использую FabricJS и кучу других сторонних инструментов, чтобы сделать это возможным.
Мой последний контрольно-пропускной пункт - это мой Samsung Chromebook Pro с дисплеем HiDPI / Retina.window.devicePixelRatio отличается, и я пытаюсь выяснить, как справиться с этим более высоким DPI, используя FabricJS.Я следовал тому, что все остальные говорили, успешно, но, похоже, это не работает и не помогает мне.Кроме того, мой холст становится очень большим, и объекты больше не могут быть перемещены.
Я также использую другую стороннюю библиотеку, PetitoJPEG , которую я использую для кодирования необработанных данных пикселей изТкань JS холст.Из-за отличия devicePixelRatio от моего другого ноутбука, запуск кодера приводит к тому, что красная точка на правой стороне холста не отображается на пробном изображении.
Мне интересно, как я могу кодировать всеCanvas на дисплее HiDPI.
Из-за всех сторонних ресурсов я хочу предоставить прямую ссылку вместо JSFiddle: http://xbit.x10host.com/editor2.php
Мне кажется, я понимаю, что такое масштабированиеЛюди говорят, что метод успешен, но мне интересно, не работает ли он должным образом из-за моего CSS-преобразования в контейнере canvas.Я пытался настроить масштабирование и ширину / высоту холста и ширину / высоту 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 содержит все данные, которые я хочу, но есть все это черное пространство.Ниже приведен скриншот этого результата. 
Теперь 2250x1350 (вывод с использованием метода goto с правильным встроенным CSS-синтаксисом) кажется правильным, но я думал, что исправление canvasдолжен был помочь вывести так же, как мой другой ноутбук.Означает ли это, что люди с дисплеями HiDPI получат более качественные пробные изображения (и отпечатки), чем люди, у которых нет дисплея HiDPI?Я хочу, чтобы размеры и количество пикселей были одинаковыми независимо от DPI устройства.