首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >将图像从画布保存到WordPress媒体库(或服务器)

将图像从画布保存到WordPress媒体库(或服务器)
EN

Stack Overflow用户
提问于 2016-11-16 02:31:57
回答 2查看 1.4K关注 0票数 2

我正在尝试实现这样的功能,允许用户将在画布元素上生成的png保存到WordPress媒体库中,或者至少在服务器上(这是在facebook上共享图像的中间步骤,这需要一个有效的图像URL)。

到目前为止,我一直在使用JavaScript完成所有工作,并尝试使用AJAX调用将图像保存到服务器。到目前为止,这是我的AJAX:

代码语言:javascript
复制
$(document).on('click','.facebook',function(e){

var image = document.getElementById("canvas");
var imageURL = image.toDataURL();
$.ajax({
  type: "POST",
  url: "http://myexample.com",
  data: { 
 imgBase64: imageURL
}
}).done(function(o) {
 console.log('saved'); 
});

我想我也有点不确定我的url里应该放些什么……我试着在我的实际媒体库中使用图片的路径,但是当我试图执行这个命令时,得到了一个"permission denied“错误。

有人能帮上忙吗?

EN

回答 2

Stack Overflow用户

发布于 2018-10-17 08:39:13

应该有管理ajax网址。您可以使用ajaxurl javascript变量来引用admin-ajax.php文件。但是,这个变量不是在前端声明的。在前端声明它很简单,只需将以下内容放入主题的header.php中即可。

代码语言:javascript
复制
<script type="text/javascript">
    var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
</script>

然后在脚本中使用它,如下所示:

代码语言:javascript
复制
$(document).on('click','.facebook',function(e){

var image = document.getElementById("canvas");
var imageURL = image.toDataURL();
$.ajax({
  type: "POST",
  url: ajaxurl,
  data: { 
 imgBase64: imageURL
}
}).done(function(o) {
 console.log('saved'); 
});
票数 0
EN

Stack Overflow用户

发布于 2018-10-17 09:36:33

我不确定WordPress是否有REST API来上传图像,所以这里有另一种方法:您可以使用以下操作register_rest_route创建自定义端点

在该函数中,您可以处理图像上传,这里有一个如何创建自定义REST端点(类型为POST的http://example.com/imageHandler/v1/upload)的示例。

代码语言:javascript
复制
add_action( 'rest_api_init', function () {
    register_rest_route( '/imageHandler/v1', '/upload', array(
        'methods' => 'POST',
        'callback' => 'uploadImage',
    ) );
} );

function uploadImage($request) {
    $base64Image = $request['imgBase64'];
}

在uploadImage函数中,您可能想尝试这个上传base64图像的解决方案:https://gist.github.com/tjhole/3ddfc6cbf6da01c7ce0f,因为单独的WordPress不能处理base64上传。

上传后,您可以通过调用:wp_get_attachment_url返回图像url

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/40617208

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档