프런트엔드 이미지 canvas,file,blob,DataURL 등 형식 변환

10714 단어

파일을 base64로 변환

  • 방법1: URL을 사용합니다.createObjectURL() 
    •  1 DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>basetitle>
 5 head>
 6 <body>
 7 <input type="file" name="" id="file">
 8 <img src="" id="img">
 9 <script type="text/javascript">
10     window.onload = function () {
11         let $img = document.getElementById('img')
12         file.onchange = function (e) {
13             console.log(e.target.files[0])
14             let file = e.target.files[0]
15             let fileUrl = window.URL.createObjectURL(file)
16             $img.src = fileUrl
17             img.onload = function () {
18                 //  
19                 URL.revokeObjectURL(fileUrl)
20             }
21         }
22     }
23 script>
24 body>
25 html>

    그림을 선택하면 생성된imgsrc와 유사"blob:null/4304d4f3-c13b-43e8-83f6-8c80426520ff"하여 그림을 정상적으로 표시할 수 있습니다.
  • 메서드2: FileReader를 사용합니다.readAsDataURL() 
    • DOCTYPE html>
<html>
<head>
    <title>basetitle>
head>
<body>
<input type="file" name="" id="file">
<img src="" id="img">
<script type="text/javascript">
    window.onload = function () {
        let $img = document.getElementById('img')
        file.onchange = function (e) {
            console.log(e.target.files[0])
            let file = e.target.files[0]
            const fr = new FileReader(file)
            fr.readAsDataURL(file)
            fr.onload = function () {
                 $img.src = this.result
            }
        }
    }
script>
body>
html>

    img 라벨의 src는 다음과 같습니다. "data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAA==, 정상적으로 표시할 수 있습니다.
     

    canvas에서 DataURL로 전환


     
    장면: 캔버스가 그린 그림은 html의 다른 곳에 표시됩니다.이 방법도 canvas를 Dataurl로 출력하여img 라벨에 넣을 수 있습니다.
      
    let imgSrc = canvas.toDataURL('image/png')
// canvas.toDataURL('image/jpeg')

    canvas가blob 대상으로 전환


     
    장면:canvas가 생성한 그림을 어떻게 칠우운이나 서버에 업로드합니까?정답은 canvas를 Blob 대상으로 출력하는 것입니다. 그러면 File 대상처럼 그것을 조작할 수 있습니다.
      
     canvas.toBlob(function (blobObj) {
    console.log(blobObj)
})
     canvas.toBlob name， quality 0~1

    Blob 객체 표시 이미지


     
    장면: 획득한 그림은 Blob 형식으로 html에 어떻게 표시됩니까?답은 Blob 객체를 DataUrl로 변환하는 것입니다.
      
    canvas.toBlob(function (blobObj) {
    let imgSrc = window.URL.createObjectURL(blobObj)
    document.getElementById('img').src = imgSrc
})

    DataURL로 표시된 이미지 다운로드


     
    장면: html에서 DataURL 형식으로 표시된 그림을 로컬로 다운로드할 수 있습니까?답은 a 탭을 사용하고 다운로드 속성을 설정하고 아날로그 클릭을 하는 것입니다.
    function downloadImg () {
    let aLink = document.createElement('a')
    aLink.download = 'fileName.png' //  dataurl ， 
    aLink.href = dataUrl
    aLink.click()
}

     
    다음으로 전송:https://www.cnblogs.com/xkloveme/p/10967852.html
    coffeeScript 학습 02
    입력 상자 검색 기능의 실현

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage