flash jquery 调用摄像头 vue chrome49浏览器

这个摄像头,不能一个页面加载多个,只能一个页面显示一次,所以 调用的时候,记得加v-if 把组件销毁,然后从新加载新的

<!--
* @description 摄像头vue版实例
* @fileName cameraObject.vue
* @author 彭成刚
* @date // ::
* @version V1.0.0
!-->
<template>
<div> <div id="webcam"></div>
<!--<button @click="jieping">截屏</button>-->
<div style="color:red; margin: 10px;">点击即可启用 Adobe Flash Player(拍照功能将启用Flash,第一次启用将会刷新页面,导致数据丢失,建议返回表单页面保存数据后开启拍照功能。)</div> <Button type='primary'
@click="handleCamera"
style="margin-bottom:5px; margin-right:5px;">拍照</Button><!--icon="md-camera"-->
<Button type='warning'
@click="leftRotate"
:disabled="buttonDisabled"
style="margin-bottom:5px; margin-right:5px;">逆旋转</Button>
<Button type='warning'
@click="rightRotate"
:disabled="buttonDisabled"
style="margin-bottom:5px;">正旋转</Button>
<!--<canvas id="canvas" width="" height=""></canvas>-->
<div>
<img ref="img" id="base64image" src='' />
</div>
</div>
</template> <script>
import jQuery from '@/../public/components/webcam/jquery.webcam'
export default {
data () {
return {
buttonDisabled: true,
timer: new Date().getTime().toString(),
picIsHave: false
}
}, components: {}, computed: {}, mounted () {
let _this = this
var pos = , ctx = null, saveCB, image = []; var canvas = document.createElement("canvas");
canvas.setAttribute('width', );
canvas.setAttribute('height', ); if (canvas.toDataURL) { ctx = canvas.getContext("2d"); image = ctx.getImageData(, , , ); saveCB = function(data) {
// console.info('data', data) var col = data.split(";");
var img = image; for(var i = ; i < ; i++) {
var tmp = parseInt(col[i]);
img.data[pos + ] = (tmp >> ) & 0xff;
img.data[pos + ] = (tmp >> ) & 0xff;
img.data[pos + ] = tmp & 0xff;
img.data[pos + ] = 0xff;
pos+= ;
} if (pos >= * * ) {
ctx.putImageData(img, , )
var base64 = canvas.toDataURL("image/png")
// console.info('canvas.toDataURL("image/png")',)
// document.getElementById('base64image').attributes('src',base64)
console.info('_this',_this)
jQuery('#base64image').attr('src',base64)
_this.buttonDisabled = false
// $.post("/upload.php", {type: "data", image: canvas.toDataURL("image/png")});
pos = ;
}
}; } else { saveCB = function(data) {
console.info('data2',data)
image.push(data); pos+= * ; if (pos >= * * ) {
console.info('data2 ok')
// $.post("/upload.php", {type: "pixel", image: image.join('|')});
pos = ;
}
};
} jQuery("#webcam").webcam({ width: ,
height: ,
mode: "callback",
swffile: "/familyMajor_web/components/webcam/jscam_canvas_only.swf", onSave: saveCB, onCapture: function () {
webcam.save();
}, debug: function (type, string) {
console.log(type + ": " + string);
}
});
}, methods: {
// 外层调用
getPicBase64 () {
let base64 = this.$refs.img.src
let ret = {
picIsHave: this.picIsHave,
base64: base64
}
return ret
},
handleCamera () {
this.picIsHave = true
webcam.capture()
},
leftRotate () {
let src = this.$refs.img.src
let edg = -
this.rotateBase64Img(src, edg, (_) => { this.$refs.img.src = _ })
},
rightRotate () {
let src = this.$refs.img.src
let edg =
this.rotateBase64Img(src, edg, (_) => { this.$refs.img.src = _ })
},
rotateBase64Img (src, edg, callback) {
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d') var imgW // 图片宽度
var imgH // 图片高度
var size // canvas初始大小 if (edg % !== ) {
console.error('旋转角度必须是90的倍数!')
// throw '旋转角度必须是90的倍数!'
}
(edg < ) && (edg = (edg % ) + )
const quadrant = (edg / ) % // 旋转象限
const cutCoor = { sx: , sy: , ex: , ey: } // 裁剪坐标 var image = new Image()
image.crossOrigin = 'anonymous'
image.src = src image.onload = function () {
imgW = image.width
imgH = image.height
size = imgW > imgH ? imgW : imgH canvas.width = size *
canvas.height = size *
switch (quadrant) {
case :
cutCoor.sx = size
cutCoor.sy = size
cutCoor.ex = size + imgW
cutCoor.ey = size + imgH
break
case :
cutCoor.sx = size - imgH
cutCoor.sy = size
cutCoor.ex = size
cutCoor.ey = size + imgW
break
case :
cutCoor.sx = size - imgW
cutCoor.sy = size - imgH
cutCoor.ex = size
cutCoor.ey = size
break
case :
cutCoor.sx = size
cutCoor.sy = size - imgW
cutCoor.ex = size + imgH
cutCoor.ey = size + imgW
break
} ctx.translate(size, size)
ctx.rotate(edg * Math.PI / )
ctx.drawImage(image, , ) var imgData = ctx.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey)
if (quadrant % === ) {
canvas.width = imgW
canvas.height = imgH
} else {
canvas.width = imgH
canvas.height = imgW
}
ctx.putImageData(imgData, , )
callback(canvas.toDataURL())
}
} }
} </script>
<style lang='less'> </style>

