將Ajax響應圖像元素拖放到畫布上

我在我的網站上有一個上傳照片按鈕，它可以在數據庫上上傳jpeg和png格式文件。以及在成功完成後在網站上顯示照片。將Ajax響應圖像元素拖放到畫布上

成功完成後，阿賈克斯成功調用after_success功能，具有響應數據作爲參數。

函數看起來像這樣：

function after_success(data){ 


}

響應數據的模樣：

<img src="uploads/56dda66be0181.png">

無論圖像從這種反應我試圖上來畫在畫布上。

我的解決方案：

var canv=document.getElementById("output"); 
var ctx=canv.getContext("2d"); 
var canimg=($('img',data)); 
ctx.drawImage(canimg,10,10);

但是，這似乎並沒有做work.How我得到這個canvas元素上的圖像？

注：使用事業部元素和jQuery 的.html（）它顯示股利元素內的圖像。

來源

2016-03-07 BOTJr.

你想從響應img標籤o畫到圖像？ – Anubhab

是啊，那就是我正在做的事@Anubhab –

其他方法是否可以接受？我的意思是，即使在您通過發佈請求發送相同內容之前，您也可以展示圖片，並向用戶提供快速上傳的想法，然後顯示響應的成功和失敗 - 這是否可以接受？其次，您是否也收到了其他數據作爲響應與用戶相關？即每個說的絕對文件路徑？希望在發佈解決方案之前確認這些信息。 – Anubhab

function after_success(data){ 
    $('#hiddendiv').html(data); 
    var img=new Image(); 

    img.src=$('#hiddendiv').find('img').attr('src'); 

    $('#hiddendiv').hide(); 

     var canv=document.getElementById("output"); 
     var ctx=canv.getContext("2d"); 
    img.onload= function() { 
     ctx.drawImage(img,10,10); 
    }

這是我做過什麼來實現same.Thanks爲@ anubhab.Gave我一個公平的想法，該怎麼辦this.Just扭傷了代碼位。

來源

2016-03-07 19:00:31

好吧，如果我理解正確，從上傳的響應你會得到一個圖像標記，你想繪製相同的圖像到與輸出的畫布。

分解 - 1.你給出了從作爲響應獲得的img標籤的src中獲取圖像url。 2.你必須把它畫到輸出

var after_success = function(data){ 

    $('.someHiddenDiv').append(data);//append the response data to some div which is invisible. This is just to get jQuery to access the element as dom. 

     var img = new Image();//well initialize a new image 
     //on load of the image draw it on to canvas 
     img.onload = function(){ 
      var canvas = document.getElementById('output'); 
      var ctx = canvas.getContext('2d'); 
      ctx.drawImage(img,10,10);//same as what you have done 
     }; 
     img.src = $('.someHiddenDiv').find('img').attr('src');//get source from the image tag 

    }

這應該工作！

來源

2016-03-07 16:33:19 Anubhab

以及它所做的是，它顯示的div內的圖像，你已經追加和畫布出現空：3。當onload已經完成時，你不需要隱藏div嗎？因爲這個div會定義顯示圖像。除此畫布外不會顯示圖像 –

對於你給我的想法。 +1。 @Anubhab謝謝。 –

'.append'只能工作一次。如果再次使用上傳按鈕，它不會更新畫布內的新圖片。 –

將Ajax響應圖像元素拖放到畫布上

回答

相關問題