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

Question

I have an image data here from my console came from DOM displaying it using array

The console data look like this, I perfectly getting this data my problem is how to pass and get that image data into 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

Its a long string I did not just continue. I'm not sure if its an object, array or what. Is this possible to pass that value into PHP and then save the image into folder?

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

just treat it like any normal array, just pass it along in there — Kevin
– Kevin, Commented Sep 29, 2016 at 2:24

jamey graham · Accepted Answer · 2016-09-29 02:26:03Z

2

in general, you're looking at a Data URI - see https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs for more info.

in this particular case, you seem to be looking at a base64 encoded PNG file - if you want to upload the PNG to a PHP script on the server, you actually have a TON of options around what happens where (and in what order), but one possible approach is to a) always assume you're dealing w/ base64 encoded PNGs (if you know that not to be true, then you'll have to handle the first two parts of the data URI), b) upload data ($.post() the stuff after the comma) to PHP, c) base64 decode the data on the PHP side

answered Sep 29, 2016 at 2:26

jamey graham

1,2041 gold badge13 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Echoing Throughout Tel Numara Over a year ago

Is there a difference if the image uploaded is JPEG or other than PNG?

jamey graham Over a year ago

the image is what it is - the content-type portion of the data URI will tell you the type of image, but there's no trivial way to convert from that type during the upload. to a degree, it doesn't really matter though - if you just want to upload the binary data to save it to a folder on the server, the only possible value of knowing the "content type" is to give the file a meaningful extension. knowing the TYPE of image really only affects what you plan to do w/ the file once you save it (which you didn't tell us about...yet)

bluesky · Accepted Answer · 2016-09-29 02:40:52Z

Pass the value into PHP from javascript, consider to use ajax? In my experience, the http-post can transfer Array to PHP directly, like this:

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

In the php side, if you need to save image address into database, just do it like insert data to database. If you want to save the image into folder, do like this: 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);
  }

now, have a try?^-^

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related