flash jquery 调用摄像头 vue chrome49浏览器的更多相关文章

  1. 使用vue做移动app时,调用摄像头扫描二维码

    现在前端技术发展飞快,前端都能做app了,那么项目中,也会遇到调用安卓手机基层的一些功能,比如调用摄像头,完成扫描二维码功能 下面我就为大家讲解一下,我在项目中调用这功能的过程. 首先我们需要一个中间 ...

  2. vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式

    进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...

  3. html5调用摄像头并拍照

    随着flash被禁用,flash上传附件的方式已成为过去,现在开始用html5上传了.本片文章就是介绍如何使用html5拍照,其实挺简单的原理: 调用摄像头采集视频流,利用canvas的特性生成bas ...

  4. jQuery 调用jsonp实现与原理

    jQuery 调用jsonp实现与原理 您的评价:        收藏该经验     阅读目录 1.客户端代码 2.服务器端 通过jQuery实现JSONP 一般的ajax是不能跨域请求的,因此需要使 ...

  5. HTML之调用摄像头实现拍照和摄像功能

    应该有很多人知道,我们的手机里面有个功能是“抓拍入侵者”,说白了就是在解锁应用时如果我们输错了密码手机就会调用这一功能实现自动拍照. 其实在手机上还有很多我们常用的软件都有类似于这样的功能,比如微信扫 ...

  6. web HTML5 调用摄像头的代码

    最近公司要求做一个在线拍照的功能,具体代码如下: <html> <head> <title>html5调用摄像头拍照</title> <style ...

  7. VS2010中使用Jquery调用Wcf服务读取数据库记录

    VS2010中使用Jquery调用Wcf服务读取数据库记录 开发环境:Window Servere 2008 +SQL SERVE 2008 R2+ IIS7 +VS2010+Jquery1.3.2 ...

  8. 抛弃WebService,在.NET4中用 jQuery 调用 WCF

    在我们之前的开发中,对于ajax程序,都是通过jQuery调用标记为[System.Web.Script.Services.ScriptService]的WebService,然后在WebServic ...

  9. [转]html5调用摄像头实例

    原文:https://blog.csdn.net/binquan_liang/article/details/79489989 最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章 ...

随机推荐

  1. python 2 与python 3 区别

    print def print(self, *args, sep=' ', end='\n', file=None): # known special case of print "&quo ...

  2. SqlServer2012——多表连接查询

    1.基本连接 select A.姓名,A.性别,B.班级名,B.家庭住址 From 学生信息 A,班级信息 B where A.所属班级=B.班级编号 --把A表与B表连接起来 2.内连接 --内连接 ...

  3. Vee-validate 父组件获取子组件表单校验结果

    vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...

  4. SQL中的limit

    SELECT * FROM employees ORDER BY hire_date DESC LIMIT 2,1; LIMIT m,n : 表示从第m+1条开始,取n条数据: LIMIT n : 表 ...

  5. linux端口netstat

    netstat -aptn命令行,查看所有开启的端口号 netstat -nupl       查看所有udp端口号 netstat -ntpl   查看所有tcp端口号 查看某服务占用的端口情况,比 ...

  6. uoj#400. 【CTSC2018】暴力写挂(边分治)

    传送门 做一道题学一堆东西.jpg 猫老师的题--暴力拿的分好像比打挂的正解多很多啊--我纯暴力+部分分已经能有80了--正解没调对之前一直只有10分→_→ 先说一下什么是边分治.这个其实类似于点分治 ...

  7. uoj#36. 【清华集训2014】玛里苟斯(线性基+概率期望)

    传送门 为啥在我看来完全不知道为什么的在大佬们看来全都是显然-- 考虑\(k=1\)的情况,如果序列中有某一个\(a_j\)的第\(i\)位为\(1\),那么\(x\)的第\(i\)位为\(1\)的概 ...

  8. 3.过滤数据 ---SQL

    一.使用WHERE子句 SELECT prod_name, prod_price FROM Products WHERE prod_price = 3.49; 输出▼ prod_name prod_p ...

  9. 前端JavaScript(3)-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息

    小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...

  10. opencv 形态学膨胀和腐蚀以及开运算和闭运算