通过图片url 获取图片file对象

news/2025/2/22 0:02:47/
/*** 通过图片url 获取图片file对象* @param url* @param fileName 文件名称(一定要带后缀)* @param callback 回调函数* @returns {*}*/
function getImageFileFromUrl(url, fileName,callback) {var blob = null;var xhr = new XMLHttpRequest(); xhr.open("GET", url);xhr.setRequestHeader('Accept', 'image/jpeg');xhr.responseType = "blob";xhr.onload = () => {if (xhr.status == 200) {blob = xhr.response;let imgFile = new File([blob], fileName, {type: 'image/jpeg'});callback.call(this,imgFile);}};xhr.send();
}

demo:(用的图片url是百度上随便搜的)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head><body>
<img/>
</body><script>
function getImageFileFromUrl(url, imageName,callback) {// imageName一定要带上后缀var blob = null;var xhr = new XMLHttpRequest(); xhr.open("GET", url);xhr.setRequestHeader('Accept', 'image/jpeg');xhr.responseType = "blob";xhr.onload = () => {if (xhr.status == 200) {blob = xhr.response;let imgFile = new File([blob], imageName, {type: 'image/jpeg'});console.log(imgFile)callback.call(this,imgFile);}};xhr.send();
}$(function () {getImageFileFromUrl('https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4085579248,162891217&fm=15&gp=0.jpg','testFile.jpg',function(file){console.log(file)var r = new FileReader()r.readAsDataURL(file)r.onload = function (e) {var base64 = e.target.result;$("img").attr('src', base64);         }});})
</script></html>

http://www.ppmy.cn/news/788615.html

相关文章

js获取html中图片路径,用js快速的获取html页面中图片的地址

这次给大家带来用js快速的获取html页面中图片的地址&#xff0c;用js快速获取html页面中图片的地址的注意事项有哪些&#xff0c;下面就是实战案例&#xff0c;一起来看一下。 这篇文章主要介绍了js获取html代码中图片地址的实现代码,需要的朋友可以参考下 第一种方法&#xff…

js获取图片宽高等数据

一、根据图片链接url 来获取图片宽高 getImageSize(url) {return new Promise((resolve) > {var img document.createElement("img");img.src url;img.onload () > {// 为什么要写 onload 是因为要等他加载完之后才能获取到图片宽高resolve({width:img.na…

android 获取图片的真实地址

在开发中我们需要获取手机上的图片信息&#xff0c; 系统提供的有时候是一个可以访问展示的uri地址&#xff0c;但是当我们需要对图片进行一定的操作时比如 删除。这个时候去删除是无法操作的&#xff0c;因为系统提供的地址并不是对应图片在手机中的真实文件路径。所以需要对u…

Java获取及处理富文本图片地址

最近遇上了富文本图片与资源服务器不匹配的问题&#xff0c;百度了一些文章&#xff0c;总结的几个方法。 1、使用正则表达是获取图片地址后&#xff0c;重新组合富文本的内容 public static List<String> getImgStr(String htmlStr) {List<String> list new Ar…

获取图片地址的最后的图片名称

用正则表达式&#xff1a; var url http://www.baidu.com/path/a/b/c.png; var data url.match(/[^/](?!.*\/)/g); console.log(data); // ["c.png"]lastIndexOf&#xff1a; var url http://www.baidu.com/path/a/b/c.png; var format url .substr(url .last…

04 JS通过图片连接获取图片的尺寸大小

问题描述 项目中有这样一个需求&#xff0c;就是从后台返回了一个图片的链接&#xff0c;然后前端要将这个图片叠加到地图上。在实现这个需求的时候&#xff0c;需要获取到不同图片的尺寸大小&#xff0c;关于图片的尺寸大小后台是没有返回的&#xff0c;只有通过前端去获取&a…

小程序选择图片,获取图片临时地址

学习目标&#xff1a; 小程序选择图片&#xff0c;获取图片临时地址 学习内容&#xff1a; wx.chooseImage({count: 2, // 最多可以选择的图片数量&#xff0c;默认9sizeType: [original, compressed], // original原图&#xff0c;compressed 压缩图&#xff0c;默认皆有sour…

js获取html图片路径正则表达式,js获取图片的路径及文件名

假如网页中有一图片&#xff0c;那么如何得知该图片的路径及图片名称呢&#xff1f;请使用下面的JS代码来解决你的问题。 一、图片信息 var imgnew Image(); img.id"MyImg"; img.src"MyCamera.png"; 二、获取图片信息 ①获取图片的完整路径 alert(img.src)…