使用Transcrypt转换Python图片压缩代码时无法导入PIL模块

Hey there! Let's figure out why you're running into this PIL import error with Transcrypt, and how to fix it so you can get image compression working in JavaScript.

Transcrypt converts Python code to JavaScript, but it can't handle Python modules built with C extensions—like PIL/Pillow. PIL relies heavily on Python's C API, which doesn't exist in the JavaScript runtime (whether you're targeting a browser or Node.js). So when Transcrypt tries to import PIL, it has no way to translate those C-backed parts into JS, hence the import failure.

Since PIL is off the table, you'll need to use JavaScript-native tools for image compression. Here are two approaches depending on your target environment:

1. Browser-Friendly Compression with the Canvas API #

If you're aiming to run this in a web browser, the browser's built-in canvas API can handle image compression. You can call this JS logic directly from your Transcrypt Python code using interop.

First, update your Python code to trigger the JS function:

from transcrypt import JavaScript

class FileUpload:
    def Images(self, file):
        # Call our JavaScript compression function
        JavaScript("compressImage")(file)

Then add this JavaScript code to your HTML file (or a linked JS file):

function compressImage(file) {
    const reader = new FileReader();
    
    reader.onload = function(e) {
        const img = new Image();
        img.onload = function() {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            
            // Keep the original image dimensions (adjust if needed)
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            
            // Convert to JPEG with 90% quality
            canvas.toBlob(function(blob) {
                // Example: download the compressed image
                const downloadLink = document.createElement('a');
                downloadLink.href = URL.createObjectURL(blob);
                downloadLink.download = 'img_compressed.jpg';
                downloadLink.click();
                URL.revokeObjectURL(downloadLink.href);
            }, 'image/jpeg', 0.9);
        };
        
        img.src = e.target.result;
    };
    
    reader.readAsDataURL(file);
}

2. Node.js Compression with Sharp #

If you're targeting Node.js instead of the browser, use a Node.js image processing library like sharp—it's fast and easy to integrate via Transcrypt's JS interop.

First, install sharp in your Node.js project:

npm install sharp

Then adjust your Python code to use sharp:

from transcrypt import JavaScript

class FileUpload:
    def Images(self, file_path):
        # Import sharp from Node.js
        sharp = JavaScript("require('sharp')")
        
        # Compress the image and save it
        sharp(file_path)
            .jpeg({ quality: 90 })
            .toFile('img_compressed.jpg')
            .then(lambda: print("Image compressed successfully!"))
            .catch(lambda err: print(f"Error compressing image: {err}"))

Transcrypt works best with pure Python code—any module that uses C extensions (like PIL) won't translate to JS. By switching to JavaScript-native tools (canvas for browsers, sharp for Node.js), you can achieve the same image compression functionality in your Transcrypt-compiled code.

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