13. 자바스크립트 (JavaScript) - blob 이미지 처리
Blob
Binary Large Object의 약자입니다. 이름에서 바이너리 형태로 큰 객체(이미지)를 저장, 데이터베이스에도 존재함
이 외에도 CBlob 도 존재한다
결과
3번째는 URL.createObjectURL 을 사용해서 할당한 예이며 이 예제에서 이 URL은 revoke 되었기 때문에 이미지 다운로드는 작동하지 않는다. 이와 달리 1번째와 2번째는 다운로드가 가능하다
소스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
let canvas = document.createElement('canvas')
// document.body.appendChild(canvas)
// canvas 태그 삽입
document.body.children[1].appendChild(canvas)
let height = 200
let width = 200
canvas.width = width
canvas.height = height
let context = canvas.getContext('2d')
context.strokeStyle = '#ff0000'
context.beginPath()
context.arc(width / 2, height / 2, width / 2 - width / 10, 0, Math.PI * 2)
context.stroke()
// [FileReader] img src 에 blob 처리
canvas.toBlob(blob => {
let reader = new FileReader()
reader.onload = () => {
document.getElementById('myImg').src = reader.result
}
reader.readAsDataURL(blob)
})
canvas.toBlob(blob => {
let blobUrl = URL.createObjectURL(blob)
let imgTag = document.getElementById('myImg2')
imgTag.src = blobUrl
imgTag.onload = function () {
// clean
URL.revokeObjectURL(this.src)
};
})
}
</script>
</head>
<body>
<p style="border: 1px solid blue">
<img id="myImg" src="" alt="">
</p>
<p style="border: 1px solid green">
</p>
<p style="border: 1px solid orange">
<img id="myImg2" src="" alt="">
</p>
</body>
</html>
참고
http://www.jongminjang.com/html5/file/2018/12/27/blob-as-img-src.html
일상을 추억으로
plsql golang nodejs asp.net 개발자의 블로그
www.jongminjang.com
https://heropy.blog/2019/02/28/blob/
Blob(블랍) 이해하기
JavaScript에서 Blob(Binary Large Object, 블랍)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용할 수 있습니다. 대개 데이터의 크기(Byte) 및 MIME 타입을 알아내거나, 데이터를 송수신
heropy.blog
스택오버 플로우
기타 파일에 관련된 처리
'06. Javascript > 기초' 카테고리의 다른 글
| ??. 자바스크립트 클로즈의 개념 (0) | 2021.07.07 |
|---|---|
| 14. 자바스크립트 (JavaScript) - IE 의 keypress 와 Chrome, Edge 의 keypress 차이점 (0) | 2021.07.02 |
| 12. 자바스크립트 (JavaScript) - 축약 (0) | 2021.06.10 |
| 11. 자바스크립트 (JavaScript) - 2개이상의 obj 합치기 ( Object.assign ) (0) | 2021.06.09 |
| 08. 자바스크립트 (JavaScript) - Console (0) | 2020.09.23 |