POST中来自base64编码的动画gif的imagecreatefromgif（）

Question

I am trying to make animated GIFs from media streams, videos, or images using the GifShot plugin.

My problem is that the ajax part does not see webcam_image_ajax.php . isn't working. Please do not hate me so the question will be a little longer.

I have to create this ajax function for uploading image:

    var pos = 0, ctx = null, saveCB, gif = [];
    var createGIFButton = document.createElement("canvas");
    createGIFButton.setAttribute('width', 320);
    createGIFButton.setAttribute('height', 240);
    if (createGIFButton.toDataURL) 
    {
    ctx = createGIFButton.getContext("2d");
    gif = ctx.getImageData(0, 0, 320, 240);
    saveCB = function(data) 
    {
    var col = data.split(";");
    var img = gif;
    for(var i = 0; i < 320; i++) {
    var tmp = parseInt(col[i]);
    img.data[pos + 0] = (tmp >> 16) & 0xff;
    img.data[pos + 1] = (tmp >> 8) & 0xff;
    img.data[pos + 2] = tmp & 0xff;
    img.data[pos + 3] = 0xff;
    pos+= 4;
    }
    if (pos >= 4 * 320 * 240)
     {
    ctx.putImageData(img, 0, 0);
    $.post("webcam_image_ajax.php", {type: "data", gif: createGIFButton.toDataURL("image/gif")},

    function(data)
     {

     if($.trim(data) != "false")
    {
    var dataString = 'webcam='+ 1;
    $.ajax({
    type: "POST",
    url: $.base_url+"webcam_imageload_ajax.php",
    data: dataString,
    cache: false,
    success: function(html){
    var values=$("#uploadvalues").val();
    $("#webcam_preview").prepend(html);
    var M=$('.webcam_preview').attr('id');
    var T= M+','+values;
    if(T!='undefinedd,')
    $("#uploadvalues").val(T);
     }
     });
     }
     else
    {
      $("#webcam").html('<div id="camera_error"><b>Camera could not connect.</b><br/>Please be sure to make sure your camera is plugged in and in use by another application.</div>');
    $("#webcam_status").html("<span style='color:#cc0000'>Camera not found please try again.</span>");
    $("#webcam_takesnap").hide();
        return false;
    }
     });
    pos = 0;
     }
      else {
    saveCB = function(data) {
    gif.push(data);
    pos+= 4 * 320;
     if (pos >= 4 * 320 * 240)
     {
    $.post("webcam_image_ajax.php", {type: "pixel", gif: gif.join('|')},
    function(data)
     {

    var dataString = 'webcam='+ 1;
    $.ajax({
    type: "POST",
    url: "webcam_imageload_ajax.php",
    data: dataString,
    cache: false,
    success: function(html){
    var values=$("#uploadvalues").val();
    $("#webcam_preview").prepend(html);
    var M=$('.webcam_preview, .gifshot-image-preview-section').attr('id');
    var T= M+','+values;
    if(T!='undefined,')
    $("#uploadvalues").val(T);
     }
     });

     });
     pos = 0;
     }
     };
     }
     };
     }
$("#webcam").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "js/jscam_canvas_only.swf",
onSave: saveCB,
onCapture: function ()
{
webcam.save();
},
debug: function (type, string) {
$("#webcam_status").html(type + ": " + string);
}

});


});
/**Taking snap**/
function takeSnap(){
webcam.capture();
}

You can see this code in my ajax function:

$.post("webcam_image_ajax.php", {type: "data", gif: createGIFButton.toDataURL("image/gif")},

the webcam_image_ajax.php is created in base64 format and then it upload the gif image from the images folder.

Also when clicked Create GIF button this JavaScript will starting: CLICK .

After that my ajax code have this line webcam_imageload_ajax.php

<?php
include_once 'includes.php';
if(isSet($_POST['webcam']))
{
$newdata=$Wall->Get_Upload_Image($uid,0);
echo "<img src='uploads/".$newdata['image_path']."'  class='webcam_preview gifshot-image-preview-section' id='".$newdata['id']."'/>

";
}
?>

the webcam_imageload_ajax.php working with webcam_image_ajax.php .

If webcam_image_ajax.php created image then webcam_imageload_ajax.php echoing image like:

upload/14202558.gif

But now it looks like:

data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAABE...

creat a gif button:

<button type="button" id="create-gif" class="btn btn-large btn-primary create-gif-button camclick" onclick="return takeSnap();">Create GIF</button>
<input type="hidden" id="webcam_count" />

Answer 1

Forget the JavaScript code in the question.

If you want to use this script then use this code from demo.js inside in gifshot plugin.

function create_gif(data){
    $.post(
        "webcam_image_ajax.php", 
        {
            data: data, 
            dataType: 'json'
        },
        function(js_data)
        {
            var js_d = $.parseJSON(js_data);    
            $('#gif_preview').attr('src', js_d.path);
            if(js_d.id != 'error'){
                    $("#uploadvalues").val(js_d.id);
                    $('.webcam_preview, .gifshot-image-preview-section').attr('id', js_d.id);
            } 
        }
    );
}

and you can write your own php code for webcam_image_ajax.php .

Answer 2

Simply do like this:

file_put_contents('filename',file_get_contents(str_replace('data:','data://','<your base64 encoded data>')));

This is simply adapting your data:... into the data:// wrapper .

There is no simpler way to do this.

Notice that this is HIGHLY UNSECURE and you should validate the data (using preg_match for example) before usage.