Question

我正在创建一个flask应用程序，该应用程序允许用户在画布上绘制字母，然后使用AJAX将图像发送到后端。在通过CNN之前，将图像转换为灰度并使用Pillow进行反转。将图像转换为灰度后，图像全为黑色。

//this is the JavaScript code for sending canvas drawing to backend
function sendData() {
        $('#result').hide();
        $('#loadingImage').show()
        var scratchCanvas = document.getElementById('can');
        var context = scratchCanvas.getContext('2d');
        var dataURL = scratchCanvas.toDataURL("image/png");

        $.ajax({
            type: "POST",
            url: "/imgToText",
            data: {
                imageBase64: dataURL
            }
        }).done(function (data) {
            document.getElementById("result").innerHTML = "This is letter: " + data
            $('#loadingImage').hide();
            $('#result').show();
        });
    }

def prepare_image(image, target):
    '''
    Preprocess the image and prepare it for classification
    '''
    img_array = Image.open(BytesIO(image))
    img_array.show()
    img_array.save("normalPicture.png")
    bw = img_array.convert('L');

    bw.show()
    bw.save("allblack.png")
    img_array = ImageOps.invert(img_array)

    new_array = img_array.resize((target,target))

    img = img_to_array(new_array)
    img = img/255.0
    img = np.expand_dims(img, axis=0)
    return img


@app.route('/imgToText', methods=['POST'])
def imgToText():
    '''
    Image is received as DataURI, it is convereted to Image, and preprocessed.
    The model uses the preprocessed image to make a prediction. 

    returns JSON representation of the model prediction

    '''
    image_b64 = request.values['imageBase64']
    image_data = re.sub('^data:image/.+;base64,', '', image_b64)
    image_data =base64.b64decode(image_data)
    IMG_SIZE =28
    img = prepare_image(image_data, IMG_SIZE)

    #load model
    #model = load_model('model.h5')
    #get class names 
    y_Labels = {0: 'A', 1: 'B', 2: 'C', 3: 'D', 4: 'E', 5: 'F', 6: 'G', 7: 'H', 8: 'I', 9: 'J', 10: 'K', 11: 'L', 12: 'M', 13: 'N', 14: 'O', 15: 'P', 16: 'Q', 17: 'R', 18: 'S', 19: 'T', 20: 'U', 21: 'V', 22: 'W', 23: 'X', 24: 'Y', 25: 'Z', 26: 'a', 27: 'b', 28: 'd', 29: 'e', 30: 'f', 31: 'g', 32: 'h', 33: 'n', 34: 'q', 35: 'r', 36: 't'}
    #make prediction
    prediction =model.predict_classes(img)
    return jsonify(y_Labels[prediction[0]])

这是img_array.show()的结果：

此图片正确。

这是bw.show()转换为灰度后的结果：

为什么将图像转换为灰度后全黑？

Answer 1

我认为PIL希望像素强度值在0到255之间。

您的图片的值介于0到1之间。

Answer 2

我遇到了这个问题，因为img_array具有透明的背景。为了解决这个问题，我用一种颜色填充了画布的背景。

这是我的画布：

    canvas = document.getElementById('can');
    ctx = canvas.getContext("2d");
    w = canvas.width;
    h = canvas.height;
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, w, h);
    $('#can').mousedown(function (e) {
        mousePressed = true;
        Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
    });

    $('#can').mousemove(function (e) {
        if (mousePressed) {
            Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
        }
    });

    $('#can').mouseup(function (e) {
        mousePressed = false;
    });
    $('#can').mouseleave(function (e) {
        mousePressed = false;
    });
    }

枕头将图像转换为全黑

2 个答案: