请选择 进入手机版 | 继续访问电脑版

开发者社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 安装 BPM 控件
查看: 4055|回复: 10

【分享】一步通平台实现 摄像头拍照(利用ScriptCam插件)

[复制链接]

4

主题

23

帖子

285

积分

中级会员

Rank: 3Rank: 3

积分
285
QQ
发表于 2016-5-30 20:37:00 | 显示全部楼层 |阅读模式
本帖最后由 小鱼 于 2016-5-30 21:53 编辑

摄像头拍照的效果图:
image011.jpg
(左侧图像是摄像头实时预览视频,右侧是拍照截图静态图片。)

说明:
本文采用的是 ScriptCam 插件实现的,请注意官方的版权声明:

  • ScriptCam is free for use on personal and non-commercial sites. Otherwise you'll need to buy a license (see below).
个人和非商业站点是免费的,其他请购买授权,详见官方网页:http://www.scriptcam.com/download.cfm

==========================  正文  =============================
资源准备:
1、有两个文件需要上传到服务器上。
    一个flash文件,一个图片。

[PS]用到的资源文件,已打包放在11#楼了,需要的请到11楼下载。

    为方便在js脚本里引用这两个文件,需要把文件放在一个好引用的地方。
    我在Web文件夹平级目录,建立一个 my 文件夹, 把flash文件和那个图片放在my下res文件夹。
    在IIS站点里应用下面,建一个虚拟目录,指向 my 文件夹。

    (把实体文件 放在跟一步通 Web 文件夹 平级的目录里,主要是防止升级的时候误删除,当然放在其他位置也可以)

    image008.jpg image002.jpg



2、有两个js脚本文件需要添加。

    这两个js可以从官方 http://www.scriptcam.com/ 网站下载页面下载示例(http://www.scriptcam.com/download.cfm
    (从官方下载的代码,记得修改里面引用flash和图片的路径)

    下面把js代码贴一下,需要的可以直接复制。

    image009.jpg





4

主题

23

帖子

285

积分

中级会员

Rank: 3Rank: 3

积分
285
QQ
 楼主| 发表于 2016-5-30 20:37:01 | 显示全部楼层
本帖最后由 小鱼 于 2016-5-30 21:55 编辑

2.1、swfobject.js
    这个js 是添加 flash 对象用的,不用做修改。
    (代码太长,一个帖子放不下,请合并以下3个帖子的代码)

  1. 代码已在11楼打包
复制代码

转到11楼下载代码包

4

主题

23

帖子

285

积分

中级会员

Rank: 3Rank: 3

积分
285
QQ
 楼主| 发表于 2016-5-30 20:37:02 | 显示全部楼层
本帖最后由 小鱼 于 2016-5-30 21:55 编辑
  1. 这楼拆了
复制代码

4

主题

23

帖子

285

积分

中级会员

Rank: 3Rank: 3

积分
285
QQ
 楼主| 发表于 2016-5-30 20:37:03 | 显示全部楼层
本帖最后由 小鱼 于 2016-5-30 21:56 编辑

  1. 这层也拆了
复制代码

4

主题

23

帖子

285

积分

中级会员

Rank: 3Rank: 3

积分
285
QQ
 楼主| 发表于 2016-5-30 20:37:04 | 显示全部楼层
本帖最后由 小鱼 于 2016-5-30 21:56 编辑
  1. 拆楼啦
复制代码

4

主题

23

帖子

285

积分

中级会员

Rank: 3Rank: 3

积分
285
QQ
 楼主| 发表于 2016-5-30 20:43:57 | 显示全部楼层
本帖最后由 小鱼 于 2016-5-30 21:57 编辑


2.2、scriptcam.js
     这个js是 ScriptCam 初始化程序,需要修改其中 第146行 flash文件引用的地方:

     swfobject.embedSWF(decodeURIComponent(data.path) + "/my/res/scriptcam.swf", n.id, t, r, "11.6", false, n, i)

代码正文如下:

  1. 代码请到11楼下载吧
复制代码

转11楼

4

主题

23

帖子

285

积分

中级会员

Rank: 3Rank: 3

积分
285
QQ
 楼主| 发表于 2016-5-30 21:05:06 | 显示全部楼层
3、创建frm窗体

     下图是 摄像头拍照对话框.frm 的设置:

      image005.jpg
     注意:要引用两个js文件。

3.1、窗体设计
image003.jpg

窗体参数:宽 620 ,高 370
image004.jpg

label_Cam
IsHtmlContent 设置为 true
text 为 <div id="webcam"></div> ,用于占位摄像头视频区域,在初始代码里要用到。

label_CamView
IsHtmlContent 设置为 true
text 为 <img id="image" width=240 height=180/> ,用于占位截图预览区域,在截图代码里用到。

comboBox_CamList
普通下拉框,起好名字就行,在摄像头初始化列表里用到。

txt_B64
普通文本框,用于保存截图之后Base64编码字符串。
Visible 设置为 false,不显示。


4

主题

23

帖子

285

积分

中级会员

Rank: 3Rank: 3

积分
285
QQ
 楼主| 发表于 2016-5-30 21:07:54 | 显示全部楼层
