在POST中使用base64编码的动画gif中的imagecreatefromgif（）
我正在尝试使用GifShot插件从媒体流，video或图像制作动画GIF。
我的问题是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 > 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('Camera could not connect.
Please be sure to make sure your camera is plugged in and in use by another application.'); $("#webcam_status").html("Camera not found please try again."); $("#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格式创建，然后从images文件夹上传gif图像。
此外，当单击Create GIF按钮时，此JavaScript将启动： CLICK 。
之后我的ajax代码有这行webcam_imageload_ajax.php
Get_Upload_Image($uid,0); echo "![]()
"; } ?>
使用webcam_imageload_ajax.php webcam_image_ajax.php 。
如果webcam_image_ajax.php创建了图像，则webcam_imageload_ajax.php回显图像，如：
upload/14202558.gif
但现在它看起来像：
数据：图像/ GIF; BASE64，iVBORw0KGgoAAAANSUhEUgAABE …
创建一个gif按钮：
忘记问题中的JavaScript代码。
如果你想使用这个脚本，那么在gifshot插件中使用demo.js中的代码。
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); } } ); }
你可以为webcam_image_ajax.php编写自己的php代码。
只需这样做：
file_put_contents('filename',file_get_contents(str_replace('data:','data://','')));
这只是将您的data:...改编为data:// wrapper 。
没有更简单的方法可以做到这一点。
请注意，这是HIGHLY UNSECURE ，您应该在使用前validation数据（例如使用preg_match ）。