ルビーを使ってキャンバスをイメージに変換して開き、新しいウィンドウで開きます。

Question

私はこの問題にかなり悩まされています。

私が達成しようとしているのは、toDataURLを使用してキャンバスを画像に変換するリンク、ボタン、または画像をクリックすることです。その後、このイメージを含む新しいウィンドウが開きます。

ruby​​ on railsを使用してtoDataURLから生成されたデータURLを新しいウィンドウに渡すにはどうすればよいですか？

ありがとうございます。

Answer 1

まず、これはRailsとあまり関係ありません。しかし、Rubyを使ってこの問題に取り組むことができます。あなたはすでにやっているよう

まず、キャンバスの内容をフェッチ：

をこの時点で、あなたは、単にJavaScriptで新しいウィンドウを開き、まっすぐそこに画像を開くことができます（ないサーバーとの対話は必要ありません） ：http://jsfiddle.net/XtUFt/

それとも、サーバAへの純粋なbase64文字列を送信することができます：

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

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

はここでこれを説明するための小さなフィドルですNDあなたのアプリは、実際の画像を作成し、それをレンダリングするためにビューを使用してあります！

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

これは単純化した例であり、非常に小さな画像を想定しています。あなたのイメージがどんなに大きい場合でも、文字列が長すぎるため、URLにデータが格納されないため、 '投稿'リクエストを使用する必要があります。

そして、あなたはそれからイメージを作成するために使用することができ、サーバー上：

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

そして、それは、画像を開いて、それに応じてビューをレンダリングするだけの問題です。

Answer 2

私は遅く、このためだが、ここでこの質問を解決して1つの迅速な汚いライナーです：

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

が、これは近い将来に誰かに役立ちます願っています。

Answer 3

私のアプローチ：

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

それが将来的に誰かに役立ちますように。