图片，视频加载，接口请求等方法

---

一、获取到远程图片需要按照当前容器大小进行计算后展示？

• 需要及时展示数据量大时onload（）事件可能会计算延迟，使用定时器

//加载每一张图片
      getImgCover (item) {
        return new Promise(resolve => {
            const img = new Image()
            img.src = item.cover
            let width = 0
            let height = 0
           // const check = () => {
              img.onload = () => {
                if (img.width > 0 || img.height > 0) {
                  width = img.width
                  height = img.height
                  //clearInterval(set)
                  resolve({ width, height })
               }
             }
          // }
            //不使用定时器
            //const set = setInterval(check, 50)
        
        })
      },

• 根据你需要的容器大小对图片进行重新计算

const changeSizeByWidth = (w, h, areaWidth) => {
  const newW = areaWidth
  const newH = Math.floor(areaWidth * h / w)
  return { newW, newH}
}

const changeSizeByHeight = (w, h, areaHeight) => {
  const newH = areaHeight
  const newW = Math.floor(areaHeight * w / h)
  return { newW, newH}
}
/**
 * 
 * areaWidth 图片容器宽
 * areaHeight 图片容器高
 * imgWidth 原始图片宽
 * imgHeight 原始图片高
 * 返回适配计算后的图片宽高
 */
export const regulateShowImgWh = (areaWidth, areaHeight, imgWidth, imgHeight) => {
  let newW = '', newH = ''
  if(imgWidth >= imgHeight) {
    const obj = changeSizeByWidth(imgWidth, imgHeight, areaWidth)
    newW = obj.newW
    newH = obj.newH
    if(newH > areaHeight) {
      const obj = changeSizeByHeight(newW, newH, areaHeight)
      newW = obj.newW
      newH = obj.newH
    }
  } else if(imgWidth < imgHeight) {
    const obj = changeSizeByHeight(imgWidth, imgHeight, areaHeight)
    newW = obj.newW
    newH = obj.newH
    if(newW > areaWidth) {
      const obj = changeSizeByWidth(newW, newH, areaWidth)
      newW = obj.newW
      newH = obj.newH
    }
  }
 return {w: newW, h: newH}
}

二、音视频文件onload（）事件的使用

• 参考w3c文档
  链接: https://www.w3school.com.cn/tags/av_event_loadeddata.asp.

代码如下（示例）：

this.$refs['effectVideo'].addEventListener("loadeddata", () => {   
  this.effectWh.w = this.$refs['effectVideo'].videoWidth
  this.effectWh.h = this.$refs['effectVideo'].videoHeight
  console.log(this.effectWh);
 } )

三、图片转base64

• 图片路径转base64

• 远程url图片转base64

四、canvas 图片预加载方法

• 链接: [https://www.jb51.net/html5/717484.html]

五、获取到远程图片需要按照当前容器大小进行计算后展示？

如果你需要多次发送请求并取消请求，则可以在点击事件处理程序中动态地创建 source 和 CancelToken 实例，并将其作为请求参数传递。每次点击事件时，都会创建一个新的 source 和 CancelToken 实例，用于发送新的请求并取消之前的请求。

const btnCancel = document.querySelector('#cancel-button');

btnCancel.addEventListener('click', () => {
  if (axiosSource) {
    axiosSource.cancel('用户取消了请求');
  }
});

function sendRequest() {
  const CancelToken = axios.CancelToken;
  const source = CancelToken.source();
  axiosSource = source;

  axios.get('/your/api/endpoint', {
    cancelToken: source.token
  })
    .then(response => {
      console.log(response.data);
    })
    .catch(err => {
      if (axios.isCancel(err)) {
        console.log('请求已被取消：', err.message);
      } else {
        console.log('请求异常：', err.message);
      }
    });
}

// 模拟多次发送请求
for (let i = 0; i < 5; i++) {
  setTimeout(() => {
    sendRequest();
  }, i * 1000);
}

在上述代码中，创建了一个全局变量 axiosSource 来存储当前正在进行的请求的 source 对象。在点击事件处理程序中，调用 axiosSource.cancel() 方法来取消当前请求。在 sendRequest() 函数中，动态创建了 source 和 CancelToken 实例，用于发送请求并取消之前的请求。

在模拟多次发送请求时，使用 setTimeout() 函数来延迟发送每个请求，以便能够观察到取消请求的效果。

请注意，在每次调用 sendRequest() 函数时，都会创建一个新的 source 和 CancelToken 实例。如果你需要在多个函数和事件处理程序中共享 source 对象，则可以将其定义为全局变量或传递给相应的函数和事件处理程序。

总结

提示：这里对文章进行总结：

例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。