Chuyển canvas thành hình ảnh và mở trong cửa sổ mới bằng ruby ​​trên đường ray và javascript

Question

Tôi đang gặp khó khăn trong vấn đề này và hy vọng các bạn có thể giúp tôi.

Điều tôi đang cố đạt được là khi nhấp vào liên kết, nút hoặc hình ảnh, có vẻ đơn giản hơn, tôi chuyển canvas thành hình ảnh bằng cách sử dụng toDataURL. Sau đó một cửa sổ mới chứa hình ảnh này được mở ra.

Làm cách nào để chuyển url dữ liệu được tạo từ toDataURL đến cửa sổ mới bằng ruby ​​trên thanh ray?

Xin cảm ơn trước.

Answer 1

Trước hết, điều này không liên quan nhiều đến Rails. Tuy nhiên, bạn có thể sử dụng Ruby để giải quyết vấn đề này.

Đầu tiên lấy nội dung của bức tranh như bạn đã thực hiện:

Tại thời điểm này bạn chỉ có thể mở một cửa sổ mới với Javascript và mở hình ảnh thẳng trong đó (không tương tác máy chủ cần thiết) :

var window = window.open(); 
window.document.write('<img src="'+dataURL+'"/>'); 

$('a.my-link').click(function(){ 
    open().document.write('<img src="'+dataURL+'"/>'); 
    return false; 
}); 

Dưới đây là một fiddle nhỏ để minh họa điều này: http://jsfiddle.net/XtUFt/

Hoặc bạn có thể gửi các chuỗi base64 tinh khiết đến máy chủ một nd có ứng dụng của bạn tạo ra một hình ảnh thực tế và sử dụng nhằm làm cho nó:

var base64 = dataURL.replace(/^data:image\/(png|jpg);base64,/, "") ; 
var window = window.open('http://www.yourapp.com/controller/action?base64='+base64); 

Đây là một ví dụ đơn giản và giả định một hình ảnh rất nhỏ. Nếu hình ảnh của bạn lớn hơn, bạn sẽ phải sử dụng yêu cầu 'đăng' vì URL của bạn sẽ không mang dữ liệu vì chuỗi chỉ đơn giản là quá dài!

Và trên máy chủ sau đó bạn có thể sử dụng để tạo ra các hình ảnh:

require 'base64' 
File.open('your/image/path/and/name.gif', 'wb') do|f| 
    f.write(Base64.decode64(params[:base64])) 
end 

Sau đó, nó chỉ là một vấn đề mở hình ảnh và render một cái nhìn phù hợp.

Answer 2

Tôi trễ này, nhưng đây là một trong lót bẩn nhanh chóng mà giải quyết được câu hỏi này:

window.open(document.getElementById("mycanvas").toDataURL()); 

Hope this helps ai đó trong tương lai gần.

Answer 3

cách tiếp cận của tôi:

var dataURL = canvas.toDataURL("image/png"); 
var newTab = window.open(dataURL, 'Image'); 
newTab.focus(); 

nó có thể giúp một người nào đó trong tương lai.