vue 远程加载图片,渲染后处理图片,并让图片自适应大小
首先需要远程加载图片this.$http.post(tagDataMarketUrl.downloadDetail,datas).then((response) =>{//远程加载数据this.data= response.data;//远程图片this.img = this.data.img...
·
首先需要远程加载图片
this.$http.post(tagDataMarketUrl.downloadDetail,datas).then(
(response) =>{
//远程加载数据
this.data= response.data;
//远程图片
this.img = this.data.img
//处理图片,比如自适应大小,这种方式无法获取图片
方法1()
}
)
}
通常数据加载后,直接获取图片,但是数据在return 之前获取,数据未获取到,无法进行处理图片。
要使用数据加载后,对图片进行处理,需要在方法1之前添加:
this.$nextTick(function(){
方法1()
}
在远程数据加载后,再调用图片处理方法。
this.$http.post(tagDataMarketUrl.downloadDetail,datas).then(
(response) =>{
//远程加载数据
this.data= response.data;
//远程图片
this.img = this.data.img
this.$nextTick(function(){
// 获取所有的img标签
let imgList = document.querySelectorAll(".img_block");
// 获取父元素宽高
let parentWh = imgList[0].parentNode;
let wid = this.getWidHei(parentWh, 'width');
let hei = this.getWidHei(parentWh, 'height');
// let fullHeight = document.documentElement.clientHeight;
// 等比压缩图片
this.AutoSize(imgList, wid, hei);
});
}
AutoSize(listImg, maxWidth, maxHeight) { let _this = this //原图片原始地址(用于获取原图片的真实宽高,当<img>标签指定了宽、高时不受影响) for (let i = 0; i < listImg.length; i++) { let image = new Image(); // 获取每一个图片的宽高 image.src = listImg[i].src; if (image.complete) { _this.changeImgSize(maxWidth, maxHeight, image, listImg[i]) } else { image.onload = function () { _this.changeImgSize(maxWidth, maxHeight, image, listImg[i]) } } } }, changeImgSize (maxWidth, maxHeight, image, node) { // 当图片比图片框小时不做任何改变 if (image.width < maxWidth && image.height < maxHeight) { // 原图片宽高比例 大于 图片框宽高比例 node.width = image.width node.height = image.height } else { // 原图片宽高比例 大于 图片框宽高比例,则以框的宽为标准缩放,反之以框的高为标准缩放 if (maxWidth / maxHeight <= image.width / image.height) { node.width = maxWidth // 以框的宽度为标准 node.height = maxWidth * (image.height / image.width) } else { node.width = maxHeight * (image.width / image.height) node.height = maxHeight // 以框的高度为标准 } } }
更多推荐
已为社区贡献1条内容
所有评论(0)