我正在尝试构建一个网络摄像头快照记录器。它应该拍摄一张照片并通过ajax/异步上传将其上传到WP媒体库。
已成功将视图添加到媒体库。录音也很有效。我可以将原始图像数据存储在blob中,也可以存储在base 64编码字符串中(如数据url)
如何将此数据放入上载队列?
任何建议/进一步阅读/解释清楚这不起作用的原因,我们将不胜感激。
非常感谢joern
编辑:这是到目前为止我的代码。信息技术
将面板添加到WP媒体库。
src="data:image/
<script type="text/javascript">
(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 = $(\'<img src="\'+imageUrl+\'" />\')
.appendTo(this.$el);
// add a submit link
$(\'<a href="#" class="test-send">Okay</a>\')
.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);
</script>