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