直播app源码，js图片下载方式集合

一、文件流格式下载

创建 a 标签下载文件流格式图片

<br>/**<br> * 创建 <a> 标签下载文件流格式图片<br> * @param file <br> * @param fileName <br> */<br>export const downloadFile = (file: string, fileName?: string) => {<br>  const blob = new Blob([file]);<br>  const fileReader = new FileReader();<br>  fileReader.readAsDataURL(blob);<br>  fileReader.onload = (e) => {<br>    const a = document.createElement("a");<br>    a.download = fileName || '0123456.PNG';<br>    a.href = e.target?.result as string;<br>    document.body.appendChild(a);<br>    a.click();<br>    document.body.removeChild(a);<br>  };<br>}

文件流格式还可以转为Base64格式之后，再以链接格式下载

转换方式如下

<br>export const downloadFileUrl = (file: Blob) => {<br>  const blob = new Blob([file]);<br>  const fileReader = new FileReader();<br>  fileReader.readAsDataURL(blob);<br>  fileReader.onload = (e) => {<br>    const url = e.target?.result as string;<br>    downloadImage(`data:image/png;Base64,${url}`, 'testefd')<br>  };<br>}

二、链接格式下载

/**<br> * 根据图片路径下载<br> * @param imgsrc 图片路径<br> * @param name 下载图片名称<br> * @param type 格式图片，可选，默认png ，可选 png/jpeg<br> */<br>export const downloadImage = (imgsrc: string, name: string, type: string = 'png') => {<br>  let image = new Image();<br>  // 解决跨域 Canvas 污染问题<br>  image.setAttribute("crossOrigin", "anonymous");<br>  image.onload = function () {<br>    let canvas = document.createElement("canvas");<br>    canvas.width = image.width;<br>    canvas.height = image.height;<br>    let context = canvas.getContext("2d");<br>    context?.drawImage(image, 0, 0, image.width, image.height);<br>    let url = canvas.toDataURL(`image/${type}`); //得到图片的base64编码数据<br>    let a = document.createElement("a"); // 生成一个a元素<br>    let event = new MouseEvent("click"); // 创建一个单击事件<br>    a.download = name || "pic"; // 设置图片名称<br>    a.href = url; // 将生成的URL设置为a.href属性<br>    a.dispatchEvent(event); // 触发a的单击事件<br>  }<br>  //将资源链接赋值过去，才能触发image.onload 事件<br>  image.src = imgsrc<br>}

以上就是直播app源码，js图片下载方式集合，更多内容欢迎关注之后的文章