imagecreatefromgif () из анимированного gif-кода с кодировкой base64 в POST

Я пытаюсь сделать анимированные GIF-файлы из медиа-потоков, видео или изображений с помощью плагина GifShot .

Моя проблема в том, что часть ajax не видит webcam_image_ajax.php . не работает. Пожалуйста, не ненавидите меня, поэтому вопрос будет немного дольше.

Я должен создать эту функцию ajax для загрузки изображения:

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

Вы можете увидеть этот код в моей функции ajax:

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

webcam_image_ajax.php создается в формате base64 , а затем загружает изображение gif из папки изображений.

Также при нажатии кнопки Create GIF этот JavaScript начнется: CLICK .

После этого мой код ajax имеет эту строку: 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']."'/> "; } ?> 

webcam_imageload_ajax.php работающий с webcam_image_ajax.php .

Если webcam_image_ajax.php создал изображение, то webcam_imageload_ajax.php эхо-изображение:

 upload/14202558.gif 

Но теперь это выглядит так:

данные: изображение / GIF; base64, iVBORw0KGgoAAAANSUhEUgAABE …

Создать кнопку gif:

 <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" /> 

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

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