How to: Build Your Own Business Card Scanner

How to: Build Your Own Business Card Scanner

This is an excellent and very practical project. Building your own business card management system is a great way to handle contacts exactly how you want. Let's break this down into manageable steps.

This is a fantastic full-stack project. We'll build a web application that you can host yourself. It will handle image uploads, process them to find contact details, store them, and allow you to export them.

---

 🚀 Overview of the Solution

Here’s a high-level look at the components we'll need to build:

1. Frontend (The User Interface): A simple web page where you can upload an image of a business card and see your list of saved contacts. We'll use HTML, CSS, and JavaScript.
2. Backend (The Brains): A server that receives the uploaded image, processes it, and saves the information. We'll use Python with the Flask framework because it's great for building web applications and has powerful tools for our needs.
3. OCR (Optical Character Recognition): This is the magic part that reads the text from the image. We'll use an open-source tool called Tesseract, which supports over 100 languages.
4. Database (The Memory): A place to store the extracted contact information. We'll start with SQLite, a simple file-based database that's perfect for this kind of project.
5. vCard Generation: A function to bundle the contact information into a .vcf file, which is the standard format for digital business cards.

Regarding the WhatsApp integration, this is the most challenging part due to WhatsApp's strict API rules. Direct integration into the catalog is not possible. However, I'll show you a highly effective and standard workaround.

Let's get started!

---

 🛠️ Step 1: Setting Up Your Backend with Python and Flask

First, we'll create the backend server. This server will have two main jobs:

• An endpoint to receive an image, run OCR, and extract text.
• An endpoint to generate a .vcf file from contact data.

Prerequisites

You'll need to install a few things on your computer:

1. Python: If you don't have it, download it from python.org.

2. Tesseract OCR Engine: This is the core OCR tool. You must install it separately from the Python library.

   • Windows: Follow the instructions at Tesseract at UB Mannheim.
   • macOS: Use Homebrew: brew install tesseract
   • Linux (Ubuntu/Debian): sudo apt-get install tesseract-ocr

3. Python Libraries: Open your terminal or command prompt and install these libraries:

   pip install Flask Pillow pytesseract vobject
   

   • Flask: Our web framework.
   • Pillow: For opening and handling images.
   • pytesseract: A Python wrapper for the Tesseract engine.
   • vobject: To easily create vCard (.vcf) files.

Backend Code (app.py)

Create a new file named app.py and paste the following code into it. I've added comments to explain each part.

# app.py import os import re from flask import Flask, request, jsonify, render_template_string, Response from PIL import Image import pytesseract import vobject # Initialize the Flask app app = Flask(__name__) # --- Helper Functions --- def process_image_with_ocr(image_path): """ Opens an image file and uses Tesseract to perform OCR, returning the extracted text. 'lang="eng+chi_sim+jpn"' is an example for English, Simplified Chinese, and Japanese. You can add more language codes separated by '+' See language codes here: https://tesseract-ocr.github.io/tessdoc/Data-Files-in-version-4.00-and-later.html """ try: image = Image.open(image_path) # Add more languages as needed, e.g., 'eng+fra+spa' for English, French, Spanish extracted_text = pytesseract.image_to_string(image, lang='eng') return extracted_text except Exception as e: print(f"Error processing image: {e}") return None def parse_contact_info(text): """ Parses the raw text from OCR to find contact fields using regular expressions. This is a simple parser and can be greatly improved. """ contact = { 'name': 'N/A', 'phone': 'N/A', 'email': 'N/A', 'company': 'N/A', 'title': 'N/A', 'raw_text': text } # Regex for email email_match = re.search(r'[\w\.-]+@[\w\.-]+', text) if email_match: contact['email'] = email_match.group(0) # Regex for phone number (a simple example) phone_match = re.search(r'(\+?\d{1,3}[\s-]?)??[\s.-]?\d{3}[\s.-]?\d{4}', text) if phone_match: contact['phone'] = phone_match.group(0) # You would add more complex logic here to find name, company, etc. # For now, we'll just return what we found. return contact # --- API Endpoints --- @app.route('/') def index(): """ Serves the main HTML page for uploading files. We are defining the HTML right here in the Python file for simplicity. """ # This is a simple HTML form for the frontend. return render_template_string(""" Business Card Scanner Upload Business Card Scan Result Awaiting scan... """) @app.route('/scan', methods=['POST']) def scan_card(): """ Handles the file upload, processes it with OCR, and returns the parsed data. """ if 'file' not in request.files: return jsonify({'error': 'No file part'}), 400 file = request.files['file'] if file.filename == '': return jsonify({'error': 'No selected file'}), 400 # Save the file temporarily upload_folder = 'uploads' if not os.path.exists(upload_folder): os.makedirs(upload_folder) filepath = os.path.join(upload_folder, file.filename) file.save(filepath) # Process the image raw_text = process_image_with_ocr(filepath) if raw_text is None: return jsonify({'error': 'Could not process image'}), 500 # Parse the text to find contact info contact_info = parse_contact_info(raw_text) # Clean up the uploaded file os.remove(filepath) return jsonify(contact_info) @app.route('/vcf') def generate_vcf(): """ Generates a .vcf file from query parameters and returns it for download. Example URL: /vcf?name=John%20Doe&email=john.doe@example.com&phone=1234567890 """ name = request.args.get('name', 'N/A') email = request.args.get('email', 'N/A') phone = request.args.get('phone', 'N/A') # Create a vCard object v = vobject.vCard() # Add Name v.add('n') v.n.value = vobject.vcard.Name(family=name.split(' ')[-1] if ' ' in name else '', given=name.split(' ')[0]) v.add('fn') v.fn.value = name # Add Email if email != 'N/A': v.add('email') v.email.value = email v.email.type_param = 'INTERNET' # Add Phone if phone != 'N/A': v.add('tel') v.tel.value = phone v.tel.type_param = 'CELL' # Serialize to string vcf_data = v.serialize() # Return as a downloadable file return Response( vcf_data, mimetype="text/vcard", headers={"Content-disposition": "attachment; filename=contact.vcf"} ) # --- Run the App --- if __name__ == '__main__': app.run(debug=True)

