html2canvas 更改 img src 后保存图像

Question

我正在使用 html2canvas 将 html 保存为图像。 我的html代码如下

<div id="target" class="center-block imgStruc" style="width:92%;">
    <div class="center-block eventName makeMeDraggable box">
        <div class="text">                      
            <div class="text1">Test Data</div>
        </div>
    </div>
    <div class="imgCont clearfix"><img src="http://mydomainname/image.jpg" alt="" class="img-responsive" id="changeImg"></div>
</div>

<div class="col-sm-6">
    <input type="submit" value="Save &amp; Continue »" onClick="snap_onclick()"/>
    <form method="POST" enctype="multipart/form-data" action="savecard.php" id="myForm">
        <input type="hidden" name="img_val" id="img_val" value="" />
    </form>
</div>

我的javascript如下

function snap_onclick() {
    $('#target').html2canvas({
        onrendered: function (canvas) {
            $('#img_val').val(canvas.toDataURL("image/png"));
            document.getElementById("myForm").submit();
        }
    });
}

目标 div 的图像已创建。但是当我使用以下 jquery 代码更改 changeImg 的图像 src 时

function changeImage()
{
    $('#changeImg').attr('src','http://mydomainname/path-to-image/image.jpg');
}

然后点击保存按钮，它只创建带有文本部分的图像，更改的图像还没有出现。

save.php如下

<?php
//Get the base-64 string from data
//echo $_POST['img_val'];

$filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1);

//Decode the string
$unencodedData=base64_decode($filteredData);

//Save the image
file_put_contents('img.png', $unencodedData);
?>
<h2>Save the image and show to user</h2>
<table>
    <tr>
        <td>
            <a href="img.png" target="blank">
                Click Here to See The Image Saved to Server</a>
        </td>
        <td align="right">
            <a href="index.php">
                Click Here to Go Back</a>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <br />
            <br />
            <span>
                Here is Client-sided image:
            </span>
            <br />
<?php
//Show the image
echo '<img src="'.$_POST['img_val'].'" />';
?>
        </td>
    </tr>
</table>
<style type="text/css">
body, a, span {
    font-family: Tahoma; font-size: 10pt; font-weight: bold;
}
</style>

新图像在同一个域中。

Answer 1

好的，不要像以前那样添加按钮...... 你有这样的html吗？（我在网上和其他人一起sobstitute图像......）

<div class="col-md-3 col-sm-4 col-xs-4 single-right-grid-left"> 
    <a onclick="changeImage()"> <img style="width:50px;" id="drag1" class="drag" alt="" src="http://beblex.it/wp/wp-content/uploads/2014/05/Online1.jpg">
    </a> 
</div>

<div id="target" class="center-block imgStruc" style="width:92%;">
    <div class="center-block eventName makeMeDraggable box">
        <div class="text">                      
            <div class="text1">Test Data</div>
        </div>
     </div>
    <div class="imgCont clearfix">
        <img src="http://www.bottegamonastica.org/wp-content/uploads/Finalmente-Online.jpg" alt="" class="img-responsive" id="changeImg" style="width:50px;">
    </div>
</div>

<div class="col-sm-6">

    <input type="submit" value="Save &amp; Continue »" onClick="snap_onclick()"/>
    <form method="POST" enctype="multipart/form-data" action="savecard.php" id="myForm">
        <input type="hidden" name="img_val" id="img_val" value="" />
    </form>

</div>

js和你粘贴的一样....