이 글에서는 주로 HTML5에서 이미지의 절대 경로를 파일 객체로 변환하는 방법을 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
이미지의 절대 경로를 base64 인코딩으로 변환하려면 이 글을 읽어주세요
먼저 기본 지식 포인트를 이해합시다:
1 HTML5의 FileList 개체와 파일 개체를 이해합니다.
HTML5에서 FileList 객체는 사용자가 선택한 파일 목록을 나타냅니다. multipe 속성을 추가하면 파일 제어 내에서 여러 파일을 한 번에 선택할 수 있습니다. 컨트롤에서 사용자가 선택한 각 파일은 파일 개체이고 FileList 개체는 파일 개체 목록입니다. 사용자가 선택한 모든 파일을 나타냅니다. 먼저 간단한 데모를 통해 파일 객체에 어떤 속성이 있는지 살펴보겠습니다. 다음 코드:
<!DOCTYPE html>
<html>
<head>
<title>filesystem:URL</title>
</head>
<body>
<p>
<label>选择：</label>
<input type='file' multiple id="file" />
<input type="button" value="文件上传" onClick="showFile()" />
</p>
<script>
function showFile() {
var files = document.getElementById('file').files; // 返回所有被选择的文件
for (var i = 0, ilen = files.length; i < ilen; i++) {
// 打印出单个文件对象的信息
console.log(files[i]);
/*
* 打印的信息如下：
File {
lastModified: 1457946612000
lastModifiedDate: Mon Mar 14 2016 17:10:12 GMT+0800 (CST) {}
name: "test.html"
size: 796
type: "text/html"
webkitRelativePath: ""
*/
/* 如果上传的是一张图片的话，会返回如下信息的
File {
lastModified: 1466907500000
lastModifiedDate: Sun Jun 26 2016 10:18:20 GMT+0800 (CST) {}
name: "a.jpg"
size: 23684
type: "image/jpeg"
webkitRelativePath: ""
}
*/
/*
因此 如果需要判断该上传的文件是不是图像文件的话，可以根据type类型来判断如下：
var file = files[i];
if (!/image\/\w+/.test(file.type)) {
console.log('该文件不是图像文件');
} else {
console.log('该文件是图像文件');
}
但是如果只让传图片的话，可以在image控件添加一个属性 accept="image/*" 即可；我们可以如下写代码：
<input type='file' multiple accept = 'image/gif,image/jpeg,image/jpg,image/png' />
*/
}
}
</script>
</body>
</html>2. Blob 개체 이해하기
핵심 사항: HTML5에서는 원래 바이너리 데이터를 나타내기 위해 새 Blob 개체가 추가됩니다. 실제로 파일 개체도 Blob 개체를 상속합니다. .
Blob 객체에는 두 가지 속성이 있습니다. size 속성은 Blob 객체의 바이트 길이를 나타내고, type 속성은 Blob의 MIME 유형을 나타냅니다.
다음 코드를 참조하세요:
<!DOCTYPE html>
<html>
<head>
<title>filesystem:URL</title>
</head>
<body>
<p>
<label>选择文件：</label>
<input type="file" id="file" />
<input type="button" value="显示文件信息" onClick="showFileType()" />
<p>文件字节长度: <span id="size"></span></p>
<p>文件类型：<span id="type"></span></p>
</p>
<script>
function showFileType() {
var file;
// 获取用户选择的第一个文件
file = document.getElementById('file').files[0];
var size = document.getElementById('size');
var type = document.getElementById('type');
// 显示文件字节的长度
size.innerHTML = file.size;
// 显示文件的类型
type.innerHTML = file.type;
// 打开控制台 查看返回的file对象
console.log(file);
}
</script>
</body>
</html>참고: Blob과 File은 동시에 사용할 수 있으며 FileReader를 사용하여 Blob에서 데이터를 읽을 수 있습니다.
다음은 Base64로 인코딩된 이미지로 변환된 절대 경로 이미지 주소이며, Base64로 인코딩된 이미지가 Blob 객체로 변환됩니다. 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>将以base64的图片url数据转换为Blob</title>
</head>
<body>
<script>
/**
* 将以base64的图片url数据转换为Blob
* @param urlData
* 用url方式表示的base64图片数据
*/
function convertBase64UrlToBlob(base64){
var urlData = base64.dataURL;
var type = base64.type;
var bytes = window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob( [ab] , {type : type});
}
/*
* 图片的绝对路径地址 转换成base64编码 如下代码：
*/
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
var dataURL = canvas.toDataURL("image/"+ext);
return {
dataURL: dataURL,
type: "image/"+ext
};
}
var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";
var image = new Image();
image.crossOrigin = '';
image.src = img;
image.onload = function(){
var base64 = getBase64Image(image);
console.log(base64);
/*
打印信息如下：
{
dataURL: "data:image/png;base64,xxx"
type: "image/jpg"
}
*/
var img2 = convertBase64UrlToBlob(base64);
console.log(img2);
/*
打印信息如下：
Blob {size: 9585, type: "image/jpg"}
*/
}
</script>
</body>
</html>참고: HTML5에서는 원래 바이너리 데이터를 나타내기 위해 새 Blob 개체가 추가되었습니다. 실제로 파일 개체도 Blob 개체를 상속합니다. 따라서 이미지의 절대 주소를 사용하여 이미지를 파일 객체로 변환할 수 있습니다.
그래서 사진의 절대 주소를 사용하여 파일 개체로 변환할 수 있습니다. 자세한 데모를 보려면 플러그인이 먼저 사진 업로드를 지원하다가 갑자기 이를 발견했습니다. 편집 페이지로 이동하면 기본 사진이 표시되어야 합니다. 기본적으로 이미지를 표시하면서 새 이미지를 업로드하거나 모든 이미지를 삭제할 수도 있습니다. 하지만 개발자가 이미지의 절대 주소만 제공했기 때문에 이미지의 절대 주소를 파일 객체로 변환하는 방법이 궁금합니다. 파일 객체로 변환하지 않으면 이 코드를 사용할 때 var reader = new FileReader(); 를 사용할 수 있습니다. 위에서 설명한 blob 개체를 먼저 blob 개체로 변환한 다음 파일 작업 개체 fileReader를 사용할 수 있습니다.
관련 권장 사항:
Javascript는 이미지의 절대 경로를 base64 인코딩으로 변환합니다.
HTML 상대 경로와 절대 경로의 차이점에 대한 자세한 분석
위 내용은 HTML5에서 이미지의 절대경로를 파일객체로 변환하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PMhtml5的div元素默认一行不可以放两个。div是一个块级元素，一个元素会独占一行，两个div默认无法在同一行显示；但可以通过给div元素添加“display：inline;”样式，将其转为行内元素，就可以实现多个div在同一行显示了。
html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PMhtml5中列表和表格的区别：1、表格主要是用于显示数据的，而列表主要是用于给数据进行布局；2、表格是使用table标签配合tr、td、th等标签进行定义的，列表是利用li标签配合ol、ul等标签进行定义的。
html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM固定方法：1、使用header标签定义文档头部内容，并添加“position:fixed;top:0;”样式让其固定不动；2、使用footer标签定义尾部内容，并添加“position: fixed;bottom: 0;”样式让其固定不动。
HTML5中画布标签是什么May 18, 2022 pm 04:55 PMHTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。
html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PMhtml5中不支持的标签有：1、acronym，用于定义首字母缩写，可用abbr替代；2、basefont，可利用css样式替代；3、applet，可用object替代；4、dir，定义目录列表，可用ul替代；5、big，定义大号文本等等。
html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PMhtml5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。
html5是什么意思Apr 26, 2021 pm 03:02 PMhtml5是指超文本标记语言（HTML）的第五次重大修改，即第5代HTML。HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。
Html5怎么取消td边框May 18, 2022 pm 06:57 PM3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
드림위버 CS6
시각적 웹 개발 도구
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
Eclipse용 SAP NetWeaver 서버 어댑터
Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
