Vue2.0实现调用摄像头进行拍照功能exif.js实现图片上传功能资源-CSDN下载

96 浏览量 2020-12-29 00:29:17 上传评论收藏 80KB PDF 举报

资源推荐

资源详情

资源评论

Vue2.0实现调用摄像头进行拍照功能实现调用摄像头进行拍照功能 exif.js实现图片上传功能实现图片上传功能

本文实例为大家分享了Vue2.0实现调用摄像头进行拍照功能的具体代码，以及图片上传功能引用exif.js，供大家参考，具体内

容如下

可以在github 上下载demo链接

vue组件代码

<template>

<div>

<div style="padding:20px;">

<div class="show">

<div class="picture" :style="'backgroundImage:url('+headerImage+')'"></div>

</div>

<div style="margin-top:20px;">

<input type="file" id="upload" accept="image/jpg" @change="upload">

<label for="upload"></label>

</div>

</div>

</div>

</template>

<script>

import {Exif} from './exif.js'

export default {

data () {

return {

headerImage:'',picValue:''

}

},

mounted () {

},

methods: {

upload (e) {

let files = e.target.files || e.dataTransfer.files;

if (!files.length) return;

this.picValue = files[0];

this.imgPreview(this.picValue);

console.log(this.picValue)

},

imgPreview (file) {

let self = this;

let Orientation;

//去获取拍照时的信息，解决拍出来的照片旋转问题

Exif.getData(file, function(){

Orientation = Exif.getTag(this, 'Orientation');

});

// 看支持不支持FileReader

if (!file || !window.FileReader) return;

if (/^image/.test(file.type)) {

// 创建一个reader

let reader = new FileReader();

// 将图片2将转成 base64 格式

reader.readAsDataURL(file);

// 读取成功后的回调

reader.onloadend = function () {

let result = this.result;

let img = new Image();

img.src = result;

//判断图片是否大于100K,是就直接上传，反之压缩图片

if (this.result.length <= (100 * 1024)) {

self.headerImage = this.result;

self.postImg();

}else {

img.onload = function () {

let data = self.compress(img,Orientation);

剩余14页未读，继续阅读

内容反馈

weixin_38569219

粉丝: 4

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip