主页 / 问题 / 1024858
Accepted
Иван Иванов
Asked:2020-09-16 16:25:15 +0000 UTC2020-09-16 16:25:15 +0000 UTC

如何在 react-native 中逐像素放大图像？

  • 772

有一个图片 png 格式小 30 x 30 像素，您需要将图像逐像素增加到 300 x 300 而不损失质量，也许更多。怎么做？

javascript

3 个回答

  1. 另请参阅此链接，关于图像缩放： https ://facebook.github.io/react-native/docs/image#style

    <Image source={require('./my-icon.png')} style={{ width: 300, height: 300, resizeMode: 'cover' }}/>
    • 0

  2. 使用 OpenGL，并使用着色器自定义最终图像

    成品组件：

    着色器 + 基础组件：

    • 0
  3. Best Answer

    您可以这样做：

    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 />

    • 0

相关问题