跨JS与Kotlin的Bitmap处理模块接口化实现方案问询

Absolutely! This approach is totally feasible and actually a great practice for cross-environment code reuse—perfect for your use case where you want to handle Bitmap/PNG operations across JS, Java desktop, and Android Kotlin. Let me walk you through this step by step, since you're new to this:

The key here is to define a universal interface that outlines all the core image operations you need (load, get pixel, set pixel, save, etc.), then write platform-specific implementations that follow this interface. This way, your core business logic can use the interface without caring about the underlying platform details.

First, create a shared contract for all your image processors. Since we're working with different languages, we'll define the interface separately for Kotlin/Java and JavaScript, but keep the method signatures consistent.

Kotlin/Java Interface #

// Works for both Kotlin (Android) and Java (desktop)
interface ImageProcessor {
    fun loadImage(source: Any): Boolean // Accepts file paths, bytes, etc.
    fun getPixel(x: Int, y: Int): Int // Returns ARGB integer value
    fun setPixel(x: Int, y: Int, argb: Int)
    fun saveAsPng(destination: Any): Boolean // Saves to file/path
    fun getWidth(): Int
    fun getHeight(): Int
}

JavaScript Abstract Class (Interface Alternative) #

JS doesn't have native interfaces, so we'll use an abstract class to enforce the contract:

class ImageProcessor {
    constructor() {
        if (new.target === ImageProcessor) {
            throw new Error("Can't instantiate this abstract class—use a platform-specific implementation!");
        }
    }

    loadImage(source) {
        throw new Error("You need to implement the 'loadImage' method!");
    }

    getPixel(x, y) {
        throw new Error("You need to implement the 'getPixel' method!");
    }

    setPixel(x, y, argb) {
        throw new Error("You need to implement the 'setPixel' method!");
    }

    saveAsPng(destination) {
        throw new Error("You need to implement the 'saveAsPng' method!");
    }

    getWidth() {
        throw new Error("You need to implement the 'getWidth' method!");
    }

    getHeight() {
        throw new Error("You need to implement the 'getHeight' method!");
    }
}

Now write the actual code that interacts with each platform's native image APIs.

Java Desktop (Using BufferedImage) #

import java.awt.image.BufferedImage;
import java.io.File;
import javax.imageio.ImageIO;

public class JavaDesktopImageProcessor implements ImageProcessor {
    private BufferedImage image;

