imagecreatefromgif（）从的base64 EN codeD gif动画在POST [英] imagecreatefromgif() from base64 encoded animated gif in POST

查看：214
本文介绍了imagecreatefromgif（）从的base64 EN codeD gif动画在POST的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想从流媒体，视频，或使用图像 GifShot 插件。

我的问题是，AJAX部分不看 webcam_image_ajax.php 。不工作。请不要讨厌我这样的问题会稍长一些。

我要创建这个 AJAX 的功能来上传图片：

  VAR POS = 0，CTX = NULL，saveCB，GIF = [];
    VAR createGIFButton = document.createElement方法（帆布）;
    createGIFButton.setAttribute（'宽'，320）;
    createGIFButton.setAttribute（高度，240）;
    如果（createGIFButton.toDataURL）
    {
    CTX = createGIFButton.getContext（2D）;
    的gif = ctx.getImageData（0，0，320，240）;
    saveCB =功能（数据）
    {
    VAR COL = data.split（）;
    VAR IMG = GIF;
    对于（VAR I = 0; I＆LT; 320;我++）{
    VAR TMP = parseInt函数（COL [I]）;
    img.data [POS + 0] =（TMP＆GT;＆GT; 16）及0xFF的;
    img.data [POS + 1] =（TMP＆GT;→8）及0xFF的;
    img.data [POS + 2] = TMP和放大器; 0xFF的;
    img.data [POS + 3] = 0xFF的;
    POS + = 4;
    }
    如果（POS＆GT; = 4 * 320 * 240）
     {
    ctx.putImageData（IMG，0，0）;
    $。员额（webcam_image_ajax.php，{类型：数据，GIF：createGIFButton.toDataURL（图像/ GIF）}，

    功能（数据）
     {

     如果（$。修剪（数据）！=假）
    {
    变种dataString ='的网络摄像头='+ 1;
    $阿贾克斯（{
    键入：POST，
    网址：$ .base_url +webcam_imageload_ajax.php
    数据：dataString，
    缓存：假的，
    成功：函数（HTML）{
    。VAR值= $（＃uploadvalues​​）VAL（）;
    $（＃webcam_ preVIEW）prePEND（HTML）;
    变种M = $（'webcam_ preVIEW。'）ATTR（'身份证'）。
    VAR T = M +，+价值;
    如果（T！='undefinedd）
    $（＃uploadvalues​​）VAL（T）;
     }
     }）;
     }
     其他
    {
      $（＃摄像头）HTML（'＆LT; D​​IV ID =camera_error＆GT;＆LT; B＆GT;相机无法连接＆LT; / B＆GT;＆LT; BR /＆gt;请务必确保您的相机另一个应用程序插入和使用＆lt; / DIV＆GT;'）;
    $（＃webcam_status）HTML（＆LT;跨度风格=颜色：＃CC0000。＆GT;摄像头没有找到，请重试＆LT; / SPAN＆gt;中）。
    $（＃webcam_takesnap）隐藏（）。
        返回false;
    }
     }）;
    POS = 0;
     }
      其他 {
    saveCB =功能（数据）{
    gif.push（数据）;
    POS + = 4 * 320;
     如果（POS＆GT; = 4 * 320 * 240）
     {
    $。员额（webcam_image_ajax.php，{类型：像素，GIF：gif.join（'|'）}，
    功能（数据）
     {

    变种dataString ='的网络摄像头='+ 1;
    $阿贾克斯（{
    键入：POST，
    网址：webcam_imageload_ajax.php
    数据：dataString，
    缓存：假的，
    成功：函数（HTML）{
    。VAR值= $（＃uploadvalues​​）VAL（）;
    $（＃webcam_ preVIEW）prePEND（HTML）;
    变种M = $（'webcam_ preVIEW，.gifshot  - 图像 -  preVIEW节。）ATTR（'身份证'）。
    VAR T = M +，+价值;
    如果（T！='不确定'）
    $（＃uploadvalues​​）VAL（T）;
     }
     }）;

     }）;
     POS = 0;
     }
     };
     }
     };
     }
$（＃摄像头）。网络摄像头（{
宽度：320，
高度：240，
模式：回调，
swffile：JS / jscam_canvas_only.swf
的OnSave：saveCB，
参考OnCapture：函数（）
{
webcam.save（）;
}，
调试：功能（类型，字符串）{
$（＃webcam_status）HTML（类型+：+字符串）;
}

}）;


}）;
/ **拍摄快照** /
传播takeSnap（）{
webcam.capture（）;
}

您可以看到这个code在我的ajax功能：

  $后（webcam_image_ajax.php，{类型：数据，GIF：createGIFButton.toDataURL（图像/ GIF）}，

在 webcam_image_ajax.php 在的base64 格式创建，然后将其上传的图片文件夹中的gif图片。

此外，当点击创建GIF按钮，这个JavaScript将启动：的点击

在我的AJAX code这行 webcam_imageload_ajax.php 

 ＆LT; PHP
include_once'includes.php;
如果（使用isset（$ _ POST ['摄像头']））
{
$ newdata = $壁挂＆GT; Get_Upload_Image（$ UID，0）;
回声＆LT; IMG SRC ='上传/".$ newdata ['image_path'。阶级='webcam_ preVIEW gifshot  - 图像 -  preVIEW节ID =$ newdata [。 ID']'。/＆GT;

;
}
？＆GT;

在 webcam_imageload_ajax.php 与 webcam_image_ajax.php 工作

如果 webcam_image_ajax.php 创建图像，然后 webcam_imageload_ajax.php 像呼应图片：

 上传/ 14202558.gif

但现在它看起来像：

数据：图像/ GIF; BASE64，iVBORw0KGgoAAAANSUhEUgAABE ... 的

创造一个GIF按钮：

 ＆LT;按钮式=按钮ID =创造的gif级=BTN BTN-大BTN-小学创建-GIF按钮camclick的onclick =返回takeSnap（ ）;＆GT;创建GIF＆LT; /按钮＆GT;
＆LT;输入类型=隐藏ID =webcam_count/＆GT;

解决方案

忘了JavaScript的code中的问题。

如果你想使用这个脚本，然后在gifshot插件使用来自 demo.js 这code里面。

 函数create_gif（数据）{
    $。员额（
        webcam_image_ajax.php
        {
            数据：数据，
            数据类型：JSON
        }，
        功能（js_data）
        {
            VAR js_d = $ .parseJSON（js_data）;
            $（'＃gif_ preVIEW'）ATTR（SRC，js_d.path）。
            如果（js_d.id！='错误'）{
                    $（＃uploadvalues​​）VAL（js_d.id）。
                    $（'webcam_ preVIEW，.gifshot  - 图像 -  preVIEW节。）ATTR（'身份证'，js_d.id）。
            }
        }
    ）;
}

，你可以写自己的PHP $ C $下 webcam_image_ajax.php 。

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

解决方案

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.

这篇关于imagecreatefromgif（）从的base64 EN codeD gif动画在POST的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