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嗎？（我在線上和其他人一起吸收了圖像...。）

<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與您粘貼的相同。...