枕头将图像转换为全黑

如何解决枕头将图像转换为全黑

我正在创建一个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()转换为灰度后的结果：

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

解决方法

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

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

,

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

这是我的画布：

    canvas = document.getElementById('can');
    ctx = canvas.getContext("2d");
    w = canvas.width;
    h = canvas.height;
    ctx.fillStyle = "white";
    ctx.fillRect(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,true);
        }
    });

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