Question

我正在尝试使用GifShot插件从媒体流，视频或图片制作动画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 < 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图片。

此外，点击“创建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" />

Answer 1

忘记问题中的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代码。

Answer 2

简单地这样做：

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

这只是将您的data:...调整为data:// wrapper。

没有更简单的方法可以做到这一点。

请注意，这是 HIGHLY UNSECURE ，您应该在使用前验证数据（例如，使用preg_match）。

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

2 个答案: