js图片url反转file文件

场景

由于项目需求，需要将图片 url 转成文件格式上传到服务器

参考博客：图片url转file

封装js

transferFile.js

function setInitImg(url,callback){let img = url;//这里是淘宝上随便找的一张图片let _ = thislet imgResgetBase64(img, (dataURL) => {imgRes = dataURLtoFile(dataURL,img);console.log(imgRes)callback(imgRes)});
}function getBase64(url, callback) {//通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染var Img = new Image(),dataURL = "";Img.src = url + "?v=" + Math.random(); // 处理缓存,fix缓存bug,有缓存，浏览器会报错;Img.setAttribute("crossOrigin", "Anonymous"); // 解决控制台跨域报错的问题Img.onload = function () {//要先确保图片完整获取到，这是个异步事件var canvas = document.createElement("canvas"), //创建canvas元素width = Img.width, //确保canvas的尺寸和图片一样height = Img.height;canvas.width = width;canvas.height = height;canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //将图片绘制到canvas中dataURL = canvas.toDataURL("image/jpeg"); //转换图片为dataURLcallback ? callback(dataURL) : null; //调用回调函数};
}function dataURLtoFile(dataurl, filename) {//将base64转换为文件，dataurl为base64字符串，filename为文件名（必须带后缀名，如.jpg,.png）var arr = dataurl.split(","),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, { type: mime });
}export {setInitImg
}

调用方式

import {setInitImg} from './transferFile'
setInitImg('https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',(file)=>{this.fileList.push(file)})

看一下转成的文件

js图片url反转file文件相关推荐

Java 将网络图片URL 转为file文件
Java 将网络图片URL 转为file文件;某个需求要求将图片一起导出,图片只有地址,这里将图片先转为file,然后导出excel 代码示例 /*** 将图片转为file** @param url ...
关于这些年做的图片上传下载做的处理总结（including根据图片url上传文件）
下载文档我们查柜的认知是后端给前端传一个链接地址,将地址放在a标签上,点击链接下载文件. 可有时候往往不是这样的,后端给前端返回了一个文档流,这就需要我们自己转换为Blob格式的数据,再使用这个数据 ...
前端将base64图片转换成file文件
1.base64转成file具体代码 // base64图片转file的方法(base64图片, 设置生成file的文件名)function base64ToFile(base64, fileName ...
js 获取input type=file 文件，并且上传
html页面: <input type="file" class="inputPic" allowexts="gif,jpeg,jpg,png, ...
js通过URL下载服务器文件（可行方法）
本文讲述已知文件在服务器的地址,如何下载至本地其他博客分享的一般是这两种 1.通过window.open window.open('https://1.1.1.1/test.txt') 2.通过ge ...
前端FileReader对象实现图片file文件转base64
1.file转base64具体代码 // 图片file转base64方法(file文件,回调函数)fileToBase64(file, callback) {// 创建FileReader对象(不兼容 ...
js：图片url转base64编码
思路: 将图片url转为Image对象将Image对象绘制到Canvas上将Canvas对象转为Base64 实现代码 // Image对象转base64 function imageToBase ...
js图片大小压缩到指定范围
文章目录 1. compressUtil.js 2. 使用方法 1. compressUtil.js /*** 图片压缩类* @param minSize* @param maxSize* @cons ...
通过文件url地址获取base64；通过图片url地址获取base64；js获取文件的base64
本篇是通过url地址获取文件的base64 如果想要通过File文件获取base64查看这篇以下代码可直接复制使用!注意第9行的图片地址更改下 <template><div cla ...
js 获取图片url的Blob值并预览
js 获取图片url的Blob值并预览 1)使用 XMLHttpRequest 对象获取图片url的Blob值参考:https://www.cnblogs.com/tujia/p/6483255.h ...

js图片url反转file文件

场景

封装js

调用方式

看一下转成的文件

js图片url反转file文件相关推荐

最新文章

热门文章