无法将Base 64图像发送到带有JS的Wooccommerce/产品API

Question

我实际上正在尝试用verge 3D制作一个3D产品配置器，并且必须为每个特定的产品配置创建新的WooCommerce产品。

一切似乎都很好，我设法生成了一个存储在变量中的图像捕获，作为基础64 jpeg

我现在想将这个变量与我的产品创建查询的其余部分一起发布到/wp-json/wc/v2/products/；提供的URL无效">

我担心WooCommerce产品REST API无法将base64图像处理为img->src:然而，一些人似乎已经设法通过了类似的请求。

我在我的JSON代码下面包含了，也许格式有问题。。。

{
"name": "Config Plexi",
"type": "simple",
"regular_price": "21.99",
"dimensions": {
"length": "300",
"width": "300"
},
"description": "Pellentesque habitant morbi tristique",
"images": [
{   "src":"data:image/jpeg;base64,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"
}
]

}

如果上面提到的功能不可用，我想我将不得不使用一个外部PHP文件，因为我的配置程序代码完全是用JS 编写的

我找到了下面的代码，但我现在需要一个函数来将我的base64图像发送到PHP函数，并检索生成的URL以将其包含在我的JSON请求中

/**
* Save the image on the server.
*/
function save_image( $base64_img, $title ) {
// Upload dir.
$upload_dir  = wp_upload_dir();
$upload_path = str_replace( '/', DIRECTORY_SEPARATOR, $upload_dir['path'] ) . DIRECTORY_SEPARATOR;
$img             = str_replace( 'data:image/jpeg;base64,', '', $base64_img );
$img             = str_replace( ' ', '+', $img );
$decoded         = base64_decode( $img );
$filename        = $title . '.jpeg';
$file_type       = 'image/jpeg';
$hashed_filename = md5( $filename . microtime() ) . '_' . $filename;
// Save the image in the uploads directory.
$upload_file = file_put_contents( $upload_path . $hashed_filename, $decoded );
$attachment = array(
'post_mime_type' => $file_type,
'post_title'     => preg_replace( '/.[^.]+$/', '', basename( $hashed_filename ) ),
'post_content'   => '',
'post_status'    => 'inherit',
'guid'           => $upload_dir['url'] . '/' . basename( $hashed_filename )
);
$attach_id = wp_insert_attachment( $attachment, $upload_dir['path'] . '/' . $hashed_filename );
}

我实际上很难链接JS和PHP

//This function is called when add to cart or purchase button are pressed 
function apicrpr(state) {
//This read form values to use is later in the API request
var longueur = document.getElementById("longueure").value,
largeur = document.getElementById("largeure").value,
épaisseur = document.getElementById("épaisseur").value,
quantité = document.getElementById("quantité").value,
matériaux = document.getElementById("matériaux").value,
mac = document.getElementById("matériaux"),
macval = mac.options[mac.selectedIndex].text,
final = document.getElementById("prxxx").innerHTML,
finalp = parseFloat(final.match(/d+(?:.d+)?/g));
//Return my base 64 image as displayed in the JSON above 
var canvas = takeshot();
//Create request 
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//The actual url of the PHP code written above 
var PageToSendTo = "https://websiteadress.com/wp-includes/uploadimg.php?";
var MyVariable = canvas;
var VariablePlaceholder = "base64_img=";
var UrlToSend = PageToSendTo + VariablePlaceholder + MyVariable + "&title=Product_Image";
//I would like my PHP code to execute an get the url of my image back but I'm kinda lost here 
xmlhttp.open("POST", UrlToSend, false);
xmlhttp.send();

我希望我已经足够清楚了提前非常感谢您的帮助

Answer 1

您可以在js&php使用cookies。使用cookie的有效期，您可以确定数据何时会消失