Convertir le canevas en image et ouvrir dans une nouvelle fenêtre en utilisant ruby ​​sur rails et javascript

Je suis coincé à ce problème et j'espère que vous les gars peut m'aider.

Ce que je suis en train de réaliser est en cliquant sur un lien, un bouton ou une image, ce qui ne semble plus simple, je convertir toile en image à l'aide de toDataURL. Après cela, une nouvelle fenêtre contenant cette image est ouverte.

Comment puis-je transmettre les données de l'url générée à partir de toDataURL d'une nouvelle fenêtre à l'aide de ruby on rails?

Merci d'avance.

source d'informationauteur Mich

  1. 21

    Tout d'abord, cela n'a pas beaucoup à faire avec les Rails. Vous pouvez utiliser Ruby pour s'attaquer à ce problème.

    Extraire tout d'abord le contenu de la toile que vous êtes déjà en train de faire:

    var dataURL = canvas.toDataURL("image/png");

    À ce point, vous pouvez simplement ouvrir une nouvelle fenêtre avec le Javascript et ouvrez l'image de droite (pas de serveur d'interaction nécessaire):

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

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

    Voici un petit violon pour illustrer cela: http://jsfiddle.net/XtUFt/

    Ou vous pouvez envoyer la pure base64 chaîne pour le serveur et d'avoir votre application créer une image réelle et l'utilisation en vue de la rendre:

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

    !C'est un exemple simplifié et suppose une très petite image. Si votre image est de toute façon plus importante que vous aurez à utiliser un 'post' demande parce que votre URL ne seront pas transporter les données depuis la chaîne est tout simplement trop long!

    Et sur le serveur vous pouvez ensuite utiliser pour créer l'image:

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

    Puis c'est juste une question de l'ouverture de l'image et le rendu de la vue en conséquence.

  2. 1

    Je suis en retard, mais voici un rapide sale doublure qui permet de résoudre cette question:

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

    Espère que cela aide quelqu'un dans un avenir proche.

  3. 1

    Mon approche:

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

    Il Peut être aide à quelqu'un dans le futur.