Question

我想将画布转换为png图像并将其放在页面上。我的问题是如果我的画布上有图像，它就不会被转换。这是我的HTML：

<html>
    <head>
        <meta charset='UTF-8'>

        <link rel="stylesheet" type="text/css" href="./assets/css/general.css">

        <script type="text/javascript" src="./codetests.js"></script>
    </head>

    <body>
        <div class="wrapper" id="wrap1">

            <img id="persphoto" src="./images/nouserimage.png" style="display:none;">

            <input type="hidden" id="persname" value="Test Testinen">
            <input type="hidden" id="adress" value="Testgatan 1">
            <input type="hidden" id="postaddr" value="12345 Teststad">
            <input type="hidden" id="homephone" value="0123456789">
            <input type="hidden" id="cellphone" value="0712345678">

            <canvas src="" id="canvasresult" width="296px" height="420px" />
            <br>
        </div>
        <script type="text/javascript"> drawCanvas(); </script>
        <script type="text/javascript"> convertCanvasToImage(canvasresult); </script>
    </body>
</html>

我的JavaScript如下：

// Converts canvas to an image
function convertCanvasToImage(canvas) {
    var image = new Image();

    image.src = canvas.toDataURL("image/png");
    //return image;

    document.getElementById("wrap1").appendChild(image);
}

function drawCanvas() {
    var c = document.getElementById("canvasresult");

    h=parseInt(document.getElementById("canvasresult").getAttribute("height"));
    w=parseInt(document.getElementById("canvasresult").getAttribute("width"));

    //get context
    var ctx = c.getContext("2d");

    //Fill the path
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0,0,w,h);

    var img=document.getElementById("persphoto");
    ih=parseInt(document.getElementById("persphoto").getAttribute("height"));
    iw=parseInt(document.getElementById("persphoto").getAttribute("width"));

    var maxw = 150;
    var maxh = 150;

    if (ih > iw) {
        var newh = 150;
        var neww = Math.round(150 * (iw / ih));
    } else if (ih < iw) {
        var newh = Math.round(150 * (ih / iw));
        var neww = 150;
    } else {
        var newh = 150;
        var neww = 150;
    }

    var newx = Math.round((296 - neww) / 2);
    var newy = 60 + Math.round((150 - newh) / 2);

    img.onload = function() {
        ctx.drawImage(img,newx,newy,neww,newh);
    };


    ctx.fillStyle = "#000000";
    ctx.font = '10pt Verdana';
    ctx.textAlign = 'center';
    ctx.fillText(document.getElementById("persname").value, w/2, h*0.65);
    ctx.fillText(document.getElementById("adress").value, w/2, h*0.69);
    ctx.fillText(document.getElementById("postaddr").value, w/2, h*0.73);
    ctx.fillText(document.getElementById("homephone").value, w/2, h*0.77);
    ctx.fillText(document.getElementById("cellphone").value, w/2, h*0.81);


    var canvasData = c.toDataURL("image/png");
    /*
    document.getElementById("canvasdata").value = canvasData;
    document.getElementById("hidepersphoto").value = document.getElementById("persphoto").value;
    document.getElementById("hidepersname").value = document.getElementById("persname").value;
    document.getElementById("hideadress").value = document.getElementById("adress").value;
    document.getElementById("hidepostaddr").value = document.getElementById("postaddr").value;
    document.getElementById("hidehomephone").value = document.getElementById("homephone").value;
    document.getElementById("hidecellphone").value = document.getElementById("cellphone").value;
    */
}

我的问题就像我说的那样，当我调用convertCanvasToImage当前画布上的任何图像都没有被转换。结果是：

enter image description here

有人能发现问题所在吗？

Answer 1

几点变化：

传递canvasId的字符串文字"canvasresult"而不是变量。

<script type="text/javascript"> convertCanvasToImage("canvasresult"); </script>

根据Id：

获取画布对象

// Converts canvas to an image
function convertCanvasToImage(canvasId) {
    var image = new Image();
    var canvas=document.getElementById(canvasId);

    image.src = canvas.toDataURL("image/png");
    //return image;

    document.getElementById("wrap1").appendChild(image);
}

将画布转换为图像不包括画布上的图像

1 个答案: