Изображение от холста до колбы становится полностью черным в оттенках серого

Question

Имея проблему, которая убивает меня, в основном у меня есть холст, на котором я рисую цифру. Когда я нажимаю сохранить, это изображение отправляется обратно во Flask и сохраняется. Когда я преобразовываю это изображение в оттенки серого и сохраняю его, новый сохраненный файл становится абсолютно черным.

Вот странная вещь, если я рисую изображение на холсте, отправляю его в Flask (где оно сохраняется), откройте это изображение с помощью Paint, сохраните его в Paint и запустите через преобразователь оттенков серого, все в порядке, и я действительно не уверен, почему.

Мне кажется, что это как-то связано с преобразованием base64но не уверен, что.

Любая помощь оценивается

Мой холст

$( document ).ready(function() {
  function init(container, width, height, fillColor) {
    var canvas = createCanvas(container, width, height);
    var ctx = canvas.context;
    ctx.fillCircle = function(x, y, radius, fillColor) {
      this.fillStyle = fillColor;
      this.beginPath();
      this.moveTo(x, y);
      this.arc(x, y, radius, 0, Math.PI * 2, false);
      this.fill();
    };

    canvas.onmousemove = function(e) {
      if (!canvas.isDrawing) {
        return;
      }
      var x = e.pageX - this.offsetLeft;
      var y = e.pageY - this.offsetTop;
      var radius = 1.5;
      var fillColor = 'rgb(0,0,0)';
      ctx.fillCircle(x, y, radius, fillColor);
    };
    canvas.onmousedown = function(e) {
      canvas.isDrawing = true;
    };
    canvas.onmouseup = function(e) {
      canvas.isDrawing = false;
    };
  } 

  var container = document.getElementById('canvas');
  init(container, 28, 28  , '#ddd');

  function createCanvas(parent, width, height) {
    var canvas = document.getElementById("canvas");
    canvas.context = canvas.getContext('2d');

    return canvas;
  }

  function clearCanvas() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
        ctx.clearRect(0, 0, canvas.width, canvas.height);
  }

  function publishCanvas() {
    var canvas = document.getElementById("canvas");
    var dataURL=canvas.toDataURL();

    $.ajax({
        type:"POST",
        url:"/upload",
        data:{
            imageBase64:dataURL
            }
        }).done(function(o){
            console.log('saved');
        });
  }
  $( "#clearButton" ).click(function(){
    clearCanvas();
  });

  $( "#publishButton" ).click(function(){
    publishCanvas();
  });
});

Колба

@app.route('/upload', methods=['Post'])
def upload():
    image_b64=request.values[('imageBase64')]
    base64_data = re.sub('^data:image/.+;base64,', '', image_b64)
    print(base64_data)
    output=open('DrawnNumber.png', 'wb')
    decoded=base64.b64decode(base64_data)
    # Write the decoded data to output.png, should now store the drawn image
    output.write(decoded)
    output.close()

    return "doesn't matter"

Класс обработчика изображений

import numpy as np

from PIL import Image
from PIL import ImageOps as io
import numpy as np
import matplotlib.pyplot as plt

import mnistbase as mb

def processImage(image):
    loadedImg = Image.open(image)
    sized = io.fit(loadedImg, (28, 28)) 

    grey = sized.convert("L") # <-- HERE is where it turns completely black, when grayscaling it

    im = grey.point((lambda x: 0 if x<128 else 255), '1') # Mode 1 (black/white)
    im.save('img.png') # Save the new image

    imgArr = np.ndarray.flatten(np.array(im)).reshape(1, 784)
    imgArr = imgArr.reshape(imgArr.shape[0], 28, 28, 1)
    imgArr = imgArr.astype('float32')
    return imgArr

https://prnt.sc/prp15k - изображение перед тем, как оно достигает линии шкалы серого в Imageprocessor https://prnt.sc/prp1cl - то же изображение после того, как оно достигает линии шкалы серого, просто черный ящик 28x28