Javascript 将图像从画布保存到WordPress媒体库(或服务器)
我正在尝试实现一种功能,允许用户将画布元素上生成的png保存到WordPress媒体库中,或者至少保存在服务器上(这是在facebook上共享图像的中间步骤,需要有效的图像URL) 到目前为止,我已经用JavaScript做了所有的事情,并且正在尝试用AJAX调用将图像保存到服务器上。到目前为止,这是我的AJAX:Javascript 将图像从画布保存到WordPress媒体库(或服务器),javascript,ajax,wordpress,canvas,media-library,Javascript,Ajax,Wordpress,Canvas,Media Library,我正在尝试实现一种功能,允许用户将画布元素上生成的png保存到WordPress媒体库中,或者至少保存在服务器上(这是在facebook上共享图像的中间步骤,需要有效的图像URL) 到目前为止,我已经用JavaScript做了所有的事情,并且正在尝试用AJAX调用将图像保存到服务器上。到目前为止,这是我的AJAX: $(document).on('click','.facebook',function(e){ var image = document.getElementById("canva
$(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中应该包含什么…我尝试使用实际媒体库中图像的路径,但在尝试执行此操作时出现了“权限被拒绝”错误
有人能帮忙吗?应该有管理员ajax URL。您可以使用ajaxurl javascript变量来引用admin-ajax.php文件。但是,此变量未在前端声明。通过将以下内容放在主题的header.php中,在前端声明这一点很简单
<script type="text/javascript">
var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
</script>
我不确定WordPress是否有用于上传图像的RESTAPI,因此这里有另一种方法:您可以通过以下操作创建自定义端点 在函数中,您可以处理图像上载,下面是一个如何创建自定义REST端点(使用POST类型)的示例 在uploadImage函数中,您可能希望尝试使用此解决方案上载base64图像:因为WordPress无法单独处理base64上载 上传后,您可以通过调用返回图像url:
$(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');
});
add_action( 'rest_api_init', function () {
register_rest_route( '/imageHandler/v1', '/upload', array(
'methods' => 'POST',
'callback' => 'uploadImage',
) );
} );
function uploadImage($request) {
$base64Image = $request['imgBase64'];
}