jquery datatables: отображать изображение с URL-адреса BLOB-объекта - PullRequest
Новая
       16

jquery datatables: отображать изображение с URL-адреса BLOB-объекта

0 голосов
/ 14 апреля 2020

В столбце datatables я хочу отобразить изображение. Изображение генерируется путем отправки данных ячейки стороннему API, который требует запрос POST и возвращает необработанное / двоичное изображение png.

Что отлично работает вне таблиц данных: 

// jquery ajax call. data is binary/raw png image
success: function ( data ) {
    var image = document.getElementById(image_tag_id)        
    var url = window.URL || window.webkitURL;
    image.src = url.createObjectURL(data);
}

Это внутри функции, которая принимает идентификаторы тегов изображения и данные в качестве аргументов. Ранее я использовал тег (HTMLElement) напрямую, но изменил его на id для воспроизведения с функцией datatables render.

Это изменение фактически делает то, что я хочу, теоретически, работает (придумал, когда писал этот вопрос) с функцией рендеринга ниже: 

"render": function ( data, type, row, meta ) {
   if (type==="display") {
       var tag_id = "image-" + meta.row;
       getImage(tag_id, data);
       return '<img id="' + tag_id + '">';
   } else {
       return data;
   }
}

Но это имеет условие гонки. Предполагается, что возвращенная строка html всегда генерирует тег быстрее, чем изображение выбирается с помощью вызова ajax (что, вероятно, всегда так, но мне это не нравится)

Так как я могу решить этот вопрос лучше? Нужно ли создавать только теги изображений и делать все остальное после?

1 Ответ

0 голосов
/ 14 апреля 2020

Вместо получения изображения в render можно просто создать пустой тег изображения с набором классов. Затем в функции drawCallback выполните итерацию по всем сгенерированным тегам изображения и получите изображение с помощью вызова ajax. Это гарантирует отсутствие условий гонки.

Однако я пошел другим путем и создал свой собственный сервис, который работает с запросами GET. Затем это позволяет установить атрибут sr c тегов изображения, как обычно. Кроме того, изображения также можно кэшировать, и исходные данные для изображения не нужно переносить на веб-страницу.

...