前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >高拍仪SDK(文豆FastSnap)

高拍仪SDK(文豆FastSnap)

作者头像
用户11057749
修改于 2024-04-30 09:16:06
修改于 2024-04-30 09:16:06
5920
举报

本sdk主要适用于bs(web)架构,可支持谷歌Chrome、火狐Firefox、360极速和安全、Edge、IE10+等支持html5的多种浏览器。

主要功能:设置裁切模式、文件格式、色彩模式、图像质量、裁边、拍照、鼠标轮滑缩放预览画面、旋转、1:1预览、适合屏幕预览、条码识别、多设备切换、分辨率选择、获取Base64 编码字符串、添加图片到PDF及合并PDF、读取身份证信息、HTTP上传文件、返回上传结果、设置色彩模式、设置去黑边、设置去底色、设置文件格式、从摄像头中识别二维码、从图片文件中识别二维码、返回二维码识别结果、添加要合并到PDF的文件、添加合并PDF的文件返回结果等,更多功能可参考开发手册。

js代码部分 首先引入js接口

代码语言:txt
AI代码解释
复制
function ConnectServer(callback, value) {

    if ('WebSocket' in window) {
        websocket = new WebSocket(url);
    } else if (window.WebSocket) {
        websocket = new WebSocket(url);
    } else if ('MozWebSocket' in window) {
        websocket = new MozWebSocket(url);
    } else {
        alert("您浏览器版本过低!请使用360、Chrome、Firefox、Edge、IE10+浏览器!");
    }

    websocket.onopen = function (e) {
        connected = true;
        heartCheck();
        isSocketConnect = true;
        clearInterval(intervalId);
        Cam_GetDevCount();
    }
    websocket.onclose = function (e) {
        connected = false;
        isSocketConnect = true;
        reconnect();
    }
    websocket.onmessage = function (e) {
        onMessage(e);
    }
    websocket.onerror = function (e) {
        isSocketConnect = true;
        reconnect();
        alert("点击确定后若无画面,请检查【文豆FastSnap】服务是否已开启!")
    };

}

function sendMessage(jsonStr) {
    connected ? websocket.send(jsonStr) : alert("未连接websocket服务器,请确保已运行服务端!")
}


