2

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

到目前为止，我一直在用 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'); 
});

我想我也有点不确定我的网址应该包含什么......我尝试在我的实际媒体库中使用图像的路径，但是当我尝试执行时出现“权限被拒绝”错误这个。

任何人都可以帮忙吗？

4

2 回答 2

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'); 
});
于 2018-10-17T00:39:12.960 回答
0

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

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

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 上传。

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

于 2018-10-17T01:36:32.873 回答