类型错误：无法在“Blob”上执行“arrayBuffer”：非法调用 - 将 blob 插入数据库

Question

我有这个 javascript 代码，应该创建

image-container

div 的屏幕截图并将其发送到新的 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.log("Succesfully inserted into DB: " + id);
            }
        });

admin-ajax.php

文件中调用的php代码如下所示。它尝试将图像 blob 插入我自己创建的

test_images

表中。这是一个带有 ID 和 image_data 的简单 MySql 表：

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 表中插入 blob？

Answer 1

您不是要传递图像的 blob-URL 而不仅仅是 blob-plain 吗？

因为看起来你并没有用这个将 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.log("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.log("Succesfully inserted into DB: " + id);}

   });

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

我希望它有帮助...