/*****************************************************************************************************************/
function cameraProduceMessage(jsonObj) {

    if (jsonObj.functionName == "VideoStream") {

        img.src = "data:image/jpg;base64," + jsonObj.imgBase64Str;
        pMainShowStartX = jsonObj.StartX;
        pMainShowStartY = jsonObj.StartY;
        img.onload = function () {

            MainContext.clearRect(0, 0, MainCanvas.width, MainCanvas.height);
            MainContext.drawImage(img, pMainShowStartX, pMainShowStartY);

            if (MainCamCutMode == 2) {
                MainContext.strokeStyle = 'blue';
                MainContext.lineWidth = 2;
                MainContext.beginPath();
                MainContext.rect(pALastX, pALastY, (pACurrentX - pALastX), (pACurrentY - pALastY));
                MainContext.closePath();
                MainContext.stroke();
            }
        }
    }

    else if (jsonObj.functionName == "VideoStream2") {
        img2.src = "data:image/jpg;base64," + jsonObj.imgBase64Str;
        pAssistShowStartX = jsonObj.StartX;
        pAssistShowStartY = jsonObj.StartY;
        img2.onload = function () {

            AssistContext.clearRect(0, 0, AssistContext.width, AssistContext.height);
            AssistContext.drawImage(img2, pAssistShowStartX, pAssistShowStartY);
        }
    }

    else if (jsonObj.functionName == "GetDevCount") {
        var Name = new Array();
        Name = jsonObj.DevName.split('|');
        GetDevCountAndNameResultCB(jsonObj.DevCount, Name);
    }

    else if (jsonObj.functionName == "GetDevResolution") {
        var resArr = new Array();
        resArr = jsonObj.Resolution.split('|');
        GetResolutionResultCB(jsonObj.ResolutionCount, resArr);
    }

    else if (jsonObj.functionName == "Cam_Open") {
        var status = jsonObj.success;
        if (status == 0) {
            isOpenMainCamera = true;
            GetCameraOnOffStatus(0);
        }
        else {
            isOpenMainCamera = false;
            GetCameraOnOffStatus(-1);
        }
    }


    else if (jsonObj.functionName == "TakeDualCameraPhoto") {
        var filePath1 = decodeURIComponent(jsonObj.filePath1);
        var filePath2 = decodeURIComponent(jsonObj.filePath2);
        GetDualCameraPhotoResultCB(jsonObj.success, filePath1, jsonObj.Abase64, filePath2, jsonObj.Bbase64);
    }

上传文件

代码语言:txt
AI代码解释
复制
function dataURLtoFile(dataurl, filename) {

    //var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    //bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    var bstr = atob(dataurl);
    var n = bstr.length;
    var u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }

    var suffix = filename.substring(filename.length - 3, filename.length);

    if (suffix == "jpg" || suffix == "JPG")
        return new File([u8arr], filename, { type: 'image/jpg' });
    if (suffix == "png" || suffix == "PNG")
        return new File([u8arr], filename, { type: 'image/png' });
    if (suffix == "tif" || suffix == "TIF")
        return new File([u8arr], filename, { type: 'image/tiff' });
    if (suffix == "pdf" || suffix == "PDF")
        new File([u8arr], filename, { type: 'application/pdf' });

    return new File([u8arr], filename, { type: 'application/jpg' });

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JS 将 base64编码的图片转化为图片文件【未测试】
需求:将string 类型的base64编码图片转化成File类型的图片文件,用于文件上传
双面人
2019/07/12
5.3K0
js 图片转换base64 base64转换为file对象
相关: https://www.cnblogs.com/fps2tao/p/9268380.html
全栈程序员站长
2022/07/21
9.5K1
base64图片压缩并转换二进制流
base64 压缩 function dealImage(base64, w, callback) { var newImage = new Image(); var quality = 0.6; newImage.src = base64.url; newImage.setAttribute('crossOrigin', 'Anonymous'); var imgWidth, imgHeight; newImage.onload = function() { imgWid
我乃小神神
2021/12/07
1.9K0
cropperjs图片裁剪及数据提交文件流互相转换详解
cropperjs的主要功能是图片裁剪,是一款前端常用的的图片裁剪工具,可根据相关api配置裁剪出符合自己业务需要的图片,具体使用如下:
超级小可爱
2023/12/21
4730
混合开发 图片上传 base64转file的坑
但是在手机上传确实失败的 ,经过分析发现 手机上base64转 file 生成的file对象和pc版的不同 。
lilugirl
2019/05/28
3K0
图片裁切上传插件cropper的使用
图片上传格式一般是文件格式和base64格式,比较方便的是图片格式,后台可以方便的处理上传的图片。
tianyawhl
2019/11/04
2.1K0
【JS】936- File、Blob、dataURL 和 canvas 的应用与转换
(1) 通常情况下, File 对象是来自用户在一个 input 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象,或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。
pingan8787
2021/04/26
2.5K0
【JS】936- File、Blob、dataURL 和 canvas 的应用与转换
js项目中常用的一些工具函数
记录一下在项目中常用的工具函数,随时更新 var utils = { /** * 获取路径参数方法 返回参数值 * @name 参数名字 * */ getQueryString: function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); // window.location.search 获取url问号后面部分 v
别盯着我的名字看
2022/06/09
5790
base64转file文件源码记录
我们前后端交互图片的时候,一般我们是用base64进行交互的,但是很多时候我们传递图片的时候很多的后端是需要file文件格式的,而不是base64的,所以这个时候是需要进行一个简单的转变
何处锦绣不灰堆
2020/05/28
1.8K0
原生JS调取PC端摄像头源码记录
今天简单的记录一个JS调取摄像头的源码,不是很难,只是为了以后可以直接拿来使用,好的废话不多说,看源码!
何处锦绣不灰堆
2020/05/28
1.9K0
ajax+php上传图片,等比压缩,canvas压缩减少上传带宽,优化上传速度
至此后端已经压缩完毕,但是如果上传的图片大多是几M的大图,难免浪费上传带宽,而且会导致速度非常慢,影响用户体验,于是可以使用canvas在上传之前压缩一遍,解决速度慢的问题。
躺平程序员老修
2023/09/05
3680
vue.js + axios.js图片压缩处理并上传到服务器demo
点击查看效果 图片压缩原理 将图片重新画入一个canvas中。可设置最大宽度,再按图片宽高比例定义canvas画布的宽高。 完整代码demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上传图片</title> <meta name="renderer" content="webkit"> <meta name="viewport" content="widt
别盯着我的名字看
2022/06/09
5.6K0
基于vue的图片裁剪插件vue-cropper ,上传图片到腾讯云存储
网上找了点教程,结合之前框架里就有的修改了一下,没做细节优化处理 demo 16:9的尺寸,自己可以修改 步骤: npm install vue-cropper 组件内使用 import { Vue
〆 千寻、
2020/03/11
4.5K0
uni-app使用微信JS-SDK
前段时间因为修改bug的原因学习了下如何在uni-app下面使用多图上传,所以基于uni-app做了一个微信JS-SDK调用的Demo
薛定喵君
2021/07/28
7.1K0
使用Vue封装一个实用的人脸识别组件
由于我们的电脑有的有摄像头,有的没有摄像头,所以我们需要根据不同的场景来封装这个组件。先放个图吧,大家可以看得更加直观一些。
Vam的金豆之路
2021/11/30
3.5K1
使用Vue封装一个实用的人脸识别组件
base64与二进制互转,保存内容,文件读写:Blob/FileReader/URL/FormData
html5开发常用的对象有:FileReader  FormData File URL  Blob createObjectURL Uint8Array等,这些在日常开发中,需要做图片转base64,base64转而二进制文件,页面截图让用户下载。
周陆军博客
2023/05/07
3K0
H5利用JS调用电脑摄像头实现拍照效果
今天学习了调用电脑摄像头,利用canvas画布将视频当前帧转换成图片的实例,其中用到了 mediaDevices.getUserMedia 方法。该方法提示用户允许使用媒体输入,产生包含所请求类型的媒体轨道。包括视频轨道(由诸如照相机,视频记录设备,屏幕共享服务等的硬件或虚拟视频源产生),音频轨道(类似地,由物理或虚拟音频源,如麦克风,A / D转换器等),以及其他可能的轨道类型。
德顺
2019/11/12
9.7K1
手把手教你实现一个图片压缩工具(Vue与Node的完美配合)
图片压缩对于我们日常生活来讲,是非常实用的一项功能。有时我们会在在线图片压缩网站上进行压缩,有时会在电脑下软件进行压缩。那么我们能不能用前端的知识来自己实现一个图片压缩工具呢?答案是有的。
Vam的金豆之路
2021/12/01
8060
手把手教你实现一个图片压缩工具(Vue与Node的完美配合)
开发中常用的JS知识点集锦
1、对象的深拷贝(一级属性拷贝和多级属性嵌套拷贝) //深拷贝函数(满足属性多级嵌套) function deepCloneObj(sourceObj){ var obj = (sourceO
tandaxia
2018/11/21
5230
vue+vue-cropper实现上传剪裁图片以及上传时压缩图片
代码暂时都是从项目中抽出来的,只适合借鉴参考,等有时间再单独将这些功能单独写项目,欢迎大家提供更好用的方法或指出不足之处,一起进步。
conanma
2021/11/03
3.7K0
推荐阅读
相关推荐
JS 将 base64编码的图片转化为图片文件【未测试】
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档