Fatal编程技术网
  • javascript/
  • Javascript 将画布转换为图像不包括画布上的图像

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

javascript html image canvas

Javascript 将画布转换为图像不包括画布上的图像,javascript,html,image,canvas,Javascript,Html,Image,Canvas,我想将画布转换为png图像并将其放在页面上。我的问题是，如果我的画布上有一个图像，它不会被转换。这是我的HTML： <html> <head> <meta charset='UTF-8'> <link rel="stylesheet" type="text/css" href="./assets/css/general.css"> <script type="text/javascr

我想将画布转换为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>




画布（）；
转换CanvasToImage（canvasresult）；
我的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;
    */
}

//将画布转换为图像
函数转换器CANVASTOIMAGE（画布）{
var image=新图像（）；
image.src=canvas.toDataURL（“image/png”）；
//返回图像；
document.getElementById（“wrap1”）.appendChild（图像）；
}
函数drawCanvas（）{
var c=document.getElementById（“canvasresult”）；
h=parseInt（document.getElementById（“canvasresult”）.getAttribute（“height”）；
w=parseInt（document.getElementById（“canvasresult”）.getAttribute（“width”）；
//获取上下文
var ctx=c.getContext（“2d”）；
//填充路径
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；
如果（ih>iw）{
var-newh=150；
var neww=数学四舍五入（150*（iw/ih））；
}否则如果（ih
我的问题是，正如我所说，当我调用
convertCanvasToImage
时，画布上当前的任何图像都不会被转换。结果是：

有人能找出问题所在吗？

几处变化：

传递canvasId的字符串literal
“canvasresult”
，而不是变量

<script type="text/javascript"> convertCanvasToImage("canvasresult"); </script>
您是否在没有图像上显示：无样式的情况下运行此操作？@steveukx是的，除了图像可见外，它没有任何区别…在这种情况下，
canvasresult
是什么<代码>转换CanvasToImage（canvasresult）？@w3d它是画布的id。虽然您的函数需要一个对象，但我得到一个错误
未捕获类型错误：未定义不是这一行的函数：
image.src=canvas.toDataURL（“image/png”）@BluePrint在哪个浏览器中出现此错误？我猜它没有找到ID传递给函数的canvas元素（这表明您没有像Vijay的代码那样传递
“canvasresult”
），但是，在这种情况下，错误不一定是我所期望的（在WebKit中，您会得到
未捕获的TypeError:无法读取null的属性“toDataURL”
）。请您发布一个JSFIDLE示例，复制和纠正行为会更容易。谢谢您的帮助。但是，我解决了这个问题，在一个完全不同的页面上创建画布图像，并将其存储在服务器上，然后在我想要的页面上显示它。我仍然不知道哪里出了问题，但我会坚持这一点这是一个有效的解决方案。

// 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);
}