將HTML5 canvas元素作爲帶有Javascript文件擴展名的圖像下載

我希望能夠下載HTML5 canvas元素作爲帶有Javascript文件擴展名的圖像。將HTML5 canvas元素作爲帶有Javascript文件擴展名的圖像下載

CanvasToImage庫似乎不能實現這一點。

這是我的代碼到目前爲止，你可以看到在這JsFiddle。

<div id="canvas_container"> 
</div> 
<p> 
<a href='#' id="create_image">create</a> 
<a href="#" id="download_image">download</a> 
</p> 




$("#create_image").click(function() { 
var cnvs = createSmileyOnCanvas(); 
$('#canvas_container').append(cnvs); 
}); 


$("#download_image").click(function() {  
var img = $('#smiley_canvas').toDataURL("image/png"); 
var uriContent = "data:application/octet-stream," + encodeURIComponent(img); 
window.open(uriContent, 'download smiley image'); 
}); 



function createSmileyOnCanvas() { 
var canvas = document.createElement('canvas');  
canvas.id = 'smiley_canvas';  
var ctx = canvas.getContext('2d');   

// Draw shapes 
ctx.beginPath(); 
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle 
ctx.moveTo(110,75); 
ctx.arc(75,75,35,0,Math.PI,false); // Mouth 
ctx.moveTo(65,65); 
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye 
ctx.moveTo(95,65); 
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye 
ctx.stroke(); 

return canvas; 
}

來源

2012-03-28 Nicholas Murray

爲了迫使/建議在瀏覽器的下載對話框中的文件名，你將需要發送的Content-Disposition: attachment; filename=foobar.png頭。

這是不可能通過window.open做到的，所以你運氣不好，除非有一些瀏覽器特定的黑客。

如果您真的需要文件名，您可以嘗試使用a，<a href="put stuff here" download="filename here">中的新下載屬性。儘管如此，它還沒有得到廣泛的支持。

另一種方法是首先使用ajax將數據提交給服務器，然後將瀏覽器重定向到某個服務器端腳本，然後該腳本將使用正確的標頭來提供數據。

來源

2012-03-28 20:56:25

我以爲通過ajax創建功能，但我希望有一個客戶端解決方案。 – 2012-03-28 21:09:00

似乎只有Chrome支持下載屬性 - 雖然很酷。 http://html5-demos.appspot.com/static/a.download.html – 2012-03-28 21:33:25

嗨，我已經創建了一個jQuery插件，它可以讓你輕鬆地做同樣的任務，但它也使用PHP下載圖像。讓我解釋它是如何工作的

插件有2個子函數，您可以獨立調用以將圖像添加到畫布，另一個是下載當前位於畫布上的圖像。

添加圖片到畫布

爲此，您需要通過canvas元素的ID和你想從畫布添加

下載圖像的圖像的路徑

爲此，您需要傳遞畫布元素的ID

$('body').CanvasToPhp.upload({ 
    canvasId: "canvas", // passing the canvasId 
    image: "455.jpg"  // passing the image path 
}); 

// downloading file 
$('#download').click(function(){ 
    $('body').CanvasToPhp.download({ 
     canvasId: "canvas" // passing the canvas id 
    }); // 
});

首先，你需要下載，你可以在這裏找到http://www.thetutlage.com/post=TUT213

我還創建了一個小演示http://thetutlage.com/demo/canvasImageDownload

來源

2012-06-26 04:52:35

不錯，你應該堅持在github上。如果你這樣做，讓我知道。 – 2012-06-26 08:07:53

這似乎爲我工作的插件文件：

<a id="downloadImgLink" onclick="$('#downloadImgLink').attr('href', canvas.toDataURL());" download="MyImage.png" href="#" target="_blank">Download Drawing</a>

來源

2013-05-08 15:48:00 Meir

不錯的一個。這很簡單，很有效。 – Relm 2014-11-21 11:10:42

畫布的背景圖像不包含在生成的圖像中。有沒有任何方法可以包含背景圖片？ – faizi 2015-12-14 10:59:52

@faizi你可能需要在畫布上繪製它，而不是僅僅使用CSS設置背景，那是你在做什麼？ – Meir 2015-12-18 17:47:12

將HTML5 canvas元素作爲帶有Javascript文件擴展名的圖像下載

回答

相關問題