So speichern Sie ein Canvas über Büroklammer

Question

Ich habe mit zwei Ansätze gearbeitet, aber das Ziel ist nur die Leinwand über Paperclip zu speichern.

Erster Ansatz

Leinwand zu Base64 und dann base64 hinzufügen mit Ajax

$(document).on('click', '#save_canvas', function() { 
     var base64Data = canvas.toDataURL() 

     $.ajax({ 
     type: "POST", 
     url:  "pictures/", 
     data: { base64: base64Data }, 
     success: function(post){ console.log('success') }, 
     error: function(post){ console.log(this) } 
     }) 
    }) 

Zugang params params [: base64] vi ein Paperclip.adapters_io

def create 
    @picture = Picture.new(picture_params) 
    # ... 

    image = Paperclip.io_adapters.for(params[:base64]) 
    image.original_filename = "canvas.png" 

    @picture.image = image 

    @picture.save 
    redirect_to @picture 
    end 

ich denke, das nicht zu starten, funktioniert, weil dies nur base64 in params einschließlich und alle anderen erforderlichen params fehlt.

---

Zweiter Ansatz

Leinwand zu Base64 und dann manuell (nur, damit es funktioniert und hält von dort aus arbeitet) Kopieren von Daten von der Konsole aus und fügen Sie ihn in eine Form Feld.

= link_to " Base64", "#", remote: true, onclick: "console.log(canvas.toDataURL('png'))" 
= form_for @picture, html: { multipart: true } do |form| 
    = form.text_field :base64 
    = form.submit 

Zugang params [: Bild] [: base64] über Paperclip.adapters_io

def create 
    @picture = Picture.new(picture_params) 

    image = Paperclip.io_adapters.for(params[:picture][:base64]) 
    image.original_filename = "canvas.png" 

    @picture.image = image 

    @picture.save 
    redirect_to @picture 
    end 

Mit diesem Ansatz kann ich die Leinwand speichern. Aber ich habe zwei Probleme gefunden:

1) Ich muss den Kopier/Paste-Schritt beseitigen.
2) Canvas kann sehr lange Strings mit mehr als 1 Million Zeichen erzeugen (das ist verrückt) und das Formularfeld erlaubt keine so große Länge.

Dies ist ein Rails 4.2 Projekt 4.3 mit Büroklammer und wird auf Heroku gehostet werden.
Danke!

Answer 1

Der erste Ansatz sollte der gute sein. Die erstellte Zeichenfolge legt den MIME-Typ beim Start fest, und die Büroklammer kann die Base64-Zeichenfolge verarbeiten.

Beispiel in einem unserer Projekte (Arbeits gut)

#in our coffeescript (own ajax method, no jquery, but same behavior) 
ajax("images", 
    method: "post", 
    data: {image: @state.src} 
).then((result) => 
    console.log "yey" 
) 

#In the image_controller, to add an uploaded picture 
def create 
    current_user.photos.new picture: params[:image] 
end 

Unsere Büroklammer Version ist 4.3.3.Wir verwenden es mit der Html5-Datei-API, nicht mit Canvas, aber die Ausgabe (base64) ist genau dasselbe Format wie die Canvas#toDataUrl, solange wir eine Vorschau in einem src-Attribut eines Bildes anzeigen können.