JQuery определяет эффективный DPI для масштабирования изображения в Canvas

Ia € ™ m с помощью cropit.js, чтобы позволить посетителю загружать большое изображение JPEG или TIFF, предназначенное для печати. Я печатаю при 300DPI.

Размеры холста contentit.js HTML 5 определяются посетителем (используя числовое поле в предыдущем скрипте, эти размеры передаются как var в холст холста cropit.js HTML 5. Все это отлично работает.

Некоторые изображения первоначально не подходят или требуют изменения размера посетителя. Cropit.js должен быть большим для этого.

Мой запрос: Я бы хотел показать эффективный размер загруженного изображения, его размер по сравнению с холстом HTML 5 (который представляет собой окончательное печатное изображение @ 300DPI). Математика / расчеты требовали моего разума. Может ли кто-нибудь помочь?

  1. Может ли код обнаружить экран DPI? Нет, похоже, нет.
  2. Можно ли сделать расчет, чтобы показать эффективный размер печати? Кажется, нет.
  3. Какие математические данные мне нужно отображать эмулируемый размер (с учетом разрешения загруженного изображения) и размеры, введенные посетителем?

Это можно легко проиллюстрировать в Photoshop, где вы делаете «холст» (размер холста для фотошопа), скажем, 210 x 210 мм при 300DPI. Если вы затем снимете изображение размером 72x2000 пикселей 72DPI в холст ... он не совсем работает, пользователь либо должен увеличивать, либо обрезать. Это функциональность, которую я хотел бы подражать с помощью cropit.js

    <script>
  $(function() {
    $('.image-editor').cropit({
      imageState: {
        src: 'imagedir/image1000x2000px.jpeg',
      },
    });

    $('.preview-wrapper').cropit('previewSize', { width: ''+ var_numberfield_width+'', height: ''+var_numberfield-height+'' });

    $('.export').click(function() {
      var imageData = $('.image-editor').cropit('export');
      window.open(imageData);
    });
  });
</script>

Когда я работаю над полным ответом, я подумал, что могу объединить загрузку ссылок, которые мне интересны. Может быть полезно в будущем:

javascript,jquery,html5,image,canvas,

1

Ответов: 2


Когда я работаю над полным ответом, я подумал, что могу объединить загрузку ссылок, которые мне интересны. Может быть полезно в будущем:

21
1

может ли код обнаружить экран DPI?

К сожалению, нет никакого способа определить реальный физический размер пикселя и, следовательно, размер дисплея и DPI. Хотя вы можете иметь список известных устройств / экранов / разрешений и спрашивать у клиента, какое оборудование у них есть, но у него столько же проблем, сколько и разных устройств.

Можно ли сделать расчет, чтобы показать эффективный размер печати?

Поскольку это связано с первым вопросом, ответ отрицательный.

Интересно, есть ли умный способ: с JQuery или HTML5 читать «отброшенные» размеры изображения, вычислять DPI и отображать относительный размер изображения в холсте HTML5?

Чтобы получить разрешение (не DPI) изображения, вы просто загрузите его

var image = new Image();
image.src = /*dropped image URL*/
image.onload = function(){ // need to wait till it has loaded
     width = image.width;  // number of pixels across
     height = image.height;  // number of pixels down.
}

DPI только привязан к разрешению. Вы не можете увеличить разрешение изображения. Это приведет к размытию изображения. Изображение в его отбрасываемой форме находится на максимальном DPI, который он когда-либо будет. НЕ ОБНАРУЖИТЕ изображение перед загрузкой каким-либо образом. (Если он слишком большой)

Изображение, отображаемое на холсте, не является тем, что вы загружаете. В фрагменте над изображением можно сделать любое разрешение.

Скажем, ваш холст 1024 на 1024, а загруженное изображение - 4096 на 2048. Вам нужно показать изображение на холсте с низким разрешением, равномерно масштабируя его, а затем отринув его в этом масштабе. Предоставление его на холст не влияет на изображение, оно по-прежнему сохраняет свое первоначальное разрешение.

Чтобы получить правильную шкалу, чтобы показать все изображение

 var scale = Math.min(image.width / canvas.width, image.height / canvas.height);
 // to display the image on the canvas
 ctx.drawImage(image,0,0,image.width * scale,image.height * scale);

Когда работа с изображениями на компьютерах забывается о DPI, это бессмысленно, поскольку у вас нет способа узнать, насколько велика точка (пиксель). DPI - это функция принтера.

Вы можете, когда клиент выбрал размер печати, даст эффективный DPI (я предпочитаю PPI (пиксели на дюйм)), который является числом пикселей, разделяющим размер печати в дюймах. Например, разумное изображение 5184 на 3456 пикселей при печати 7 "на 5" даст DPI ~ 740DPI, но если вы измените размер печати 16 "на 12", DPI станет ~ 432DPI. Все, что изменилось, это размер печати, изображение не изменилось вообще.


0

Я хочу отображать «на лету» пикселы на дюйм данного изображения, просматриваемые в уроке cropit.js

http://scottcheng.github.io/cropit/ - cropit.js

Я использую cropit.js в качестве предварительного просмотра. Я разрешаю моим пользователям видеть, соответствует ли их изображение правильному размеру / требует обрезки или масштабирования. Самое главное, когда пользователь масштабируется, я хочу отобразить эффективный PPI (пикселей на дюйм) изображения.

Сначала пользователь определяет размер области предварительного просмотра cropit.js, введя размеры (в миллиметрах) в числовое поле, которое затем преобразовываю в пиксели с 300 PPI. Мое намерение - создать резкую печать при 300DPI.

Вот этот расчет: который принимает определяемые пользователем размеры (в мм) и превращает их в пиксели. то есть. 250 мм х 250 мм> 9,843 x 9,843 дюйма> 2953 x 2953 пикселей

Таким образом, мы имеем размер области предварительного просмотра 2953 x 2953px. Который равен 250 x 250 мм при 300 PPI. Легко .

Теперь пользователь загружает / вводит файл. Предположим, что изображение составляет только 1476 x 1476px (половина размера, необходимого для печати при 300DPI).

Cropit.js позволяет пользователю изменять размер, они могут с радостью увеличить размер до 200% = 2953 x 2953px, но это только эффективно 150DPI.

Как я могу отобразить этот расчет? И предупреждение, если эффективный PPI падает ниже 200DPI? Я бы хотел, чтобы вычисление отображалось «на лету», так как пользователь перетаскивает / понижает полученный PPI.

Вот такая информация, которую я получаю с помощью динамических вычислений, в JQuery ...

   upload image size in pixels = width: 500 x height: 500 px
   upload image size calculated in inches at 300ppi = width: 1.67 by height: 1.67 inches

   user defined size in mm = width: 666 x 666mm
   user defined size in inches = width: 26.22 x 26.22in
   pixel size required, for a 300PPI print = width: 78661 x 78661px
JavaScript, JQuery, html5, изображение, холст,
Похожие вопросы