Ошибка типа: не удалось выполнить «arrayBuffer» для «Blob»: незаконный вызов — вставить большой двоичный объект в базу данных

У меня есть код JavaScript, который должен создать снимок экрана div image-container и отправить его в новый скрипт php:

html2canvas(image-container).then(function (canvas) {
    canvas.toBlob(function (blob) {
        jQuery.ajax({
            url:"//domain.com/wp-admin/admin-ajax.php",
            type: "POST",
            data: {action: "addblobtodb", image: blob},
            success: function(id) {
                console.info("Succesfully inserted into DB: " + id);
            }
        });

PHP-код, который вызывается в файле admin-ajax.php, показан ниже. Он пытается вставить изображение в таблицу test_images, которую я создал сам. Это простая таблица MySql с идентификатором и image_data:

function add_poster_to_db() {
    global $wpdb;
    $image = $_POST['image'];
    ob_start();

    // Insert een nieuwe rij aan de test_poster_images db
    $wpdb->insert('test_images', array(
        'image_data' => $image,
    ));
    $db_id = $wpdb->insert_id;

    wp_send_json( $db_id );

    die();
}

При вызове этого кода JavaScript отображаются следующие ошибки:

Как вставить объект в таблицу Wordpress?

javascript php ajax wordpress html2canvas

31.03.2024 16:12

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

458

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Разве вы не должны передавать URL-адрес BLOB-объекта для изображения, а не просто данные BLOB-объекта?

Потому что не похоже, что вы конвертируете большой двоичный объект в URL-адрес с помощью этого...

canvas.toBlob(function (blob){

  jQuery.ajax({

    url:"//domain.com/wp-admin/admin-ajax.php",
    type: "POST",
    data: {action: "addblobtodb", image: blob},
    success: function(id) {console.info("Succesfully inserted into DB: " + id);

   }

});

Так что я бы попробовал это...

canvas.toBlob((blob)=>{

 let Url=URL.createObjectURL(blob);

   jQuery.ajax({

    url:"//domain.com/wp-admin/admin-ajax.php",

    type: "POST",

    data: {action: "addblobtodb", image: Url},    // <-- Image blob url passed here

    success: function(id) {console.info("Succesfully inserted into DB: " + id);}

   });

 },'image/png',1); // <--- specify the type & quality of image here

Спасибо за быстрый ответ. Я попробовал ваш код, но в базе данных сохраняется только сгенерированный URL. Поэтому он генерирует URL-адрес (например, example.com/4d594f29-c227-4f76-a8f6-c6d68c046593) и вставляет его в таблицу БД. После этого я не могу получить доступ к сгенерированному URL-адресу. Как сохранить изображение в базе данных, чтобы потом просмотреть его?

— 31.03.2024 19:52

31.03.2024 16:43

Хорошо, тогда пусть БД будет иметь большой двоичный объект в необработанном формате...

canvas.toBlob((blob)=>{

   jQuery.ajax({

    url:"//domain.com/wp-admin/admin-ajax.php",

    type: "POST",

    data: {action: "addblobtodb", image: blob},

    success: function(id) {console.info("Succesfully inserted into DB: " + id);}

   });

 },'image/png',1); // <--- specify the type & quality of image here

Я все еще получаю ошибку TypeError: failed to execute 'arrayBuffer' on 'Blob': Illegal invocation при использовании этого...

— 01.04.2024 10:28

01.04.2024 00:06