首页 文章

Javascript:获取dom图像数据源并将其保存到目录

提问于
浏览
2

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

2 回答

  • 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);
      }
    

    现在,试一试?^ - ^

  • 0

    一般来说,您正在查看数据URI - 有关详细信息,请参阅https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs .

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

相关问题