我想从流媒体,视频,或使用图像 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< 320;我++){
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;
}
如果(POS> = 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('< DIV ID =camera_error>< B>相机无法连接< / B>< BR />请务必确保您的相机另一个应用程序插入和使用< / DIV>');
$(#webcam_status)HTML(<跨度风格=颜色:#CC0000。>摄像头没有找到,请重试< / SPAN>中)。
$(#webcam_takesnap)隐藏()。
返回false;
}
});
POS = 0;
}
其他 {
saveCB =功能(数据){
gif.push(数据);
POS + = 4 * 320;
如果(POS> = 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
< PHP
include_once'includes.php;
如果(使用isset($ _ POST ['摄像头']))
{
$ newdata = $壁挂> Get_Upload_Image($ UID,0);
回声< IMG SRC ='上传/".$ newdata ['image_path'。阶级='webcam_ preVIEW gifshot - 图像 - preVIEW节ID =$ newdata [。 ID']'。/>
;
}
?>
在 webcam_imageload_ajax.php
与 webcam_image_ajax.php
工作
如果 webcam_image_ajax.php
创建图像,然后 webcam_imageload_ajax.php
像呼应图片:
上传/ 14202558.gif
但现在它看起来像:
数据:图像/ GIF; BASE64,iVBORw0KGgoAAAANSUhEUgAABE ... 的
创造一个GIF按钮:
<按钮式=按钮ID =创造的gif级=BTN BTN-大BTN-小学创建-GIF按钮camclick的onclick =返回takeSnap( );>创建GIF< /按钮>
<输入类型=隐藏ID =webcam_count/>
解决方案
忘了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
.
相关推荐
最新文章