Tải xuống phần tử canvas Html5 dưới dạng hình ảnh có đuôi tệp với Javascript

Question

Tôi muốn tải xuống phần tử canvas Html5 dưới dạng hình ảnh có phần mở rộng tệp có Javascript.

Thư viện CanvasToImage dường như không thể đạt được điều này.

Đây là mã của tôi cho đến thời điểm này bạn có thể xem tại số JsFiddle này.

<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; 
} 

Answer 1

Để buộc/đề xuất tên tệp trong hộp thoại tải xuống của trình duyệt, bạn cần gửi tiêu đề Content-Disposition: attachment; filename=foobar.png.

Điều này không thể thực hiện qua window.open, vì vậy bạn sẽ không may mắn trừ khi có một số hack cụ thể cho trình duyệt này.

Nếu bạn thực sự cần tên tệp, bạn có thể thử sử dụng thuộc tính tải xuống mới trong a, <a href="put stuff here" download="filename here">. Nó chưa được hỗ trợ rộng rãi lắm.

Một giải pháp thay thế khác trước tiên là gửi dữ liệu đến máy chủ bằng ajax, sau đó chuyển hướng trình duyệt đến một số tập lệnh phía máy chủ để sau đó phân phát dữ liệu với tiêu đề chính xác.

Answer 2

Xin chào, tôi đã tạo một plugin jquery cho phép bạn thực hiện cùng một tác vụ dễ dàng nhưng cũng sử dụng php để tải xuống hình ảnh. hãy để tôi giải thích cách hoạt động

Plugin có 2 chức năng phụ mà bạn có thể gọi một cách độc lập để thêm hình ảnh vào canvas và hình kia là tải xuống hình ảnh hiện tại nằm trên canvas.

Thêm hình ảnh vào khung

Đối với điều này bạn cần phải vượt qua id của phần tử canvas và đường dẫn của hình ảnh bạn muốn thêm hình ảnh

tải về từ vải

Đối với điều này, bạn cần chuyển id của phần tử canvas

$('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 
    }); // 
}); 

Trước tiên, bạn cần phải tải về các tập tin plugin mà bạn có thể tìm thấy ở đây http://www.thetutlage.com/post=TUT213

Tôi cũng đã tạo ra một chút bản demo http://thetutlage.com/demo/canvasImageDownload

Answer 3

Điều này dường như làm việc cho tôi:

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