Warm tip: This article is reproduced from serverfault.com, please click
canvas wordpress jspdf

canvas-WordPress中的jsPDF导致未捕获的类型错误（无法读取属性“ length”）

(canvas - jsPDF in Wordpress causing uncaught Type error (Cannot read property 'length'))

发布于 2020-11-30 19:34:12

嘿，我正在研究wordpress打印个人PDF的插件。在我自己的XAMPP上，一切正常，但是知道我收到此错误。

我使用Google API和canvas函数生成QR码，以将该图像转换为jsPDF的base64。

但是在控制台中，我收到了此错误消息

但是我不知道jsPDF库生成此错误是什么问题

Uncaught TypeError: Cannot read property 'length' of undefined
    at Object.jsPDFAPI.binaryStringToUint8Array (jspdf.debug.js:4197)
    at Object.jsPDFAPI.addImage (jspdf.debug.js:4395)
    at createPDF ((index):303)

这是我的代码：

<?php
/**
 * The template for displaying single airdrop post type
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package airdrop
 */

get_header(); ?>

<?php
do_action( 'airdrop_wrapper' ); ?>

<?php
while ( have_posts() ) : the_post(); ?>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.1.1/jspdf.umd.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>
    <script type="text/javascript" src="https://platin-grading.de/wp-content/plugins/airdrop/templates/image.js"></script>
    <div class="table">
        <div class="row">

        <div class="airdrop-thumbnail-wrap col-lg-5 col-md-5 col-sm-4 col-xs-12">

            <figure class="airdrop-thumbnail">
                <?php if( has_post_thumbnail() ) {
                    echo '<a rel="bookmark" href="'. esc_url( get_permalink() ) . '">';
                    the_post_thumbnail( 'airdrop-main-thumbnail' );
                    echo '</a>';
                }
                ?>


            </figure>
        </div>
        <?php
        $name_pokemon                   = get_post_meta( get_the_ID(), 'name_pokemon', true );
        $code_pokemon                   = get_post_meta( get_the_ID(), 'code_pokemon', true );
        $lang_pokemon                   = get_post_meta( get_the_ID(), 'lang_pokemon', true );
        $setname_pokemon                = get_post_meta( get_the_ID(), 'setname_pokemon', true );
        $zustand_pokemon                = get_post_meta( get_the_ID(), 'zustand_pokemon', true );
        $zustand_zahl_pokemon           = get_post_meta( get_the_ID(), 'zustand_zahl_pokemon', true );
        $code_card_pokemon              = get_post_meta( get_the_ID(), 'code_card_pokemon', true );
        $value_centering                = get_post_meta( get_the_ID(), 'value_centering', true );
        $value_corners                  = get_post_meta( get_the_ID(), 'value_corners', true );
        $value_edges                    = get_post_meta( get_the_ID(), 'value_edges', true );
        $value_surface                  = get_post_meta( get_the_ID(), 'value_surface', true );
        $post_id                        = $post->ID;


        ?>



        <div class="col-lg-7 col-md-7 col-sm-8 col-xs-12">
            <table class="airdrop-single-summary" style="width: 100%; border-collapse: collapse;">
                <tr>
                    <td colspan="2">
                        <i class="fas fa-user" style="font-size: 30px; color: #00b359;"> </i>
                        <h1 class="airdrop-name" style="padding-left: 15px;"> <?php echo esc_textarea( $name_pokemon ); ?></h1>
                    </td>
                </tr>

                <!-- Airdrop Token Symbol -->
                <tr>
                    <td><span class="airdrop-symbol"><i class="fas fa-language"  style="color: #00b359"></i> <?php _e( "Sprache", 'airdrop' ); ?></span></td>
                    <td><?php echo esc_textarea( $lang_pokemon ); ?></td>
                </tr>

                <tr>
                    <td><span class="airdrop-req"> <i class="fas fa-user-friends" style="color: #00b359"></i> <?php _e( "Name des Sets", 'airdrop' ); ?></span></td>
                    <td><?php echo esc_textarea( $setname_pokemon); ?></td>
                </tr>
                <tr>
                    <td><span class="airdrop-symbol"><i class="far fa-calendar-alt"  style="color: #00b359"></i> <?php _e( "Veroeffentlicht im Jahr", 'airdrop' ); ?></span></td>
                    <td><?php echo esc_textarea( $code_pokemon ); ?></td>
                </tr>
                <tr>
                    <td><span class="airdrop-req"> <i class="far fa-comment" style="color: #00b359"></i> <?php _e( "Zustand (Worte)", 'airdrop' ); ?></span></td>
                    <td><?php echo esc_textarea( $zustand_pokemon) ; ?></td>
                </tr>
                <tr>
                    <td><span class="airdrop-req"> <i class="fas fa-star-half-alt" style="color: #00b359"></i> <?php _e( "Zustand (Zahl)", 'airdrop' ); ?></span></td>
                    <td><?php echo esc_textarea( $zustand_zahl_pokemon) ; ?></td>
                </tr>
                <tr>
                    <td><span class="airdrop-symbol"><i class="far fa-calendar-alt"  style="color: #00b359"></i> <?php _e( "Veroeffentlicht im Jahr", 'airdrop' ); ?></span></td>
                    <td><?php echo esc_textarea( $code_pokemon ); ?></td>
                </tr>
                <tr>
                    <td><span class="airdrop-req"><i class="fas fa-barcode"  style="color: #00b359"></i> <?php _e( "Kartencode", 'airdrop' ); ?></span></td>
                    <td><?php echo esc_textarea( $code_card_pokemon); ?></td>
                </tr>
                <tr>
                    <td><span class="airdrop-req"><i class="fas fa-star"  style="color: #00b359"></i> <?php _e( "Bewertungen (falls vorhanden)", 'airdrop' ); ?></span></td>
                    <td><?php echo  esc_textarea( "Centering: " .$value_centering); ?><br>
                    <?php echo  esc_textarea( "Corners: " .$value_corners); ?><br>
                    <?php echo  esc_textarea( "Edges: " .$value_edges); ?><br>
                    <?php echo  esc_textarea( "Surface: " .$value_surface); ?></td>
                </tr>
                <tr>
                    <td><span class="QR-Code">Qr-Code:</span></td>

                    <?php
                            $string = get_permalink();
                            $link = utf8_decode($string);

                    ?>
                    <td><img id="qr" src="<?php echo 'https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl='.$link.'&choe=UTF-8'?>" title="Link to PGS" crossorigin="anonymous" alt="QR-Code"></td>
                </tr>
            </table>


            <button onclick="createPDFextra()">Print with Extra</button>
            <button onclick="createPDF()">Print normal</button>

            <script type="text/javascript">

                let qrUrl = '<?php echo 'https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl='.$link.'&choe=UTF-8'?>';
                let qrCode;

                function getDataUrl(img) {
                    // Create canvas
                    const canvas = document.createElement('canvas');
                    const ctx = canvas.getContext('2d');
                    // Set width and height
                    canvas.width = img.width;
                    canvas.height = img.height;
                    // Draw the image
                    ctx.drawImage(img, 0, 0);
                    return canvas.toDataURL('image/png');
                }
                // Select the image
                const img = document.querySelector('#qr');
                img.addEventListener('load', function (event) {
                    const dataUrl = getDataUrl(event.currentTarget);
                    qrCode = dataUrl;
                    console.log(dataUrl);
                });

            </script>


            <script>

                // Default export is a4 paper, portrait, using millimeters for units
                function createPDF(){

                    const doc = new jsPDF({
                        orientation: 'p',
                        unit: 'mm',
                        format: 'a4',
                        putOnlyUsedFonts:true,
                        floatPrecision: 0 // or "smart", default is 16
                    });

                    doc.text("Etikett:", 10, 10);


                    doc.rect(10,20,63,20);  //rectangle above
                    doc.rect(10,40,63,20);  //rectangle below

                    doc.addImage(img_logo, 'JPEG', 10, 41, 18, 18);    //Add Logo
                    doc.setFontSize(6);
                    doc.text("<?php  echo $code_pokemon . " " . $setname_pokemon ?>", 30, 43);   //Add Year and Setname of Card
                    doc.text("<?php  echo $lang_pokemon ?>", 30, 45);   //Add Language
                    doc.text("<?php echo "#" . $code_card_pokemon . " " . $name_pokemon?>", 30, 47);    //Add Cardcode and Name

                    doc.setFontSize(30);
                    doc.text("<?php  echo $zustand_zahl_pokemon?>", 63, 50, 'center');        //Add Number in BIG
                    doc.setFontSize(6);

                    doc.text("<?php  echo $zustand_pokemon ?>", 63, 53, 'center');            //Add Number as word



                    //Rückseite


                    doc.addImage(qrCode, 'PNG' , 11, 21, 18, 18);            //Add QR-Code
                    doc.text("<?php  echo $post_id ?>", 22, 21,null,180);                    //Add POST-ID

                    doc.text("www.platin-grading.de", 55, 21,null,180);                    //Add Website URL

                    doc.save("test.pdf");

                    doc.output('dataurlnewwindow', 'test.pdf');
                }



                // Default export is a4 paper, portrait, using millimeters for units
                function createPDFextra(){

                    const doc2 = new jsPDF({
                        orientation: 'p',
                        unit: 'mm',
                        format: 'a4',
                        putOnlyUsedFonts:true,
                        floatPrecision: 0 // or "smart", default is 16
                    });

                    doc2.text("Etikett:", 10, 10);


                    doc2.rect(10,20,63,20);  //rectangle above
                    doc2.rect(10,40,63,20);  //rectangle below

                    doc2.addImage(img_logo, 'JPEG', 10, 41, 18, 18);    //Add Logo
                    doc2.setFontSize(6);
                    doc2.text("<?php  echo $code_pokemon . " " . $setname_pokemon ?>", 30, 43);   //Add Year and Setname of Card
                    doc2.text("<?php  echo $lang_pokemon ?>", 30, 45);   //Add Language
                    doc2.text("<?php echo "#" . $code_card_pokemon . " " . $name_pokemon?>", 30, 47);    //Add Cardcode and Name
                    doc2.setFontSize(4);
                    doc2.text("CENTERING: ", 30, 53);
                    doc2.text("<?php  echo $value_centering ?>", 40, 53);   //Add value of center
                    doc2.text("CORNERS: ", 45, 53);
                    doc2.text("<?php  echo $value_corners ?>", 55, 53);   //Add value of center
                    doc2.text("EDGES: ", 30, 55);
                    doc2.text("<?php  echo $value_edges ?>", 40, 55);   //Add value of center
                    doc2.text("SURFACE: ", 45, 55);
                    doc2.text("<?php  echo $value_surface ?>", 55, 55);   //Add value of center




                    doc2.setFontSize(30);
                    doc2.text("<?php  echo $zustand_zahl_pokemon?>", 63, 50, 'center');        //Add Number in BIG
                    doc2.setFontSize(6);

                    doc2.text("<?php  echo $zustand_pokemon ?>", 63, 53, 'center');            //Add Number as word



                    //Rückseite


                    doc2.addImage(qrCode, 'PNG' , 11, 21, 18, 18);            //Add QR-Code
                    doc2.text("<?php  echo $post_id ?>", 22, 21,null,180);                    //Add POST-ID

                    doc2.text("www.platin-grading.de", 55, 21,null,180);                    //Add Website URL







                    doc2.save("test.pdf");

                    doc2.output('dataurlnewwindow', 'test.pdf');
                }



            </script>




        </div>
        </div>
    </div>

    <?php

    the_content();
    the_post_navigation();

    // If comments are open or we have at least one comment, load up the comment template.
    if ( comments_open() || get_comments_number() ) :
        comments_template();
    endif;
endwhile; // End of the loop.
?>

    <!-- #primary -->
<?php do_action( 'airdrop_wrapper_close' ); ?>

    <script src="https://kit.fontawesome.com/27b0ded188.js" crossorigin="anonymous"></script>


<?php
get_footer();
Questioner
Philipp
Viewed
0
分享
Philipp 2020-12-01 21:55:04

我不知道为什么它现在可以工作...

我将代码更改为：

<script type="text/javascript">

                let qrUrl = '<?php echo 'https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl='.$link.'&choe=UTF-8'?>';
                let qrCode, qrCode2;


                function getDataUrl(img) {
                    // Create canvas
                    const canvas = document.createElement('canvas');
                    const ctx = canvas.getContext('2d');
                    // Set width and height
                    canvas.width = img.width;
                    canvas.height = img.height;
                    // Draw the image
                    ctx.drawImage(img, 0, 0);
                    return canvas.toDataURL('image/png');
                }
                // Select the image
                const img = document.querySelector('#qr');
                qrCode2 = getDataUrl(img);
                console.log(qrCode2);

                img.addEventListener('load', function (event) {             //Dead Code
                    const dataUrl = getDataUrl(event.currentTarget);
                    const dataUrl2 = getDataUrl(img.getAttribute('src'));
                    qrCode = dataUrl;

                    console.log(dataUrl);
                    console.log(qrCode);
                    console.log(dataUrl2);
                    //document.writeln(qrCode2);
                    //document.writeln(dataUrl2);



                });

            </script>

所以我认为将图像放入画布的功能是错误的，并且空字符串导致jsPDF中的错误

热门帖子

1
推荐一些好玩的/大众的手游
2
求指教后端项目迁移方案
3
迷你洗衣机是不是都是智商税？
4
求助一个排查了半年没解决的 MySQL order by 子句导致索引失效的问题， 500 多万条记录的小表要查快两分钟
5
个人开发了一款 WordPress 主题： iPao，集成了 AI 总结功能
6
偶然发现奇游加速器会在系统里植入根证书
7
国内有蒲公英替代品推荐吗？
8
语音助手这个东西真的会监听谈话并且上传，从而泄漏隐私吗？
9
出一些有意思的域名-明盘
10
jetbrains 全家桶升级 2024 后，在滚动代码时候感觉有点掉帧

热门github

1
A multi-platform library for OpenGL, OpenGL ES, Vulkan, window and input (翻译：适用于 OpenGL、OpenGL ES、Vulkan、窗口和输入的多平台库)
2
Dev tool that writes scalable apps from scratch while the developer oversees the implementation (翻译：可扩展开发工具的 PoC，该工具从头开始编写整个应用程序，同时开发人员监督实施)
3
shadcn/ui, but for Svelte. ✨ (翻译：shadcn-svelte是shadcn/ui的非官方社区主导的Svelte端口。)
4
The Python Risk Identification Tool for generative AI (PyRIT) is an open access automation framework to empower security professionals and machine learning engineers to proactively find risks in their generative AI systems. (翻译：用于生成式 AI 的 Python 风险识别工具 (PyRIT) 是一个开放式访问自动化框架，使安全专业人员和机器学习工程师能够主动发现其生成式 AI 系统中的风险。)
5
Performance-portable, length-agnostic SIMD with runtime dispatch (翻译：Highway 是一个提供可移植 SIMD/向量内在函数的 C++ 库。)
6
ZK Credo (翻译：ZK信条)
7
OpenCodeInterpreter: Integrating Code Generation with Execution and Refinement (翻译：OpenCodeInterpreter：将代码生成与执行和优化集成)
8
Joplin - the secure note taking and to-do app with synchronisation capabilities for Windows, macOS, Linux, Android and iOS. (翻译：Joplin - 一个开源的笔记和待办事项应用程序，具有Windows，macOS，Linux，Android和iOS的同步功能。)
9
Mamba is a new state space model architecture showing promising performance on information-dense data such as language modeling, where previous subquadratic models fall short of Transformers. It is based on the line of progress on structured state space models, with an efficient hardware-aware design and implementation in the spirit of FlashAttention. (翻译：Mamba 是一种新的状态空间模型架构，在信息密集型数据（例如语言建模）上显示出良好的性能，而之前的二次模型在 Transformers 方面存在不足。它基于结构化状态空间模型的进展，并本着FlashAttention的精神进行高效的硬件感知设计和实现。)
10
This repository contains System Design resources which are useful while preparing for interviews and learning Distributed Systems (翻译：该存储库包含系统设计资源，在准备面试和学习分布式系统时非常有用)
11
Curso para aprender el lenguaje de programación Python desde cero y para principiantes. 75 clases, 37 horas en vídeo, código, proyectos y grupo de chat. Fundamentos, frontend, backend, testing, IA... (翻译：从零开始学习 Python 编程语言的课程，适合初学者)
12
🎓 Path to a free self-taught education in Computer Science! (翻译：🎓计算机科学免费自学教程！)
13
1️⃣🐝🏎️ The One Billion Row Challenge -- A fun exploration of how quickly 1B rows from a text file can be aggregated with Java (翻译：十亿行挑战 —— 使用 Java 对文本文件中的 10 亿行数据进行聚合的有趣探索)
14
A collective list of free APIs (翻译：免费 API 的集合列表)
15
📚 Freely available programming books (翻译：📚 免费提供的编程书籍)