1

есть картинка png формата маленькая 30 на 30 пикселей надо увеличить картинку по пиксельно до 300 на 300 без потери качества может больше. как это сделать?

3
  • а почему бы не приложить саму картинку 16 сен 2019 в 9:44
  • 1
    Без потери качества никак не получится. Вторая картинка содержит в 100 раз больше информации - откуда её взять?
    – MBo
    17 сен 2019 в 8:38
  • @MBo я предположил что под потерей качества автор имеет в виду сглаживание при upsampling встроенным алгоритмом. 18 сен 2019 в 7:59

3 ответа 3

0

Вот так можно сделать:

let img = new Image(), from = 30, to = 300, ratio = to/from;
img.src = `https://picsum.photos/id/1/${30}/${30}`;
img.crossOrigin = "anonymous";
img.onload = e => {
  let ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  let d1 = ctx.getImageData(0, 0, from, from);
  let d2 = ctx.createImageData(to, to);
  for (let x = 0; x<to; x++) {
    for (let y = 0; y<to; y++) {
      let o1 = (y*to + x)*4;
      let o2 = (Math.floor(y/ratio)*from + Math.floor(x/ratio))*4;    
      d2.data[o1 + 0] = d1.data[o2 + 0];
      d2.data[o1 + 1] = d1.data[o2 + 1];
      d2.data[o1 + 2] = d1.data[o2 + 2];
      d2.data[o1 + 3] = 255;
    }
  }
  ctx.putImageData(d2, 0, 0); 
};
<canvas id=canvas width=300 height=300 />

6
0

Посмотри еще эту ссылку, там по поводу масштабирования изображения: https://facebook.github.io/react-native/docs/image#style

<Image source={require('./my-icon.png')} style={{ width: 300, height: 300, resizeMode: 'cover' }}/>
1
  • не получится эта картинка qrcode размытие убивает картинку в хлам 16 сен 2019 в 9:28
0

Использовать OpenGL, и настроить итоговое изображение шейдерами

Готовый компонент:

Шейдер + базовый компонент:

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.