影像采集-拍照 （用自己的插件 ）简单逻辑

Posted 2020-12-05 ouycx

 

1. 加载插件

camera.js    加载的插件是摄像头插件

image.js    加载的是图像插件

???????????????

2.把插件的el 加载到要插入的dom元素中， 一般用 embed 标签可设置器宽高

3.在调用摄像头插件  that.cameraPlugin.open()方法打开插件

4.调用图像插件  that.cameraPlugin.capture() 截图 并且会把当前截图的路径返回

5.调用图像插件   显示图片 that.imgEditerPlugin.showImage(URL, 0, that.width, that.height);????????????

6 使用（把图片上传服务器，再把图片信息保存到表里 如task_img 及img_info），再把显示图片的地址改成服务器的地址显示

 

a.二进制上传图片：

 

 var dataURItoBlob = function (dataURI) {
        var byteString = atob(dataURI.split(‘,‘)[1]);
        var mimeString = dataURI.split(‘,‘)[0].split(‘:‘)[1].split(‘;‘)[0];
????      var ab = new ArrayBuffer(byteString.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        return new Blob([ab], {type: mimeString});
    },
    fd = new FormData(),
    fname = (new Date().getTime()) + parseInt(Math.random() * 1000, 10) + ".jpg",
    blob = dataURItoBlob("data:image/jpg;base64," + that.imgEditerPlugin.encodeBase64());

fd.append("file", blob, fname);
ajax.ajax({
    contentType: false,
    cache: false,
    url: uploadUrl,
    type: "POST",
    processData: false,
    data: fd
}).then(function (result) {});

7.图片共享：

a.先根据客户号、影像类别查找已经已经上传的图片帧、先获取到以前的url并显示图片；
b.点击使用的时候，服务端拷贝一份相同的图片，并且保存数据到表里，再返回对应当前帧的服务器图片地址，替换对应帧记录显示。