<template><div><Carouselclass="header-boox"v-model="banner":autoplay-speed="speedS"autoplayloop><CarouselItemv-for="(item,index) in imageArray":value="item":key="index"><divclass="carousel-item"><img:src="item"/></div></CarouselItem></Carousel></div></template><script>  export default {
        name: 'Home',
        components: {},
        data(){
            return {
                banner: 0,
                speedS: 5000,
                imageArray: [],
            }
        },
        methods: {
            queryHome() {
                let params = {};
                apiRequest(this,queryCarouselMap(params),response => {
                    response.carouseList.map((item) => {
                        let canvas = document.createElement("canvas");
                        let ctx = canvas.getContext("2d");
                        let imagePath;
                        let image = new Image();
                        //为了在方法内部的方法中使用this对象，相当于起别名。
                        let _this = this;
                        image.onload = function(e) {
                            let width = image.width;
                            if (width>1110){
                                //如果等比缩放可以计算宽度和长度，我这里不需要等比缩放，所以直接写死
                                var anw = document.createAttribute("width");
                                anw.nodeValue = 1110;
                                var anh = document.createAttribute("height");
                                anh.nodeValue = 250;
                                canvas.setAttributeNode(anw);
                                canvas.setAttributeNode(anh);
                                ctx.drawImage(image,0,0,1110,250);
                                imagePath = canvas.toDataURL('image/png',1);
                            }else{
                                imagePath = item.imagePath;
                            }
                            _this.imageArray.push(imagePath);
                        };
                        image.src = item.imagePath;
                    });
                });
            }
        },
        created: {
            this.queryHome();
        }
    }
</script>