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

Question

Я хочу изменить изображение, когда я нажимаю на него с изображением с другого диска. Для этого я создал эту функцию Python:

@main.route('/tester/', methods=['GET', 'POST'])
def tester():
    if request.method == "GET":
        test_img = "D:\TBV_Data\MS_CO_Front_20120403_140154_0001140_006.png"
        return send_file(test_img, mimetype='image/png')  

Я запрашиваю эти данные с помощью следующей функции:

function testFunc() {
    $.ajax({
        url: '/tester', //server url
        type: 'GET',    //passing data as post method
        async: false,
        success: function(data) {
            $("#myimage9").attr("src", "data:image/png;base64," + data);
        },
    });
};

Результатом "src" изображения, к сожалению, являетсязагрузка странных данных:

<img id="myimage9" src="data:image/png;base64,�PNG
IHDR�I!�IDATx���׮mK�&amp;�}�;��morg��c�V��)C�� B��.�(z�� ��� ��*��B�y2�I��^~��]D�1��ÁDb�9��&amp;�E����o-���OZl��/_���NJ��%�%�т���6�ݴw�~��EE���-�[p�z^3Y����8��#�

Я могу себе представить, что я не правильно закодировал изображение. Может кто-нибудь сказать мне, что я делаю неправильно?

РЕДАКТИРОВАТЬ: я пытался закодировать данные в base64 с помощью:

function utoa(str) {
    return window.btoa(unescape(encodeURIComponent(str)));
};

Это, к сожалению, просто изменяет данные на следующее, ноне будет отображать изображение:

<img id="myimage9" src="data:image/png;base64,/VBORw0KGgoAAAANSUhEUgAABRAAAAP9CAIAAAAUSSH9AAEAAElEQVR4/f397m1L/Sb9ff0OO/39bW9yZ/39Y/0dVv39KUP9/SBC/f0u/Sh6A

Answer 1

На стороне сервера добавьте переменную filename к вашему маршруту:

import os
from flask import request, send_from_directory

IMAGE_DIR = r"D:\TBV_Data"

@main.route('/tester/<filename>')
def tester(filename):
    return send_from_directory(IMAGE_DIR, filename)

При этом используется функция send_from_directory , чтобы убедиться, что клиент не может загружать файлы из за пределами указанного каталога путем ввода имен файлов, содержащих такие вещи, как \..\ (это называется «атака обхода каталога»).

И на стороне клиента:

function testFunc(selector, filename) {
    $(selector).attr("src", "/tester/" + encodeURIComponent(filename) );
}

Использование encodeURIComponent() является хорошим стилем и предотвращает проблемы с именами файлов, которые содержат специальные символы. Браузер будет запрашивать изображение, как только его атрибут src изменится, здесь не нужно ничего делать через Ajax.

---

Предотвращение атаки через каталог только с send_file() - это немного большевовлечено:

filepath = os.path.realpath(os.path.join(IMAGE_DIR, filename))
if os.path.commonprefix([filepath, IMAGE_DIR]) != IMAGE_DIR:
    abort(404)

return send_file(filepath)

Пути к файлам в Windows нечувствительны к регистру, поэтому IMAGE_DIR должен содержать фактический регистр пути, в противном случае этот тест не пройден.