如何在 React 中从 canva 创建 EMNIST/MNIST 图像？

Question

我正在使用 canva/konva.js 允许用户在前端绘制数字并将它们发送到后端以进行一些图像检测。我正在使用 EMNIST，因为我允许所有字母，但我的检测非常非常糟糕......

我最初认为这可能是我正在获取的数据，但结果证明 MNIST 也无法使用它。

这是我在 python 中的检测代码：

from extra_keras_datasets import emnist 
    (input_train, target_train), (input_test, target_test) = emnist.load_data(type='balanced')

  
input_train = tf.keras.utils.normalize(input_train, axis = 1) 
input_test = tf.keras.utils.normalize(input_test, axis = 1)

def train():

    model = tf.keras.models.Sequential()
    model.add(tf.keras.layers.Flatten(input_shape=(28, 28)))
    model.add(tf.keras.layers.Dense(256, activation='relu'))
    model.add(tf.keras.layers.Dense(256, activation='relu'))
    model.add(tf.keras.layers.Dense(62, activation='softmax'))

    model.compile(optimizer='adam', loss='sparse_categorical_crossentropy', metrics=['accuracy'])

    model.fit(input_train, target_train, epochs = 20)

这是我的画布代码（使用 konva.js）：

<Stage
            width={window.innerWidth/4}
            height={window.innerHeight/3}
            onMouseDown={handleMouseDown}
            onMousemove={handleMouseMove}
            onMouseup={handleMouseUp}
            onTouchStart={handleTouchStart}
            onTouchMove={handleTouchMove} 
            onTouchEnd={handleTouchEnd}
            id="stage"
            ref={stageRef}
            className="stage" >
            <Layer>
            <Rect
                x={0}
                y={0}
                width={window.innerWidth}
                height={window.innerHeight}
                fill="white"
                shadowBlur={0}   />
            {lines.map((line, i) => (
                <Line
                    key={i}
                    points={line.points}
                    stroke="#000000"
                    strokeWidth={4}
                    tension={0.5}
                    lineCap="round"
                    lineJoin="round"
                    globalCompositeOperation={
                        line.tool === 'eraser' ? 'destination-out' : 'source-over'
                    }
                />
            ))}
            </Layer>
        </Stage>

以下是我处理图像的方式：

我这样做是因为我得到的是白色背景图像上的黑色文本。 我删除空格并旋转它并反转颜色（因为它看起来就是这样）。

我试过在画布上使我的笔触变粗，但它似乎不起作用。

我只是想知道如何处理我的图像/设置画布，以便它生成 EMNIST 可以检测到的图像？

img = opencv.remove_whitespace(path)
    img = cv2.imread(path)[:, :, 0]
    img = cv2.resize(img, (28, 28))
    img = cv2.bitwise_not(img)
    # img = cv2.rotate(img, cv2.ROTATE_90_COUNTERCLOCKWISE)
    # img = cv2.flip(img, 0)
    
    cv2.imshow("img", img)
    cv2.waitKey(0)

    img = np.array([img])
        
    model = tf.keras.models.load_model('model.model')
    prediction = model.predict(img)
    print("The predicted value is : ", prediction)
    classes = np.argmax(prediction,axis=1)
    print("Predicted class: ", classes)