React Native连接Intermec PR3打印机调用printPic打印图片仅输出乱码求助

• 先切换打印机协议模式：Intermec PR3默认使用厂商私有打印协议，不会识别普通ESC/POS图片指令，会将指令内容当成文本输出为乱码。你可以先在打印机的系统设置里将打印模式切换为ESC/POS模拟模式，也可以在打印初始化代码后追加发送切换指令：

// printerInit执行后添加这行
await BluetoothEscposPrinter.sendRawData(Uint8Array.from([0x1B, 0x1B, 0x1B, 0x43, 0x4C, 0x52, 0x31, 0x0D, 0x0A]).buffer);

• 修正图片编码逻辑：你当前直接传入的是PNG格式的完整文件base64，包含PNG文件头、元数据等非像素内容，printPic方法只能识别二值化之后的纯位图像素数据，所以你需要先将捕获到的PNG图片转换为单色二值位图，剥离文件头后再生成base64传入。你可以用react-native-image-converter这类工具完成二值化转换，转换时要求输出为1位深度的bmp格式，再读取base64。
• 修正宽度参数匹配：Intermec PR3的最大打印行宽为384像素，且要求图片宽度必须为8的整数倍，你当前ViewShot捕获宽度为1000、打印传入宽度为100，参数不匹配会导致打印机解析错误。建议将ViewShot的捕获宽度和打印传入的width参数统一设置为240（8的倍数，适配常规打印场景）。

修改后参考代码 #

import {
  BluetoothManager,
  BluetoothEscposPrinter,
} from 'react-native-bluetooth-escpos-printer';
// 引入图片转换工具，需先安装对应依赖
import ImageConverter from 'react-native-image-converter';

printIt = async () => {
  // 调整捕获宽度为240，和后续打印宽度一致
  const imageUri = await this.refs.viewShot2.capture({
    result: 'tmpfile',
    width: 240,
  });
  // 将PNG转换为1位深度的单色BMP，剥离冗余头信息
  const convertedImageUri = await ImageConverter.convert(imageUri, {
    type: 'bmp',
    quality: 1,
    width: 240,
    grayscale: true,
    threshold: 127,
  });
  const base64 = await FileSystem.readFile(convertedImageUri, {
    encoding: 'base64',
  });
  await BluetoothEscposPrinter.printerInit();
  // 追加打印机模式切换指令
  await BluetoothEscposPrinter.sendRawData(Uint8Array.from([0x1B, 0x1B, 0x1B, 0x43, 0x4C, 0x52, 0x31, 0x0D, 0x0A]).buffer);
  await BluetoothEscposPrinter.printerAlign(
    BluetoothEscposPrinter.ALIGN.CENTER,
  );
  try {
    // 打印宽度设置为240，和图片实际宽度一致
    await BluetoothEscposPrinter.printPic(base64, {
      width: 240,
      left: 0,
    });
    // 打印完成后追加3行换行，避免内容被截断
    await BluetoothEscposPrinter.printText('\r\n\r\n\r\n',{});
  } catch (e) {
    console.log(e || 'ERROR');
  }
};

// 页面渲染逻辑调整图片尺寸匹配捕获宽度
return (
    <View style={styles.Maincontainer}>
      <ViewShot ref="viewShot2" style={styles.body}>
        <Image
          resizeMode="contain"
          source={require('../../../../assists/img/cloud.jpg')}
          style={{width: 240, height: 240}}
        />
      </ViewShot>
      <View
        style={{
          width: '100%',
          padding: 10,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <TouchableOpacity onPress={this.printIt} style={styles.button}>
          <Text style={styles.printText}>print</Text>
        </TouchableOpacity>
      </View>
    </View>
  );

内容的提问来源于stack exchange，提问作者MoHaMeD