标签：files canvas vue 预览 image base64 item var dd

https://blog.csdn.net/przlovecsdn/article/details/80337738

<template>
    <div class="com-upload-img">
        <div class="img_group">
            <div class="img_box" v-if="allowAddImg">
                <input type="file" accept="image/*" multiple="multiple" @change="changeImg($event)">
                <div class="filter"></div>
            </div>
        <div class="img_box" v-for="(item,index) in imgArr" :key="index">
             <div class="img_show_box">
                <img :src="item" alt="">
                <i class="img_delete" @click="deleteImg(index)"></i>
                <!-- <i class="img_delete" @click="imgArr.splice(index,1)"></i> -->
            </div>
        </div>
        </div>
    </div>
</template>
 
<script>
export default {
    name:'ComUpLoad',
    data () {
        return {
            imgData:'',
            imgArr:[],
            imgSrc:'',
            allowAddImg:true,
        }
    },
methods: {
    changeImg: function(e) {
        var _this = this;
        var imgLimit = 1024;
        var files = e.target.files;
        var image = new Image();
        if(files.length>0){
            var dd = 0;
            var timer = setInterval(function(){
                if(files.item(dd).type != 'image/png'&&files.item(dd).type != 'image/jpeg'&&files.item(dd).type != 'image/gif'){
                    return false;
                }
 
            if(files.item(dd).size>imgLimit*102400){
                //to do sth
            }else{
                image.src = window.URL.createObjectURL(files.item(dd));
                image.onload = function(){
                // 默认按比例压缩
                var w = image.width,
                h = image.height,
                scale = w / h;
                w = 200;
                h = w / scale;
                // 默认图片质量为0.7，quality值越小，所绘制出的图像越模糊
                var quality = 0.7;
                //生成canvas
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                // 创建属性节点
                var anw = document.createAttribute("width");
                anw.nodeValue = w;
                var anh = document.createAttribute("height");
                anh.nodeValue = h;
                canvas.setAttributeNode(anw);
                canvas.setAttributeNode(anh);
                ctx.drawImage(image, 0, 0, w, h);
                var ext = image.src.substring(image.src.lastIndexOf(".")+1).toLowerCase();//图片格式
                var base64 = canvas.toDataURL("image/"+ext, quality );
                // 回调函数返回base64的值
                if(_this.imgArr.length<=4){
                    _this.imgArr.unshift('');
                    _this.imgArr.splice(0, 1, base64);//替换数组数据的方法，此处不能使用：this.imgArr[index] = url;
                if(_this.imgArr.length>=5){
                    _this.allowAddImg = false;
                }
            }
        }
    }
 
        if(dd<files.length-1){
            dd++;
        }else{
            clearInterval(timer);
        }
        },1000)
    }
},
deleteImg: function(index){
        this.imgArr.splice(index,1);
            if(this.imgArr.length<5){
            this.allowAddImg = true;
        }
    },
    },
}
</script>

标签：files,canvas,vue,预览,image,base64,item,var,dd
来源： https://www.cnblogs.com/zyx-blog/p/15601387.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。