如何从 webcam.js 在 Wordpress 中上传 base64 图像
How to upload a base64 image inside Wordpress from webcam.js
我 运行 在代码方面遇到了一些麻烦,我希望有人能提供一些帮助 :)
我在一个类似于 Wordpress 网站内的小型 CRM 的项目中使用 webcamjs。我使用 ACF 创建了一个表单,我们从网站的前端填写表单,只有登录用户才能看到。
在会员页面中,我需要能够从网络摄像头拍摄照片,到目前为止,我已经让网络摄像头正常工作并生成 base64 图像。
我现在需要做的是能够将此图片上传到 WordPress 中的上传目录,并使用 ACF 插件将图片的 link 附加到字段 "photo",所以所有的信息都放在一起。但是这部分不起作用。
我想知道我是否从 JS 代码中正确地调用了 PHP 文件,以及来自 JS 的信息是否进入了 PHP 文件。
非常感谢任何帮助!
<script language="JavaScript">
Webcam.set({
width: 640,
height: 480,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#members_camera' );
function take_snapshot() {
// take snapshot and acquire image data
Webcam.snap( function(data_uri) {
// snap complete, image data is in 'data_uri'
Webcam.on( 'uploadProgress', function(progress) {
// Upload in progress
// 'progress' will be between 0.0 and 1.0
} );
Webcam.on( 'uploadComplete', function(code, text) {
location.reload();
// Upload complete!
// 'code' will be the HTTP response code from the server, e.g. 200
// 'text' will be the raw response content
} );
var postid = '<?php echo $postid ?>';
var url = '<?php echo get_stylesheet_directory_uri() . '/inc/webcam/uploader.php?postid='; ?>' + postid;
Webcam.upload( data_uri, url, function(code, text) {
// Upload complete!
// 'code' will be the HTTP response code from the server, e.g. 200
// 'text' will be the raw response content
} );
} );
}
</script>
这是 "uploader.php" 文件
require_once("../../../../../wp-load.php");
$name = date('YmdHis');
$imagename = $_SERVER['DOCUMENT_ROOT']."/wp-content/uploads/members_photos/".$name.".jpg";
move_uploaded_file($_FILES['webcam']['tmp_name'], $imagename);
$postid = $_GET['postid'];
update_field('foto', $imagename, $postid);
echo $postid;
echo $imagename;
我明白了!
问题出在我的 "uploader.php" 文件上。现在看起来像这样:
require_once('../../../../../wp-load.php');
$name = date('YmdHis');
$upload_dir = wp_upload_dir();
$imagename = $upload_dir['basedir'] . '/members_photos/' . $name . '.jpg';
move_uploaded_file($_FILES['webcam']['tmp_name'], $imagename);
$home_url = home_url();
$member_pic_url = $home_url . '/wp-content/uploads/members_photos/' . $name . '.jpg';
$postid = $_GET['postid'];
update_field('foto', $member_pic_url, $postid);
我还必须手动创建目录。所以如果有人有更好的解决方案,我愿意接受:)
我 运行 在代码方面遇到了一些麻烦,我希望有人能提供一些帮助 :)
我在一个类似于 Wordpress 网站内的小型 CRM 的项目中使用 webcamjs。我使用 ACF 创建了一个表单,我们从网站的前端填写表单,只有登录用户才能看到。
在会员页面中,我需要能够从网络摄像头拍摄照片,到目前为止,我已经让网络摄像头正常工作并生成 base64 图像。
我现在需要做的是能够将此图片上传到 WordPress 中的上传目录,并使用 ACF 插件将图片的 link 附加到字段 "photo",所以所有的信息都放在一起。但是这部分不起作用。
我想知道我是否从 JS 代码中正确地调用了 PHP 文件,以及来自 JS 的信息是否进入了 PHP 文件。
非常感谢任何帮助!
<script language="JavaScript">
Webcam.set({
width: 640,
height: 480,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#members_camera' );
function take_snapshot() {
// take snapshot and acquire image data
Webcam.snap( function(data_uri) {
// snap complete, image data is in 'data_uri'
Webcam.on( 'uploadProgress', function(progress) {
// Upload in progress
// 'progress' will be between 0.0 and 1.0
} );
Webcam.on( 'uploadComplete', function(code, text) {
location.reload();
// Upload complete!
// 'code' will be the HTTP response code from the server, e.g. 200
// 'text' will be the raw response content
} );
var postid = '<?php echo $postid ?>';
var url = '<?php echo get_stylesheet_directory_uri() . '/inc/webcam/uploader.php?postid='; ?>' + postid;
Webcam.upload( data_uri, url, function(code, text) {
// Upload complete!
// 'code' will be the HTTP response code from the server, e.g. 200
// 'text' will be the raw response content
} );
} );
}
</script>
这是 "uploader.php" 文件
require_once("../../../../../wp-load.php");
$name = date('YmdHis');
$imagename = $_SERVER['DOCUMENT_ROOT']."/wp-content/uploads/members_photos/".$name.".jpg";
move_uploaded_file($_FILES['webcam']['tmp_name'], $imagename);
$postid = $_GET['postid'];
update_field('foto', $imagename, $postid);
echo $postid;
echo $imagename;
我明白了!
问题出在我的 "uploader.php" 文件上。现在看起来像这样:
require_once('../../../../../wp-load.php');
$name = date('YmdHis');
$upload_dir = wp_upload_dir();
$imagename = $upload_dir['basedir'] . '/members_photos/' . $name . '.jpg';
move_uploaded_file($_FILES['webcam']['tmp_name'], $imagename);
$home_url = home_url();
$member_pic_url = $home_url . '/wp-content/uploads/members_photos/' . $name . '.jpg';
$postid = $_GET['postid'];
update_field('foto', $member_pic_url, $postid);
我还必须手动创建目录。所以如果有人有更好的解决方案,我愿意接受:)