3.2、初始化代码
  1. // webcam 视频高度宽度
  2. var camw = 320,
  3.     camh = 240;

  4. // 初始化摄像头,注意修改 uploadImage 参数的文件路径
  5. $(document).ready(function() {
  6.     $("#webcam").scriptcam({
  7.         width: camw,
  8.         height: camh,
  9.         showMicrophoneErrors: false,
  10.         onError: onError,
  11.         cornerRadius: 20,
  12.         disableHardwareAcceleration: 1,
  13.         cornerColor: 'e3e5e2',
  14.         onWebcamReady: onWebcamReady,
  15.         uploadImage: '/my/res/upload.gif',
  16.         onPictureAsBase64: base64_tofield_and_image
  17.     });
  18. });

  19. // 保存截图到文本框并显示到图片
  20. function base64_tofield_and_image(b64) {
  21.     txt_B64.SetText(b64);
  22.     $('#image').attr("src", "data:image/png;base64," + b64);
  23. }

  24. // 截图到图片
  25. function base64_toimage() {
  26.     var B64 = $.scriptcam.getFrameAsBase64();
  27.     $('#image').attr("src", "data:image/png;base64," + B64);
  28. }

  29. // 截图到文本框
  30. function base64_tofield() {
  31.     txt_B64.SetText($.scriptcam.getFrameAsBase64());
  32. }

  33. function onError(errorId, errorMsg) {
  34.     //button_Take.SetEnabled(false);
  35.     alert(errorMsg);
  36. }

  37. // 摄像头列表初始化
  38. function onWebcamReady(cameraNames, camera, microphoneNames, microphone, volume) {
  39.     $.each(cameraNames, function(index, text) {
  40.         comboBox_CamList.AddItem({
  41.             Text: text,
  42.             Value: index
  43.         });
  44.     });
  45.     button_Take.SetEnabled(true);
  46.     comboBox_CamList.SetSelectedIndex(camera);
  47. }
复制代码

3.3、按钮的代码
  1. function button_Take_OnClick(sender) {
  2.     base64_toimage();
  3.     base64_tofield();
  4. }

  5. function button_Close_OnClick(sender) {
  6.     Common.Dialog.close();
  7. }

  8. function comboBox_CamList_OnSelectedIndexChanged(sender, index) {
  9.     $.scriptcam.changeCamera(comboBox_CamList.GetSelectedValue());
  10. }

  11. function button_Save_OnClick(sender) {
  12.     var B64=txt_B64.GetText();
  13.     Page.Dialog.Result = {
  14.         IsOK: true,
  15.         ImageB64: B64
  16.     };
  17.     Common.Dialog.close();
  18. }
复制代码

4

主题

23

帖子

285

积分

中级会员

Rank: 3Rank: 3

积分
285
QQ
 楼主| 发表于 2016-5-30 21:26:35 | 显示全部楼层
本帖最后由 小鱼 于 2016-5-30 21:37 编辑

4、在其他窗口调用拍照对话框
  1.     var args = {};
  2.     args.DialogTitle = "摄像头拍照";
  3.     args.DialogWidth = 800;
  4.     args.DialogHeight = 500;
  5.     args.DialogIsMax = false;
  6.     args.DialogShowMaxBtn = false;
  7.     args.DialogIsAutoSize = true;
  8.     args.WidgetModule = {
  9.         ID: "F476C426AE84425C8F69A364F6F40D69", //摄像头拍照剪裁对话框
  10.         Args: {}
  11.     };
  12.     args.Dialog = {
  13.         Args: {}
  14.     };
  15.     args.IsStandardForm = true;
  16.     Widget.Dialog.showWidgetModule(args, function(dialog) {
  17.         if(dialog.Result.IsOK) {
  18.             update_pictureBox_Photo(dialog.Result.ImageB64);
  19.         }
  20.     });
复制代码


5、截图数据的用法
     对话框返回的 dialog.Result.ImageB64 是图片的系列化字符串。

5.1、作为 img 标签的 src 直接显示
     这个Base64字符串 如果想显示到 img 标签作为 src  图片源, 需要前面加上 MIME 类型 "data:image/png;base64,"
     例如,前面截图事件用到的代码:

  1. $('#image').attr("src", "data:image/png;base64," + b64);
复制代码

5.2、把字符串保存到数据库,作为多媒体图片
     这个Base64字符串 要保存成数据库图片,需要处理用ds处理一下。
     下面用一段C#代码 把字符串保存成图片字段。

    主要的代码:
       byte[] ImageData = Convert.FromBase64String(ImageB64);
       把字符串转换成byte数组。
       然后在INSERT的时候,用一步通的函数转成多媒体类型  dbo.My_SetBlobFieldMergeFile(@ImageData, 'photo', '.jpg')

     以下代码仅供参考:
  1. using System;
  2. using System.Collections.Generic;
  3. using MySoft.HR.Utils;
  4. using MySoft.Common.Function;

  5. class DataService : DataServiceBase
  6. {
  7.     public object Execute(Dictionary<string, object> args)
  8.     {
  9.         var RowID = args.GetValueIf("RowID", "");
  10.         var ImageB64 = args.GetValueIf("ImageB64", "");
  11.         if(RowID.IsNullOrEmpty())
  12.             throw new ReturnInfoMessageException("RowID不能为空");
  13.         byte[] ImageData = Convert.FromBase64String(ImageB64);
  14.         if(ImageData.Length == 0)
  15.            ImageData = null;
  16.         
  17.         var sql = "INSERT INTO TMP_ImageFile (RowID,ID,ImageFile,CreateTime) VALUES (@RowID,@RowID,dbo.My_SetBlobFieldMergeFile(@ImageData, 'photo', '.jpg'),getdate())";
  18.         
  19.         DB.Execute(sql, new {
  20.            RowID = RowID,
  21.            ImageData = ImageData
  22.         });
  23.         return true;
  24.     }
  25. }
复制代码




40

主题

49

帖子

260

积分

超级版主

Rank: 8Rank: 8

积分
260
发表于 2016-5-30 21:36:29 | 显示全部楼层
脚本好长啊,能不能打包上传代码
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|一步通软件 ( 蜀ICP备15031919号 )

快速回复 返回顶部 返回列表