Javascript:获取dom图像数据源并将其保存到目录 - Javascript : Getting the dom image data source and save it to directory

Javascript : Getting the dom image data source and save it to directory

我这里有一个来自控制台的图像数据来自DOM使用数组

显示它

控制台数据是这样的，我可以很好地获取这些数据我的问题是如何将图像数据传递并获取到php

["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAuSgpcjBs5Go81S/7+/x/MmaPEm
0:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAgAEl
1:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAY3U    
2:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAgAElE
3:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAgAEl

这是一个很长的字符串，我没有继续。我不确定它是一个对象，数组还是什么。是否可以将该值传递给PHP，然后将图像保存到文件夹中?

var image =  [];
$('.dz-image img').each(function(){
    image.push($(this).attr('src'));
});
console.log(image);

一般来说，您要查看的是Data URI -更多信息请参见https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs。

在这个特定的例子中,你似乎看base64编码的PNG文件,如果你想上传的PNG PHP脚本在服务器上,你周围有大量的选择发生了什么(以及以什么顺序),但一个可能的方法是a)总是假设你是w/base64编码的PNG(如果你不知道是真实的,那么你必须处理的前两部分数据URI), b)上传数据($ . post()逗号后的东西),PHP,c) base64解码PHP端的数据

从javascript传递值到PHP，考虑使用ajax?根据我的经验，http-post可以直接将Array传输到PHP，像这样:

var image =  [];
$('.dz-image img').each(function(){
    image.push($(this).attr('src'));
});
//console.log(image);
//here, I use jQuery, but you can use any way of ohter javascript framework
$.ajax({
  type:'post',
  tranditional:true,
  url:'saveImage.php',
  data:{"iamge":image},
  success:function(data){
    console.log(image)
  }
})

在php端，如果您需要将图像地址保存到数据库中，只需像将数据插入数据库一样操作即可。如果你想把图片保存到文件夹中，这样做:saveImage.php

<?php
  $images = $_POST['image'];
  //here, you can code var_dump($image) to console the data you get
  foreach($images as $key=>$image){
    $image = base64_decode(str_replace('data:image/png:base64,','', $image));
    file_put_contents($key.'.jpg', $image);
  }

现在，试一试?^ - ^