我想在画布中显示二维码

Question

我想用这种方式在画布中显示二维码，但它不会显示，因为当鼠标位于画布上时，网址剂量会显示。

我尝试了这个https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=Example来自https://goqr.me/

使用上面的链接从输入中获取电子邮件并将其生成为二维码。

这是我的代码：

constgenerateButton = document.getElementById('generate'); const downloadButton = document.getElementById('下载');

    const canvas = document.getElementById('cardCanvas');
    const canvasdiv = document.getElementById('canvas');
    const context = canvas.getContext('2d');

    generateButton.addEventListener('click', generateImage);
    downloadButton.addEventListener('click', downloadImage);

    function generateImage() {

        var name_Ar = document.getElementById("name_ar").value;
        var name_Eng = document.getElementById("name_eng").value;

        var jop_Ar = document.getElementById("jop_ar").value;
        var jop_Eng = document.getElementById("jop_eng").value;

        var phone = document.getElementById("phone").value;
        var email = document.getElementById("email").value;
        //qr img
        var qr_img = document.createElement("qrImage");


        // Clear the canvas
        context.clearRect(0, 0, canvas.width, canvas.height);

       

        // Create an image data string
        const imageData = 'style/images/busseCard.png'; // Replace with your base64-encoded image data

        // Draw the image onto the canvas
        const sampleImage = new Image();

        sampleImage.style.width = '2056px';
        sampleImage.style.height = '1000';

        sampleImage.src = imageData;
        sampleImage.onload = function () {
            context.drawImage(sampleImage, 0, 0, canvas.width, canvas.height);


            // Add text
            context.fillStyle = 'black';
            context.font = 'bold 24px Arial';
            context.textAlign = 'center';

            // add on arabic and english cards (name)
            context.fillText(name_Ar, canvas.width / 3.2, canvas.height / 2.2); //done
            context.fillText(name_Eng, canvas.width / 1.5, canvas.height / 2.2); //done

            // add on arabic and english cards (jop)
            context.fillText(jop_Ar, canvas.width / 3.1, canvas.height / 1.9);   //done
            context.fillText(jop_Eng, canvas.width / 1.5, canvas.height / 1.9);  //done

            // add on arabic and english cards (phone)
            context.fillText(phone, canvas.width / 3.31, canvas.height / 1.555); //done
            context.fillText(phone, canvas.width / 1.51, canvas.height / 1.529); //done

            // add on arabic and english cards (email)
            context.fillText(email, canvas.width / 3.31, canvas.height / 1.423); 
            context.fillText(email, canvas.width / 1.51, canvas.height / 1.4); 

           
           


            qr_img.onload = function () {
                qr_img.src = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data="+email;
                context.drawImage(qr_img, canvas.width / 1.51, canvas.height / 1.4);

            };
        };
       
    }

Answer 1

我通过改变解决了问题

var qr_img = document.createElement("qrImage");

到图像对象：

var qr_img = new Image();