januslo / react-native-bluetooth-escpos-printer

React-Native plugin for the bluetooth ESC/POS & TSC printers.
MIT License
351 stars 411 forks source link

please Help printPic did not print image but characters #173

Open feras-merwas opened 2 years ago

feras-merwas commented 2 years ago

hello this is my code when printPic i got weird characters

import { BluetoothManager, BluetoothEscposPrinter, } from 'react-native-bluetooth-escpos-printer'; version '0.0.5'

can you help me please i am stuck here


  printIt = async () => {
    const imageUri = await this.refs.viewShot2.capture({
      result: 'tmpfile',
      width: 1000,
    });

    const base64 = await FileSystem.readFile(imageUri, {
      encoding: 'base64',
    });

    await BluetoothEscposPrinter.printerInit();
    await BluetoothEscposPrinter.printerAlign(
      BluetoothEscposPrinter.ALIGN.CENTER,
    );
    console.log(`base64`, base64);

    try {
      await BluetoothEscposPrinter.printPic(base64, {
        width: 100,
        left: 0,
      });
    } catch (e) {
      console.log(e || 'ERROR');
      console.log(e);
    }
  };
      return (
        <View style={styles.Maincontainer}>
          <ViewShot ref="viewShot2" style={styles.body}>
            <Image
              resizeMode="contain"
              source={require('../../../../assists/img/cloud.jpg')}
              style={{width: 100, height: 100}}
            />
          </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>
      );

20211114_104621

mukeshsharma1984 commented 10 months ago

try this code const printIt = async () => { const imageUrl = 'http://park24.co.in/public/assets/uploads/16947003915787.png';

// Fetch the image data and convert it to base64 const response = await fetch(imageUrl); const blob = await response.blob(); const reader = new FileReader(); reader.onload = async () => { const base64ImageData = reader.result.split(',')[1]; // Extract the base64 data console.log('base64ImageData', base64ImageData);

// Initialize the printer
try {
  await BluetoothEscposPrinter.printerInit();
  await BluetoothEscposPrinter.printerAlign(
    BluetoothEscposPrinter.ALIGN.CENTER,
  );

  // Print the image
  await BluetoothEscposPrinter.printPic(base64ImageData, {
    width: 200,
    left: 100,
  });

  console.log('Image printed successfully');
} catch (e) {
  console.error('Error printing image:', e);
}

}; reader.readAsDataURL(blob); };

useEffect(() => {
printIt() });

its working for me

mukeshsharma1984 commented 10 months ago

on top component var FileSystem = require('react-native-fs');