Javascript : 获取 dom 图片数据源并保存到目录答案

【问题标题】：Javascript : Getting the dom image data source and save it to directoryJavascript : 获取 dom 图片数据源并保存到目录
【发布时间】：2016-09-29 02:10:45
【问题描述】：

我的控制台中有一个图像数据来自 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);

【问题讨论】：

stackoverflow.com/a/380971/3859027
我可以将数组image 附加到FormData 中吗？
就像任何普通数组一样对待它，把它传递进去

标签： javascript php jquery

【解决方案1】：

通常，您正在查看数据 URI - 请参阅 https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs 了解更多信息。

在这种特殊情况下，您似乎正在查看一个 base64 编码的 PNG 文件 - 如果您想将 PNG 上传到服务器上的 PHP 脚本，您实际上有很多选项可以选择发生在哪里（以及在什么情况下）顺序），但一种可能的方法是 a) 始终假设您正在处理使用 base64 编码的 PNG（如果您知道这不是真的，那么您将不得不处理数据 URI 的前两部分），b ) 上传数据（$.post() 逗号后面的东西）到PHP，c) PHP端base64解码数据

【讨论】：

上传的图片是JPEG还是非PNG有区别吗？
图像就是它的样子 - 数据 URI 的内容类型部分会告诉您图像的类型，但在上传期间没有简单的方法可以从该类型转换。在某种程度上，这并不重要 - 如果您只想上传二进制数据以将其保存到服务器上的文件夹中，了解“内容类型”的唯一可能价值是给文件一个有意义的扩展名.知道图像的类型实际上只会影响您在保存文件后计划对文件执行的操作（您还没有告诉我们...）

【解决方案2】：

将值从 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);
  }

现在，试试看？^-^

【讨论】：