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

时间:2016-11-15 18:31:57

标签: javascript ajax wordpress canvas media-library

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

到目前为止,我刚刚使用JavaScript做了一切,并尝试使用AJAX调用将图像保存到服务器。到目前为止,这是我的AJAX:

$(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'); 
});

我想我也不确定我的网址应该是什么......我尝试在我的实际媒体库中使用路径查看图片,但是当我获得“权限被拒绝”错误时试图执行此操作。

有人可以帮忙吗?

2 个答案:

答案 0 :(得分:0)

应该有管理员Ajax URL。您可以使用ajaxurl javascript变量来引用admin-ajax.php文件。但是,此变量未在前端声明。只需在主题的header.php中放置以下内容,即可在前端进行声明。

<script type="text/javascript">
    var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
</script>

然后像下面这样在脚本中使用它:

$(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'); 
});

答案 1 :(得分:0)

我不确定WordPress是否具有用于上传图像的REST API,因此这是另一种方法:您可以通过以下操作register_rest_route

创建自定义端点

在该功能中,您可以处理图片上传,下面是一个示例,介绍了如何创建自定义REST端点(类型为POST的http://example.com/imageHandler/v1/upload)。

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

返回图片网址。