---------------------------------------------------------------------------
ModuleNotFoundError                       Traceback (most recent call last)
/tmp/ipython-input-1938458375.py in <cell line: 0>()
      5 from flask import Flask, request, jsonify, render_template_string, Response
      6 from PIL import Image
----> 7 import pytesseract
      8 import vobject
      9 

ModuleNotFoundError: No module named 'pytesseract'

---------------------------------------------------------------------------
NOTE: If your import is failing due to a missing package, you can
manually install dependencies using either !pip or !apt.

To view examples of installing some common dependencies, click the
"Open Examples" button below.
---------------------------------------------------------------------------

How to Run It

1. Save the code above as app.py.
2. Open your terminal in the same directory.
3. Run the command: python app.py
4. Open your web browser and go to http://127.0.0.1:5000.

You should see a simple webpage. Try uploading a business card image! It will show you the extracted text and a link to download the contact as a .vcf file.

---

📲 Step 2: The WhatsApp Integration (The Smart Way)

Directly adding a custom tool to the WhatsApp catalog isn't possible with their current API. The platform is designed for messaging and commerce, not for custom app integrations.

However, here is the professional and most effective solution:

Create a Digital Business Card Page with a QR Code

The web app we just built is the perfect digital business card! You can host it online and then use a QR code to direct people to it.

