如何使用JavaScript将Base64彩色图片转为灰度图（Cordova场景）

Got it, let's walk through how to pull this off—we'll use the Cordova Camera plugin to grab the image, the browser's Canvas API to convert it to grayscale, and then store the resulting Base64 string in your database. Here's the step-by-step breakdown:

1. Configure Cordova Camera to Get Base64 Image First #

First, make sure you've set up the Cordova Camera plugin correctly. When capturing the photo, you need to set destinationType to DATA_URL so it returns the image directly as a Base64 string (instead of a file path).

Here's a sample capture function:

function capturePhoto() {
  navigator.camera.getPicture(
    onPhotoDataSuccess,
    onFail,
    {
      quality: 50, // Adjust quality to control Base64 size
      destinationType: Camera.DestinationType.DATA_URL,
      encodingType: Camera.EncodingType.JPEG // JPEG is better for smaller Base64 strings
    }
  );
}

function onPhotoDataSuccess(imageData) {
  // imageData is your color image's Base64 string (starts with data:image/jpeg;base64,)
  convertToGrayscale(imageData)
    .then(grayscaleBase64 => {
      // Now store this grayscale Base64 in the database
      storeGrayscaleImage(grayscaleBase64);
    })
    .catch(error => {
      console.error("Grayscale conversion failed:", error);
    });
}

function onFail(message) {
  alert('Failed because: ' + message);
}

2. Convert Base64 Color Image to Grayscale Using Canvas #

The Canvas API lets us manipulate pixel data directly. We'll create an image from the Base64 string, draw it to a canvas, then adjust each pixel to its grayscale equivalent.

Since image loading is asynchronous, we'll wrap this in a Promise to handle it cleanly:

function convertToGrayscale(colorBase64) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    // Allow cross-origin (though local camera images shouldn't need this, but safe to add)
    img.crossOrigin = "anonymous";
    
    img.onload = function() {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      
      // Set canvas size to match the image
      canvas.width = img.width;
      canvas.height = img.height;
      
      // Draw the color image to the canvas
      ctx.drawImage(img, 0, 0);
      
      // Get pixel data
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      const data = imageData.data;
      
      // Loop through each pixel and convert to grayscale
      for (let i = 0; i < data.length; i += 4) {
        // Grayscale formula: 0.299*R + 0.587*G + 0.114*B (industry standard for natural tone)
        const gray = data[i] * 0.299 + data[i+1] * 0.587 + data[i+2] * 0.114;
        // Set R, G, B to the gray value; keep alpha (data[i+3]) unchanged
        data[i] = gray;
        data[i+1] = gray;
        data[i+2] = gray;
      }
      
      // Put modified pixel data back to canvas
      ctx.putImageData(imageData, 0, 0);
      
      // Convert canvas back to Base64 (JPEG for smaller size)
      const grayscaleBase64 = canvas.toDataURL('image/jpeg', 0.5); // 0.5 is quality adjustment
      resolve(grayscaleBase64);
    };
    
    img.onerror = function(error) {
      reject("Failed to load image: " + error);
    };
    
    // Set the image source to the Base64 string
    img.src = `data:image/jpeg;base64,${colorBase64}`;
  });
}

Note: The grayscale formula uses standard luminance weights to get a natural-looking result. You can tweak the numbers if you want a different tonal shift, but this is the go-to for most use cases.

3. Store Grayscale Base64 in Your Database #

Assuming you're using Cordova's SQLite plugin (the most common choice for local databases), here's how to set up and insert the data:

First, install the plugin if you haven't already:

cordova plugin add cordova-sqlite-storage

Then, create a function to handle database operations:

function storeGrayscaleImage(grayscaleBase64) {
  // Open or create the database
  const db = window.sqlitePlugin.openDatabase({name: 'myImageDB.db', location: 'default'});
  
  db.transaction(tx => {
    // Create table if it doesn't exist
    tx.executeSql(
      'CREATE TABLE IF NOT EXISTS grayscale_images (id INTEGER PRIMARY KEY AUTOINCREMENT, image_data TEXT)',
      [],
      () => console.log("Table ready"),
      (tx, error) => console.error("Table creation error:", error)
    );
    
    // Insert the grayscale Base64 string
    tx.executeSql(
      'INSERT INTO grayscale_images (image_data) VALUES (?)',
      [grayscaleBase64],
      (tx, result) => {
        console.log("Image stored successfully! ID:", result.insertId);
        alert("Grayscale image saved to database.");
      },
      (tx, error) => console.error("Insert error:", error)
    );
  });
}

Key Tips to Avoid Headaches #

• Base64 Size: High-quality images produce huge Base64 strings. Adjust the quality parameter in both the Camera plugin and canvas.toDataURL() to keep the string manageable for database storage.
• Asynchronous Flow: Don’t try to use the converted Base64 before the convertToGrayscale promise resolves—always handle the promise chain properly.
• Permissions: Double-check that your Cordova app has the necessary camera permissions set up in config.xml and platform-specific files (like AndroidManifest.xml or Info.plist).

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