HTML5畫布從瀏覽器拖出到桌面

我試圖創建一個小圖像操作的Web應用程序作爲一個項目。我試圖將瀏覽器中的Drag畫布圖像實現到桌面。我已經做了一些挖掘和發現HTML5畫布從瀏覽器拖出到桌面

http://www.thecssninja.com/javascript/gmail-dragout和http://jsfiddle.net/bgrins/xgdSC/（TheCssNinja &布賴恩格林斯蒂德提供）

function dragoutImages() { 

    if (!document.addEventListener) { 
     return; 
    } 

    document.addEventListener("dragstart", function(e) { 
     var element = e.target; 
     var src; 

     if (element.tagName === "IMG" && element.src.indexOf("data:") === 0) { 
      src = element.src; 
     } 

     if (element.tagName === "CANVAS") { 
      try { 
       src = element.toDataURL(); 
      } 
      catch(e) { } 
     } 

     if (src) { 
      var name = element.getAttribute("alt") || "download"; 
      var mime = src.split(";")[0].split("data:")[1]; 
      var ext = mime.split("/")[1] || "png"; 
      var download = mime + ":" + name + "." + ext + ":" + src; 

      e.dataTransfer.setData("DownloadURL", download); 
     } 
    }, false); 
    } 


    function drawCanvas(){ 
    var canvas = document.getElementById('mycanvas'); 
    var ctx = canvas.getContext('2d'); 

    var lingrad = ctx.createLinearGradient(0,0,0,150); 
    lingrad.addColorStop(0, '#000'); 
    lingrad.addColorStop(0.5, '#669'); 
    lingrad.addColorStop(1, '#fff'); 


    ctx.fillStyle = lingrad; 

    ctx.fillRect(0, 0, canvas.width, canvas.height); 

    var img = new Image(); 
    img.src = canvas.toDataURL("image/png"); 
    img.alt = 'downloaded-from-image'; 

    $(img).appendTo("body"); 

    } 

    dragoutImages(); 
    drawCanvas();

這適用於它們的HTML元素的文件，但我無法抓住畫布圖像和下載它使用這個理論。有沒有人實現過這樣的功能？

我已經使用canvas.toDataURL來獲取圖像數據，如果我做了一個警報，我看到編碼的圖像數據我的畫布拖動開始，但是當在瀏覽器外部時，圖標變回停止符號。

尋找關於如何實現這一點的方法和想法。

這是我已經成功地實施和效果很好，從cssninja和Brian格林斯蒂德

function download(e){ 
downloadImageData = eCanv.getImageData(750 - (scaledWidth/2), 250 - (scaledHeight/2), scaledWidth, scaledHeight); 
dlcanvas = document.createElement('canvas'); 
dlcanvas.setAttribute('width',scaledWidth); 
dlcanvas.setAttribute('height',scaledHeight); 
dlcontext = dlcanvas.getContext("2d"); 
dlcontext.putImageData(downloadImageData, 0,0); 
url = dlcanvas.toDataURL('image/jpg'); 
//name = document.getElementById("filename").value; 
var mime = url.split(";")[0].split("data:")[1]; 
var name = mime.split("/")[0]; 
var ext = mime.split("/")[1] || "jpg"; 
var download = mime + ":" + name + "." + ext + ":" + url; 
e.dataTransfer.setData("DownloadURL", download);   
}

改編代碼。

來源

2013-02-27 aldo

號

出於安全原因，使用Javascript 不能寫入到本地文件系統。

的Javascript可以從本地文件系統中的FileReader閱讀：http://www.html5rocks.com/en/tutorials/file/dndfiles/

它甚至可以寫一個沙盒瀏覽器文件（localStorage的）：http://www.w3schools.com/html/html5_webstorage.asp

你甚至可以反彈它關閉您的服務器，然後問用戶是否希望從服務器下載圖像。

來源

2013-02-27 23:42:19 markE

我確實明白這是一個問題，但當然這兩個例子表明它可以完成，儘管它們使用的文件類型不同於我期望使用的類型。 – aldo 2013-02-28 10:52:12

所以我*能夠用Chrome重現Ryan的拖拽效果（儘管有一次當我放棄了Drop - Chrome凍結了！）我也在Firefox中使用它。我無法在IE上使用拖拽功能。 **然而**，當我用本地資源（我在畫布上添加了本地.png）「弄髒」畫布時，沒有任何拖動工作。我想你的項目會工作，如果你做你的成像沒有弄髒畫布到瀏覽器觸發安全標誌的點。 – markE 2013-02-28 17:48:21

是的，它有點兒車。我在Chrome中管理了一個適用於我的實現，但就像你發現當一個下拉不完整時Chrome會凍結。作爲編輯，我會把我在Chrome中做的事情放入問題中。僅供參考我沒有使用整個畫布我選擇畫布的局部圖像，然後將其投影到緩衝區畫布，然後使用toDataURL返回該畫布數據... – aldo 2013-02-28 20:53:15

HTML5畫布從瀏覽器拖出到桌面

回答

相關問題