Python 枕头将图像转换为全黑色

Python 枕头将图像转换为全黑色,python,flask,html5-canvas,python-imaging-library,Python,Flask,Html5 Canvas,Python Imaging Library,我正在创建一个flask应用程序,允许用户在画布上绘制一封信,并使用AJAX将图像发送到后端。在通过CNN之前,图像被转换成灰度并使用枕头反转。将图像转换为灰度后,图像将全部为黑色 //this is the JavaScript code for sending canvas drawing to backend function sendData() { $('#result').hide(); $('#loadingImage').show()

我正在创建一个flask应用程序,允许用户在画布上绘制一封信,并使用AJAX将图像发送到后端。在通过CNN之前,图像被转换成灰度并使用枕头反转。将图像转换为灰度后,图像将全部为黑色

//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()
结果:


为什么图像在转换为灰度后都是黑色的?

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


您的图像的值介于0和1之间。

我遇到这个问题是因为
img\u数组的背景是透明的。为了解决这个问题,我用颜色填充画布的背景

这是我的画布:

    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;
    });
    }

看起来您是对的,但是如何使像素强度值介于0和255之间?我尝试了
new\u image=[I*255.0 for I in img\u array]
,但没有成功。尝试
new\u image=img\u array.dot(255).astype(np.uint8)