Fügen Sie Elemente aus blob oder dataUrl zur Medienbibliothek hinzu

Ich versuche einen Webcam-Schnappschuss-Rekorder zu bauen. Es sollte ein Bild aufnehmen und es per Ajax / Async-Upload in die WP-Medienbibliothek hochladen.

Es ist bereits gelungen, der Medienbibliothek eine Ansicht hinzuzufügen. Aufnahme funktioniert auch. Ich kann die rohen Bilddaten entweder im Blob oder in einer Base-64-codierten Zeichenfolge speichern (wie Daten-URL)

Wie kann ich diese Daten in die Upload-Warteschlange stellen?

Jeder Vorschlag / weitere Lektüre / gut erklärte Gründe, warum dies nicht funktioniert, wird geschätzt.

Vielen Dank, joern

EDIT: Das ist mein Code bisher. Es

  • Fügt der WP-Medienbibliothek ein Panel hinzu.

  • zeigt ein Bild mit src="data:image/

  • Versucht, ein dateiähnliches Objekt zu generieren und es in die Upload-Warteschlange zu stellen. (Das ist, wo ich versage)

JS-Abhängigkeit: Benötigt github repo blueimp / JavaScript-Canvas-to-Blob

  (function($){ var media = wp.media, l10n = media.view.l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n; // override router creation media.view.MediaFrame.Post.prototype.browseRouter = function( view ) { view.set({ upload: { text: l10n.uploadFilesTitle, priority: 20 }, dataurltest: { text: 'DataUrl Test', priority: 30 }, browse: { text: l10n.mediaLibraryTitle, priority: 40 } }); }; var bindHandlers = media.view.MediaFrame.Post.prototype.bindHandlers, dataUrlTest, frame; media.view.MediaFrame.Post.prototype.bindHandlers = function() { // bind parent object handlers bindHandlers.apply( this, arguments ); // bind our create handler. this.on( 'content:create:dataurltest', this.dataurltestContent, this ); frame = this; }; media.view.MediaFrame.Post.prototype.dataurltestContent = function( content ){ // generate test content var state = this.state(); this.$el.removeClass('hide-toolbar'); dataUrlTest = new media.view.dataUrlTest({}); content.view = dataUrlTest; } media.view.dataUrlTest = media.View.extend({ // our test view tagName: 'div', className: 'data-url-test', initialize: function() { _.defaults( this.options, { }); var self = this, blob; // add image with data-url to panel content var b64Data = 'R0lGODdhUAA8AIABAAAAAP///ywAAAAAUAA8AAACS4SPqcvtD6' + 'OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s73/g8MCofE' + 'ovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5PKsAAA7', imageUrl = 'data:image/gif;base64,' + b64Data, $img = $('') .appendTo(this.$el); // add a submit link $('Okay') .insertAfter($img) .on('click',null,function(){ // creating a blob would go like this: //blob = window.dataURLtoBlob && window.dataURLtoBlob($img.get(0).src) var file = new plupload.File(null,b64Data); file.name = 'test.gif'; file.id = 'id'+(new Date()).getTime(); var attributes = _.extend({ file: file, uploading: true, date: new Date(), filename: 'test.gif', menuOrder: 0, uploadedTo: wp.media.model.settings.post.id, type : 'image', subtype : 'gif' }, _.pick( file, 'loaded', 'size', 'percent' ) ); file.attachment = wp.media.model.Attachment.create( attributes ); wp.Uploader.queue.add(file.attachment); frame.uploader.uploader.uploader.refresh(); frame.uploader.uploader.uploader.start(); }); }, }); return; })(jQuery);  

Solutions Collecting From Web of "Fügen Sie Elemente aus blob oder dataUrl zur Medienbibliothek hinzu"

Endlich habe ich selbst eine Lösung gefunden.

Es gibt keine direkte Möglichkeit, reine Binärdaten (wie ein Blob) an das WP-Upload-Objekt zu übergeben. Nur dateibasierte Objekte werden verarbeitet. Ich musste ein separates XmlHttpRequest erstellen. (Die Verwendung von $.ajax() hat nicht funktioniert und zu verschmutzten Bilddaten geführt.)

Nach dem erfolgreichen Hochladen der Bilddaten in async-upload.php konnte ich ein ‘FileUploaded’-Ereignis auslösen, zusammen mit dem, was der Server geantwortet hat. Danach erschien das Bild in der Medienbibliothek.

Das Codebeispiel oben könnte so aussehen (ungetestet und immer noch skizzenhaft):

  

Die function send_b64_data( b64data , filename , post_data , success_callback ) würde folgendermaßen aussehen:

 function send_b64_data( b64data , filename , post_data , success_callback ) { var boundary, dashdash, crlf, multipart_string, file_data_name, name, mime_type , xhr; // setup multipart boundary = '----multipart_boundary'+(new Date().getTime().toString(32))+Math.random().toString(32); dashdash = '--'; crlf = '\r\n'; // build request payload multipart_string = ''; for ( name in post_data ) { multipart_string += dashdash + boundary + crlf + 'Content-Disposition: form-data; name="' + name + '"' + crlf + crlf; multipart_string += unescape(encodeURIComponent(send_data[name])) + crlf; } // add image data mime_type = 'image/png'; file_data_name = 'async-upload'; multipart_string += dashdash + boundary + crlf + 'Content-Disposition: form-data; name="' + wp.Uploader.defaults.file_data_name + '"; filename="' + filename + '"' + crlf + 'Content-Type: ' + mime_type + crlf + crlf + atob( b64data ) + crlf + dashdash + boundary + dashdash + crlf; // build and send request xhr = new XMLHttpRequest() xhr.open("post", wp.Uploader.defaults.url, true); xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary); xhr.onreadystatechange = function() { var httpStatus, chunkArgs; if (xhr.readyState == 4 ) { try { httpStatus = xhr.status; } catch (ex) { httpStatus = 0; } if (httpStatus == 200) { // will load contents to file fake success_callback(xhr,httpStatus); } else if ( httpStatus >= 400 ) { // handle error } } } if (xhr.sendAsBinary) { // Gecko xhr.sendAsBinary(multipart_string); } else { // WebKit with typed arrays support var ui8a = new Uint8Array(multipart_string.length); for (var i = 0; i < multipart_string.length; i++) { ui8a[i] = (multipart_string.charCodeAt(i) & 0xff); } xhr.send(ui8a.buffer); } } 

Arbeitscode kann hier gefunden werden: https://github.com/mcguffin/say-cheese (WP Plugin ermöglicht das Hinzufügen von Webcam-Snapshots und eingefügten Bildern in die MediaLibrary)