作爲帖子變量的圖片

我正在使用一個網站，其中有一項功能供用戶使用畫布自由形式的鋼筆工具直接在網頁上簽名。當用戶單擊'應用簽名'按鈕時，用戶繪製的簽名被轉換爲圖像並以<img src="">（如下面的代碼所示）的形式保存在頁面上。直到這一點，一切都很好。作爲帖子變量的圖片

問題是，當用戶提交表單時，我試圖將新創建的畫布圖像作爲後期變量提交併作爲已簽名的簽名在process.php頁面上呈現。看起來，image（toDataURL（））作爲post變量傳遞，但由於某種原因，它不會在process.php頁面上呈現。它看起來像沒有找到圖像源。

我是JavaScript新手，我一直在試圖解決這個問題好幾天了，我希望有任何幫助解決這個問題。提前謝謝了！

標記

<div class="signature-field"> 
    Sign: 
    <span class="sketch-container"> 
     <canvas id="simple_sketch" width="350" height="100"></canvas> 
    </span> 
    Date: <input name="signature-date" type="text"><br/> 
    <div class="signature-buttons"> 
     <span class="save-signature">Apply Signature | </span> 
     <span class="reset-canvas">| Reset Signature</span><br/> 
    </div> 
</div> 


<form method="post" action="process.php"> 
    <input type="text" name="fname"> 
    <input id="signature" name="signature" type="hidden"> 
    <input type="submit"> 
</form>

的JavaScript

$(function() { 
    var sktch = $('#simple_sketch').sketch(); 
    var cleanCanvas = $('#simple_sketch')[0]; 

    $('.save-signature').click(function() { 
     /* replace canvas with image */ 
     var canvas = document.getElementById("simple_sketch"); 
     var img = canvas.toDataURL("image/png"); 
     $('#simple_sketch').replaceWith('<img src="' + img + '"/>'); 
     $('.signature-buttons').replaceWith(''); 
     document.getElementById("signature").value = $('.sketch-container').html(); 
    }); 
});

來源

2012-12-27 AnchovyLegend

我不太清楚你在這裏做什麼，但如果你想通過隱藏signature場後的圖像數據，只要做到這一點：

document.getElementById("signature").value = document.getElementById("simple_sketch").toDataURL("image/png");

至於現在，它看起來像你發佈的圖像數據，包括<img>標籤（"<img src="<DataUrl>"/>"）

來源

2012-12-27 14:20:51 Cerbrus

感謝您的回覆。即使經過此修改，數據也以相同的方式傳遞，並且圖像源仍然未找到，因此無論如何。 – AnchovyLegend

然後問題可能是在你的服務器端數據（我至少保存了幾行代碼）。你能否告訴我們你如何試圖讀取數據，服務器端？另外，你是否知道'toDataURL'不會將圖像保存到任何地方？它將原始圖像數據發送到base64編碼的服務器。你必須在那裏解碼圖像。 – Cerbrus

我正在閱讀img簽名數據，我將其他任何$ _POST變量...'$ _POST ['signature']'... – AnchovyLegend

談談你的服務器端代碼，是IMG PARAM輸出是空的？你確定img數據正在通過請求發送嗎？嘗試使用像Fiddler或Wireshark這樣的包嗅探工具，並分析請求的內容（您也可以用Firebug快速瀏覽一下）。

也許你可以嘗試一些其他的方法來IMG數據轉換： https://developer.mozilla.org/en-US/docs/HTML/Canvas/Pixel_manipulation_with_canvas

來源

2012-12-27 14:20:39 theMarceloR

感謝您的答覆。是的，圖像數據正在通過請求傳遞，但當它作爲$ _POST var傳遞後嘗試渲染時，未找到源... – AnchovyLegend

只需仔細檢查：您是否在本地測試這個？你能排除任何損壞的數據/網絡問題嗎？ – theMarceloR

是的，我可以。我正在本地和非本地測試它並獲得相同的結果。 – AnchovyLegend

作爲帖子變量的圖片

回答

相關問題