如何创建一个新的图像（并将内容复制到其中）

Question

我找了很多地方...但我找到的唯一的东西是关于如何在react-native中显示图像。

但我正在寻找一种在内存中创建新图像的方法，将背景设置为黑色，并将其他两个图像的内容粘贴到上面，然后显示并最终保存它。

这该怎么做？顺便说一下，我也在我的项目中使用expo。

谢谢！

- devnull69

---

你主要是想展示这张图片，然后可能稍后保存吗？我有一个很棒的解决方案来展示它。但是提前告诉你，保存部分可能会感觉有点像一个变通方法。 - undefined

能不能只用纯JS来完成呢？抱歉，我没有正确理解问题。const img = document.createElement('img'); img.src = url; // 设置其他图片的内容，比如其他img.src img.className = "asset_chess_img"; // 然后可以添加任何你想要的样式和其他内容 - undefined

@vipulpatel 不是React，而是React Native。在运行时，你不再拥有DOM。你所编写的一切都将被编译为原生UI组件。 - undefined

Answer 1

你可以使用react-native-image-generator。

import { generate } from 'react-native-image-generator';

// ...
const r = await generate(
  [{
      text: '', // empty text
      fontSize: 23,
      width: 300,
      height: 300,
      x: 50,
      y: 50,
    },
  ],
  {
    filename: 'test.png',
    width: 200,
    height: 300,
  }
)

- DinhNguyen

---

我觉得我离答案越来越近了...但是：使用这个包时，expo不想运行应用程序。错误是The package 'react-native-image-generator' doesn't seem to be linked。 - undefined

Answer 2

在内存中创建一个新的图像，将其背景设置为黑色，将其他图像粘贴到其中，并保存它需要一些步骤。由于你提到了Expo和React Native，我们在使用的库方面有一定的限制，因为React Native不支持与常规Node.js环境相同的所有库。

在React Native中，你需要一种处理图像的方法。你可能可以使用Expo的expo-image-manipulator和expo-file-system模块来实现这一点，但请注意，它们的功能与其他环境中功能齐全的图像处理库相比有一定的限制。以下是你可以采取的大致步骤概述：

先决条件 确保你已经安装了Expo的expo-image-manipulator和expo-file-system模块。你可以使用npm或yarn来安装它们： bash

expo install expo-image-manipulator
expo install expo-file-system

步骤

1. 加载图片：将图片加载到内存中。您可能需要操作的图片的URI。您可以使用本地文件路径，或者从网络下载图片并保存到设备的本地存储。

2. 创建黑色背景图片：您可能需要手动创建一个带有黑色背景的图片，或者您可以使用一个1x1的黑色像素图片，并使用expo-image-manipulator将其调整为所需的尺寸。

3. 合并图片：使用expo-image-manipulator将其他图片叠加到黑色背景上。该模块中的manipulateAsync函数允许您对图像执行一系列操作，包括调整大小和叠加图片。

4. 保存结果：一旦您获得了合并后的图片，您可以使用expo-file-system将其保存到设备的本地存储中。writeAsStringAsync函数允许您将数据写入URI，您可以使用readAsStringAsync在需要显示时读取它。

示例代码 这是一个简化的代码示例，帮助您入门：

import React from 'react';
import { Image } from 'react-native';
import * as ImageManipulator from 'expo-image-manipulator';
import * as FileSystem from 'expo-file-system';

export default class App extends React.Component {
   async componentDidMount() {
   try {
    // Load and manipulate images
    const image1Uri = 'your-first-image-uri';
    const image2Uri = 'your-second-image-uri';

    const blackBg = await this.createBlackBackground();
    const firstImage = await ImageManipulator.manipulateAsync(image1Uri, [
    { resize: { width: blackBg.width / 2 } }
  ]);
  const secondImage = await ImageManipulator.manipulateAsync(image2Uri, [
    { resize: { width: blackBg.width / 2 } }
  ]);

  // Combine images
  const combinedImage = await ImageManipulator.manipulateAsync(
    blackBg.uri,
    [
      { composite: [{ position: { x: 0, y: 0 }, uri: firstImage.uri }] },
      { composite: [{ position: { x: firstImage.width, y: 0 }, uri: secondImage.uri }] }
    ]
  );

  // Save image
  const savedUri = FileSystem.documentDirectory + 'combinedImage.png';
  await FileSystem.writeAsStringAsync(savedUri, combinedImage.uri, { encoding: FileSystem.EncodingType.Base64 });

  // Now you can use savedUri to display or upload the image

} catch (error) {
  console.error(error);
}
}

 async createBlackBackground() {
   // Replace this method with actual creation of black background image
   // You might need to create a black image of desired size manually
   return {
     uri: 'your-black-background-uri',
     width: desiredWidth,
     height: desiredHeight
   };
 }

 render() {
   return (
     <Image source={{ uri: 'file-uri-of-combined-image' }} />
   );
}
}

注意事项

这只是一个简化和假设的例子。您需要用与您的用例相关的实际值替换URI和大小。

图像处理操作可能无法完美地适用于所有类型的图像和格式。请使用您计划使用的实际图像进行彻底测试。

您可能需要处理读取/写入文件的权限以及访问设备上的相机胶卷或其他图像来源的权限。要根据您的确切需求进行更详细的了解和定制，请参考expo-image-manipulator和expo-file-system的官方文档。

- root

Answer 3

这是GPT的答案，我对其进行了修正，希望能帮到你。

在React Native中，如果你想在内存中创建一个带有黑色背景的新图像，并将其他两个图像的内容粘贴到其中，你可以使用react-native-canvas库。下面是一个示例代码片段，演示了如何创建一个带有黑色背景的新画布，加载两个图像，并将它们绘制到画布上：

import Canvas from 'react-native-canvas';
const canvas = useRef(null);

useEffect(() => {
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    const img1 = new Image();
    img1.src = 'path_to_image1'; // replace with path to your first image
    img1.onload = () => {
      ctx.drawImage(img1, 0, 0, canvas.width / 2, canvas.height);
    }

    const img2 = new Image();
    img2.src = 'path_to_image2'; // replace with path to your second image
    img2.onload = () => {
      ctx.drawImage(img2, canvas.width / 2, 0, canvas.width / 2, canvas.height);
    };
  }, [canvas]);
  const handleSave = () => { const savePath = 'image/png'; canvas.toDataURL(savePath); }

  return (
    <SafeAreaView>
      <Canvas
        ref={canvas}
        style={{ width: 500, height: 500 }}
      />
      <Button title="Save Image" onPress={handleSave} />
    <SafeAreaView/>
  );
};

这段代码创建了一个新的画布元素，背景为黑色，大小为500x500。然后加载两个图片（替换为您自己图片的路径），等待它们加载完成，并将它们绘制到画布上。第一张图片绘制在画布的左半部分，第二张图片绘制在右半部分。

一旦画布创建并且图片绘制完成，您可以像其他React Native组件一样在您的应用程序中显示它（或保存它）。

- ZhiXu