    @Override
    public boolean loadImage(Object source) {
        if (!(source instanceof File)) return false;
        try {
            image = ImageIO.read((File) source);
            return image != null;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
    }

    @Override
    public int getPixel(int x, int y) {
        if (image == null || x < 0 || x >= image.getWidth() || y < 0 || y >= image.getHeight()) {
            return 0; // Default to transparent black
        }
        return image.getRGB(x, y);
    }

    @Override
    public void setPixel(int x, int y, int argb) {
        if (image != null && x >= 0 && x < image.getWidth() && y >= 0 && y < image.getHeight()) {
            image.setRGB(x, y, argb);
        }
    }

    @Override
    public boolean saveAsPng(Object destination) {
        if (!(destination instanceof File) || image == null) return false;
        try {
            return ImageIO.write(image, "png", (File) destination);
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
    }

    @Override
    public int getWidth() {
        return image != null ? image.getWidth() : 0;
    }

    @Override
    public int getHeight() {
        return image != null ? image.getHeight() : 0;
    }
}

Android Kotlin (Using Bitmap) #

import android.graphics.Bitmap
import android.graphics.BitmapFactory
import java.io.FileOutputStream

class AndroidImageProcessor : ImageProcessor {
    private var bitmap: Bitmap? = null

    override fun loadImage(source: Any): Boolean {
        return try {
            bitmap = when (source) {
                is String -> BitmapFactory.decodeFile(source) // File path
                is ByteArray -> BitmapFactory.decodeByteArray(source, 0, source.size)
                else -> null
            }
            bitmap != null
        } catch (e: Exception) {
            e.printStackTrace()
            false
        }
    }

    override fun getPixel(x: Int, y: Int): Int {
        return bitmap?.let { bmp ->
            if (x in 0 until bmp.width && y in 0 until bmp.height) bmp.getPixel(x, y) else 0
        } ?: 0
    }

    override fun setPixel(x: Int, y: Int, argb: Int) {
        bitmap?.let { bmp ->
            if (x in 0 until bmp.width && y in 0 until bmp.height) {
                bmp.setPixel(x, y, argb)
            }
        }
    }

    override fun saveAsPng(destination: Any): Boolean {
        return try {
            bitmap?.let { bmp ->
                val fos = FileOutputStream(destination as String)
                bmp.compress(Bitmap.CompressFormat.PNG, 100, fos)
                fos.close()
                true
            } ?: false
        } catch (e: Exception) {
            e.printStackTrace()
            false
        }
    }

    override fun getWidth(): Int = bitmap?.width ?: 0
    override fun getHeight(): Int = bitmap?.height ?: 0
}

JavaScript Browser (Using Canvas) #

class BrowserImageProcessor extends ImageProcessor {
    constructor() {
        super();
        this.canvas = document.createElement('canvas');
        this.ctx = this.canvas.getContext('2d');
        this.image = null;
    }

    async loadImage(source) {
        return new Promise((resolve) => {
            const img = new Image();
            img.onload = () => {
                this.canvas.width = img.width;
                this.canvas.height = img.height;
                this.ctx.drawImage(img, 0, 0);
                this.image = img;
                resolve(true);
            };
            img.onerror = () => resolve(false);
            
            // Handle file inputs, URLs, or base64 strings
            if (source instanceof File) {
                img.src = URL.createObjectURL(source);
            } else {
                img.src = source;
            }
        });
    }

    getPixel(x, y) {
        if (!this.image || x < 0 || x >= this.canvas.width || y < 0 || y >= this.canvas.height) {
            return 0;
        }
        const pixelData = this.ctx.getImageData(x, y, 1, 1).data;
        // Convert RGBA to ARGB to match Java/Kotlin format
        return (pixelData[3] << 24) | (pixelData[0] << 16) | (pixelData[1] << 8) | pixelData[2];
    }

    setPixel(x, y, argb) {
        if (!this.image || x < 0 || x >= this.canvas.width || y < 0 || y >= this.canvas.height) return;
        // Extract RGBA from ARGB integer
        const alpha = (argb >> 24) & 0xff;
        const red = (argb >> 16) & 0xff;
        const green = (argb >> 8) & 0xff;
        const blue = argb & 0xff;
        this.ctx.fillStyle = `rgba(${red}, ${green}, ${blue}, ${alpha / 255})`;
        this.ctx.fillRect(x, y, 1, 1);
    }

    async saveAsPng(destination) {
        if (!this.image) return false;
        // Trigger a download in the browser
        const link = document.createElement('a');
        link.download = destination || 'edited-image.png';
        link.href = this.canvas.toDataURL('image/png');
        link.click();
        return true;
    }

    getWidth() { return this.canvas.width; }
    getHeight() { return this.canvas.height; }
}

Now you can write core logic that uses the ImageProcessor interface, and it will work across all platforms:

Java Desktop Example #

File input = new File("input.png");
ImageProcessor processor = new JavaDesktopImageProcessor();
if (processor.loadImage(input)) {
    int pixel = processor.getPixel(50, 50);
    processor.setPixel(50, 50, 0xFFFF0000); // Red pixel
    processor.saveAsPng(new File("output.png"));
}

Android Kotlin Example #

val processor = AndroidImageProcessor()
if (processor.loadImage("/storage/emulated/0/input.png")) {
    val pixel = processor.getPixel(50, 50)
    processor.setPixel(50, 50, 0xFFFF0000)
    processor.saveAsPng("/storage/emulated/0/output.png")
}

Browser JS Example #

const processor = new BrowserImageProcessor();
document.querySelector('#file-upload').addEventListener('change', async (e) => {
    const file = e.target.files[0];
    if (await processor.loadImage(file)) {
        const pixel = processor.getPixel(50, 50);
        processor.setPixel(50, 50, 0xFFFF0000);
        await processor.saveAsPng('edited-image.png');
    }
});

• Keep the interface minimal: Only include methods that are truly universal—avoid platform-specific features in the contract.
• Handle edge cases: Always check for null images, out-of-bounds pixel coordinates, and invalid inputs.
• Test each platform separately: Each environment has quirks (like Android file permissions, browser CORS) that you'll need to debug individually.
• Use consistent data formats: We used ARGB integers for pixels across all platforms to keep logic uniform.

内容的提问来源于stack exchange，提问作者James B.