前端实现调用移动端拍照以及打开相册裁剪功能

最新推荐文章于 2024-02-22 10:04:44 发布

Revival_Liang

最新推荐文章于 2024-02-22 10:04:44 发布

阅读量992

点赞数 2

分类专栏： web

本文链接：https://blog.csdn.net/Revival_Liang/article/details/74685049

版权

本文介绍了如何在前端实现调用移动端摄像头拍照及从相册选取图片后进行裁剪的功能。通过创建一个Vue组件，利用HTML input[type=file]结合JavaScript的FileReader API读取图片，然后使用自定义的clip.js裁剪库实现裁剪功能。裁剪过程中涉及到图片比例调整、触摸拖动裁剪框以及保存裁剪结果。最后，裁剪完成后可以将图片上传到服务器。

摘要由CSDN通过智能技术生成

1、为模板（需要注意的一点，在<style scoped></style>里如果有scoped，需要把它去掉哦，否则裁剪框的样式就无效了，或者把css放到全局文件也行）
<template>
<div>
    <input type="file" class="file" accept="image/*;capture=camera" name="img" @change="clipImg($event)">
    <!-- 为裁剪框 -->
    <div class="clip-wp" id="clip-wp" v-show="isClip">
        <div id="container"></div>
        <button id="save-img" @click="saveImg">保存</button>
    </div>
    </div>
</template>
<script>
    import clip from '../clip/clip';
    export default{
        data(){
            return{
                isClip:false,
                isUpload:false,
                clipUrl:'',
                noScoll:function(evt){
                    this.isClip && evt.preventDefault();
                },
                clip:{}
            }
        },
        methods:{
            clipImg(event){
                this.clip = new clip('container',this);
                this.clip.init(event.target.files[0],document.body.clientWidth,document.body.clientWidth);
                this.isClip = true;
                document.body.addEventListener('touchmove',this.noScoll,false);

            },
            saveImg(){
                this.isClip = false;
                this.clip.save();
                document.body.removeEventListener('touchmove',this.noScoll,false);

            },
            uploadImg(){
                //上传到服务器或进行相关操作
                this.isUpload = true;
                console.log(this.clipUrl)
            }       
        }
    }
</script>

<style>
.file{
    height: 40px;
    display: block;
    margin: 40px auto 0;
}

.upload-wp{
    text-align: center;
    width: 300px;
    margin: 20px auto 0;
}
.upload-wp button {
   padding: 5px 10px;  
}
.upload-wp p{
 word-wrap: break-word;
        font-size: 12px;
}
.clip-wp{
    position: