当前位置：首页 > news >正文

JavaScript将url转为blob和file，三种方法

news 2025/10/16 8:54:13

预览地址

https://code.juejin.cn/pen/7561304070028279818

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div style="margin: 20px 0"><input type="text" placeholder="请输入URL" style="width: 600px" /></div><button class="button1">xhr请求</button><button class="button2">fetch请求</button><button class="button3">img请求</button></body><script>let btn1 = document.querySelector(".button1");let btn2 = document.querySelector(".button2");let btn3 = document.querySelector(".button3");btn1.onclick = function () {let url = document.querySelector("input").value;url += "?" + new Date().getTime();urlToFile(url);};btn2.onclick = function () {let url = document.querySelector("input").value;url += "?" + new Date().getTime();fetchUrlToFile(url);};// 添加btn3的点击事件处理btn3.onclick = function () {let url = document.querySelector("input").value;url += "?" + new Date().getTime();imgUrlToFile(url);};// 通过xhrfunction urlToFile(url) {// 创建XMLHttpRequest对象const xhr = new XMLHttpRequest();// 配置请求xhr.open("GET", url, true);xhr.responseType = "blob"; // 指定响应类型为blob// 处理请求完成xhr.onload = function () {if (xhr.status === 200 && xhr.readyState === 4) {const blob = xhr.response;// 从URL中提取文件名const fileName = url.split("/").pop() || "image.jpg";// 创建文件对象const file = new File([blob], fileName, {type: "image/" + url.split(".").pop(),});console.log(file);}};// 发送请求xhr.send();}// 通过fetchfunction fetchUrlToFile(url) {fetch(url).then((response) => response.blob()).then((blob) => {// 从URL中提取文件名const fileName = url.split("/").pop() || "image.jpg";// 创建文件对象const file = new File([blob], fileName, {type: "image/" + url.split(".").pop(),});console.log(file);});}// 通过img标签function imgUrlToFile(url) {const img = new Image();img.crossOrigin = "Anonymous"; // 处理跨域问题// 开始加载图片img.src = url;img.onload = function () {// 创建canvas元素const canvas = document.createElement("canvas");canvas.width = img.width;canvas.height = img.height;// 获取2D上下文并绘制图片const ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0);// 将canvas转换为blobcanvas.toBlob(function (blob) {// 从URL中提取文件名const fileName = url.split("/").pop() || "image.jpg";// 创建文件对象const file = new File([blob], fileName, {type: "image/" + (url.split(".").pop() || "jpg"),});console.log(file);}, "image/" + (url.split(".").pop() || "jpg"));};}</script>
</html>