1. Host Your App: Deploy the Flask application to a hosting service like Heroku, PythonAnywhere, or a DigitalOcean Droplet. This will give you a public URL (e.g., https://your-card-scanner.herokuapp.com).
2. Create Your Personal vCard Link: Your app already has the vCard generator. Your personal link would look like this: https://<your-app-url>/vcf?name=YourName&email=your.email@server.com&phone=123456789
3. Generate a QR Code: Use a free online QR code generator to turn the link from step 2 into a QR code image.
4. Integrate with WhatsApp:
   • Profile Picture: You can add the QR code to a corner of your WhatsApp Business profile picture.
   • Quick Replies: Set up a quick reply in WhatsApp Business. When someone asks for your contact, you can use a shortcut (like /contact) to instantly send a message like: "Here's my digital business card! Just scan the QR code to add me to your contacts." along with the QR code image.
   • Catalog Link: While you can't add the app itself, you can add a "product" to your catalog named "My Digital Business Card" and use the "Link" field to point to your hosted web app. This is the cleanest integration possible.

This approach is great because anyone with a smartphone can scan the code, and it directs them to a page where they can instantly download your .vcf file, which works on both iPhone and Android.

📈 Next Steps and Improvements

This is a great starting point. Here’s how you can make it even better:

• Improve Text Parsing: The parse_contact_info function is very basic. You can significantly improve it using more advanced Regular Expressions (Regex) or even Natural Language Processing (NLP) libraries like spaCy to better identify which text is a name, a title, or a company.
• Build a Proper Database: For managing many cards, you should switch from SQLite to a more robust database like PostgreSQL. You would add functionality to save, view, edit, and delete the scanned contacts from your web interface.
• Add User Accounts: If you want others to use your service, you'll need to add user authentication so each person can manage their own set of scanned cards.
• Enhance the Frontend: Use a JavaScript framework like React or Vue.js to create a much more polished and responsive user interface.

Feel free to ask for the code for any of these improvements. Let's start with this foundation and build from there. Happy coding!

 The code we've written so far is the backend. It's the engine that does all the heavy lifting.

Great question. Now let's build on that backend to achieve your goal of scanning physical cards, storing them, and adding them to your phone. This involves three key upgrades:

1. A Database: To permanently store the contact info.
2. Permanent Image Storage: To save the business card image on the server.
3. A Contact List: A new page to view all your saved cards.

---

Workflow: From Physical Card to Phone Contact

Here’s how the complete process will work for you as the user:

1. Access the App: You'll open your phone's web browser (like Chrome or Safari) and go to the URL of your hosted application.
2. Scan the Card: The webpage will have an "Upload" button. Tapping it will let you either choose a photo from your library or open your phone's camera to take a picture of the physical business card right there.
3. Backend Processing: The photo is sent to your backend server. The server runs OCR, saves the contact details and the image file, and stores everything in a database.
4. Save to Phone: The server sends back the extracted info. You'll see a "Download vCard (.vcf)" link. Tapping this link on your phone will automatically prompt you to save the contact directly to your phone's address book (both iPhone and Android do this).
5. View & Share: You can go to a "My Contacts" page in the app to see all the cards you've scanned, view their images, and share their vCard files with others.

---

🛠️ Step 1: Modifying the Backend (app.py)

Let's update our app.py file to include database support and image storage. We'll use Python's built-in sqlite3 for our database, so there's no need to install anything new.

This updated code includes:

• A database initialization function.
• Logic to save images with unique names.
• Saving scanned contact info to the contacts.db file.
• New web pages (/contacts and /contact/<id>) to view your saved cards.

Updated app.py Code:

# app.py import os import re import sqlite3 import uuid # For generating unique filenames from flask import Flask, request, jsonify, render_template_string, Response, redirect, url_for, send_from_directory # --- App and Database Setup --- app = Flask(__name__) UPLOAD_FOLDER = 'uploads' DATABASE = 'contacts.db' app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER if not os.path.exists(UPLOAD_FOLDER): os.makedirs(UPLOAD_FOLDER) def get_db(): """Connects to the specific database.""" db = sqlite3.connect(DATABASE) db.row_factory = sqlite3.Row # This allows accessing columns by name return db def init_db(): """Initializes the database schema.""" with app.app_context(): db = get_db() with open('schema.sql', 'r') as f: db.cursor().executescript(f.read()) db.commit() # --- Helper Functions (from before, slightly modified) --- def process_image_with_ocr(image_path): """Performs OCR on an image file.""" try: from PIL import Image import pytesseract image = Image.open(image_path) extracted_text = pytesseract.image_to_string(image, lang='eng') # Add more languages as needed return extracted_text except Exception as e: print(f"Error processing image: {e}") return None def parse_contact_info(text): """Parses raw text to find contact fields.""" contact = { 'name': 'N/A', 'phone': 'N/A', 'email': 'N/A', 'company': 'N/A', 'title': 'N/A', 'raw_text': text } email_match = re.search(r'[\w\.-]+@[\w\.-]+', text) if email_match: contact['email'] = email_match.group(0) phone_match = re.search(r'(\+?\d{1,3}[\s-]?)??[\s.-]?\d{3}[\s.-]?\d{4}', text) if phone_match: contact['phone'] = phone_match.group(0) return contact # --- API Endpoints and Web Pages --- @app.route('/') def index(): """Serves the main upload page.""" return render_template_string(""" Business Card Scanner Upload Business Card View All Scanned Contacts """) @app.route('/scan', methods=['POST']) def scan_card(): """Handles file upload, OCR, and saving to the database.""" if 'file' not in request.files: return "No file part", 400 file = request.files['file'] if file.filename == '': return "No selected file", 400 # Generate a unique filename to prevent overwrites filename = str(uuid.uuid4()) + os.path.splitext(file.filename)[1] filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename) file.save(filepath) # Process and parse the image raw_text = process_image_with_ocr(filepath) if raw_text is None: return "Could not process image", 500 contact_info = parse_contact_info(raw_text) # Save to database db = get_db() cursor = db.cursor() cursor.execute( 'INSERT INTO contacts (name, email, phone, company, title, raw_text, image_filename) VALUES (?, ?, ?, ?, ?, ?, ?)', (contact_info['name'], contact_info['email'], contact_info['phone'], contact_info['company'], contact_info['title'], contact_info['raw_text'], filename) ) new_contact_id = cursor.lastrowid db.commit() db.close() # Redirect to the new contact's detail page return redirect(url_for('contact_detail', contact_id=new_contact_id)) @app.route('/contacts') def list_contacts(): """Displays a list of all saved contacts.""" db = get_db() contacts = db.execute('SELECT * FROM contacts ORDER BY id DESC').fetchall() db.close() html = "All Contacts Scan Another Card" for contact in contacts: html += f""" Email: {contact['email']} | Phone: {contact['phone']} View Details """ return render_template_string(html) @app.route('/contact/') def contact_detail(contact_id): """Displays the details for a single contact, including its image.""" db = get_db() contact = db.execute('SELECT * FROM contacts WHERE id = ?', (contact_id,)).fetchone() db.close() if contact is None: return "Contact not found", 404 return render_template_string(""" Contact Details Back to All Contacts Email: {{ contact['email'] }} Phone: {{ contact['phone'] }} Raw OCR Text: {{ contact['raw_text'] }} """, contact=contact) @app.route('/uploads/') def uploaded_file(filename): """Serves the stored image files.""" return send_from_directory(app.config['UPLOAD_FOLDER'], filename) @app.route('/vcf/') def generate_vcf(contact_id): """Generates a .vcf file for a specific contact.""" db = get_db() contact = db.execute('SELECT * FROM contacts WHERE id = ?', (contact_id,)).fetchone() db.close() if contact is None: return "Contact not found", 404 import vobject v = vobject.vCard() v.add('n') v.n.value = vobject.vcard.Name(given=contact['name']) v.add('fn') v.fn.value = contact['name'] if contact['email'] != 'N/A': v.add('email') v.email.value = contact['email'] v.email.type_param = 'INTERNET' if contact['phone'] != 'N/A': v.add('tel') v.tel.value = contact['phone'] v.tel.type_param = 'CELL' vcf_data = v.serialize() return Response( vcf_data, mimetype="text/vcard", headers={"Content-disposition": f"attachment; filename=contact_{contact_id}.vcf"} ) # --- Main Execution --- if __name__ == '__main__': # You might want to run init_db() manually the first time # from your terminal: python -c "from app import init_db; init_db()" app.run(debug=True)

🗄️ Step 2: Create the Database Schema

The Python code now expects a database table to exist. We need to define what that table looks like.

1. In the same project folder, create a new file named schema.sql.
2. Paste the following SQL code into it. This defines the contacts table with all the fields we need.

schema.sql File:

-- schema.sql
DROP TABLE IF EXISTS contacts;

CREATE TABLE contacts (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  name TEXT,
  email TEXT,
  phone TEXT,
  company TEXT,
  title TEXT,
  raw_text TEXT NOT NULL,
  image_filename TEXT NOT NULL,
  created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
);

---

▶️ Step 3: Initialize and Run the Application

1. Initialize the Database: Before you run the app for the first time, you need to create the contacts.db file and the table inside it. Open your VS Code terminal (with the (venv) activated) and run this one-time command:

   python -c "from app import init_db; init_db()"
   

   You should now see a new contacts.db file in your project folder.

2. Run the App: Now, start the server just like before:

   python app.py
   

Go to http://127.0.0.1:5000 in your browser. The app now has a link to "View All Scanned Contacts". When you upload and scan a card, it will redirect you to a details page showing the image and a big button to download the .vcf file to your phone's contacts.

Source from https://gist.github.com/isaacandy/06c07d811bf1fee269f83df845613e45