|
|
|
|
@ -508,7 +508,7 @@ function serialize (formData) {
|
|
|
|
|
* </pre>
|
|
|
|
|
*/
|
|
|
|
|
function downloadImage(img, fileName) {
|
|
|
|
|
var imgData = atob(img.src.split(',')[1]),
|
|
|
|
|
var imgData = atob(img.split(',')[1]),
|
|
|
|
|
len = imgData.length,
|
|
|
|
|
buf = new ArrayBuffer(len),
|
|
|
|
|
view = new Uint8Array(buf),
|
|
|
|
|
@ -529,8 +529,8 @@ function downloadImage(img, fileName) {
|
|
|
|
|
//var url = URL.createObjectURL(blob);
|
|
|
|
|
var a = document.createElement('a');
|
|
|
|
|
a.style = 'display: none';
|
|
|
|
|
//a.href = url;
|
|
|
|
|
a.href = img.src;
|
|
|
|
|
a.href = URL.createObjectURL(blob);;
|
|
|
|
|
//a.href = img.src;
|
|
|
|
|
a.download = fileName;
|
|
|
|
|
document.body.appendChild(a);
|
|
|
|
|
a.click();
|
|
|
|
|
@ -541,3 +541,140 @@ function downloadImage(img, fileName) {
|
|
|
|
|
}, 100);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var readBlob = async () => {
|
|
|
|
|
const data = await fetch('https://play-lh.googleusercontent.com/hYdIazwJBlPhmN74Yz3m_jU9nA6t02U7ZARfKunt6dauUAB6O3nLHp0v5ypisNt9OJk');
|
|
|
|
|
const blob = await data.blob();
|
|
|
|
|
const reader = new FileReader();
|
|
|
|
|
reader.onload = () => {
|
|
|
|
|
const base64data = reader.result;
|
|
|
|
|
console.log(base64data)
|
|
|
|
|
}
|
|
|
|
|
reader.readAsDataURL(blob);
|
|
|
|
|
|
|
|
|
|
fetch('https://www.business2community.com/wp-content/uploads/2014/04/Free.jpg')
|
|
|
|
|
.then((response) => response.blob())
|
|
|
|
|
.then((blob) => {
|
|
|
|
|
const url = URL.createObjectURL(blob);
|
|
|
|
|
document.querySelector('img').src = url;
|
|
|
|
|
document.querySelector('a').href = url;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
*
|
|
|
|
|
* @param b64Data
|
|
|
|
|
* @param contentType
|
|
|
|
|
* @param sliceSize
|
|
|
|
|
* @returns {Blob}
|
|
|
|
|
*/
|
|
|
|
|
// bas64를 blob으로 변환해주는 함수
|
|
|
|
|
function b64toBlob(b64Data, contentType = '', sliceSize = 512) {
|
|
|
|
|
const image_data = atob(b64Data.split(',')[1]); // data:image/gif;base64 필요없으니 떼주고, base64 인코딩을 풀어준다
|
|
|
|
|
|
|
|
|
|
const arraybuffer = new ArrayBuffer(image_data.length);
|
|
|
|
|
const view = new Uint8Array(arraybuffer);
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < image_data.length; i++) {
|
|
|
|
|
view[i] = image_data.charCodeAt(i) & 0xff;
|
|
|
|
|
// charCodeAt() 메서드는 주어진 인덱스에 대한 UTF-16 코드를 나타내는 0부터 65535 사이의 정수를 반환
|
|
|
|
|
// 비트연산자 & 와 0xff(255) 값은 숫자를 양수로 표현하기 위한 설정
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return new Blob([arraybuffer], { type: contentType });
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
const contentType = 'image/png';
|
|
|
|
|
const b64Data =
|
|
|
|
|
'data:image/gif;base64,R0lGODlhAAEAAcQAALe9v9ve3/b393mDiJScoO3u74KMkMnNz4uUmKatsOTm552kqK+1uNLW18DFx3B7gP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTE5QjEwQjYyNTc4MkUxRURBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjEzN0VEMDZBQjMyNzExRTE4REMzRUZGMkFCOTM1NkZBIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjEzN0VEMDY5QjMyNzExRTE4REMzRUZGMkFCOTM1NkZBIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDI4MDExNzQwNzIwNjgxMTlCMTBCNjI1NzgyRTFFREEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MDExNzQwNzIwNjgxMTlCMTBCNjI1Nzgy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';
|
|
|
|
|
|
|
|
|
|
const blob = b64toBlob(b64Data, contentType); // base64 -> blob
|
|
|
|
|
const blobUrl = URL.createObjectURL(blob); // object url 생성
|
|
|
|
|
|
|
|
|
|
const img = document.createElement('img');
|
|
|
|
|
img.src = blobUrl;
|
|
|
|
|
document.body.appendChild(img);
|
|
|
|
|
*/
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 전달받은 이미지를 base64로 인코딩한다
|
|
|
|
|
* @param file - 이미지 파일 또는 이미지 URL
|
|
|
|
|
* @param maxWidth - 인코딩 시의 이미지 max width 사이즈
|
|
|
|
|
* @returns {Promise<any>}
|
|
|
|
|
*/
|
|
|
|
|
var readImage = () => {
|
|
|
|
|
let image = this.$refs.image.src
|
|
|
|
|
this.toBlob(image)
|
|
|
|
|
.then(res => {
|
|
|
|
|
console.log(res)
|
|
|
|
|
this.image = {
|
|
|
|
|
filename: res.name,
|
|
|
|
|
size: res.size,
|
|
|
|
|
type: res.type,
|
|
|
|
|
lastModified: res.lastModified
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 이미지 url을 blob 파일로 변환하여 전달한다
|
|
|
|
|
* @param url
|
|
|
|
|
* @returns {Promise<any>}
|
|
|
|
|
*/
|
|
|
|
|
var toBlob = (url) => {
|
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
|
this.base64Encode(url)
|
|
|
|
|
.then(res => {
|
|
|
|
|
let byteString = atob(res.dataUrl)
|
|
|
|
|
let ab = new ArrayBuffer(byteString.length)
|
|
|
|
|
let ia = new Uint8Array(ab)
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < byteString.length; i++) {
|
|
|
|
|
ia[i] = byteString.charCodeAt(i)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// write the array buffer to blob
|
|
|
|
|
let blob = new Blob([ab], {type: 'image/' + res.type})
|
|
|
|
|
|
|
|
|
|
let formData = new FormData()
|
|
|
|
|
formData.append('file', blob, res.name)
|
|
|
|
|
resolve(formData.get('file'))
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 전달받은 이미지를 base64로 인코딩한다
|
|
|
|
|
*/
|
|
|
|
|
var base64Encode = (url) => {
|
|
|
|
|
const re = new RegExp('.(gif|jpg|jpeg|tiff|png|ico)$', 'i')
|
|
|
|
|
let name = (/[^(/|\\)]*$/).exec(url)[0]
|
|
|
|
|
let type = re.test(name) ? re.exec(name)[0].replace('.', '') : 'jpg'
|
|
|
|
|
|
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
|
let image = new Image()
|
|
|
|
|
|
|
|
|
|
image.onload = function (event) {
|
|
|
|
|
let canvas = document.createElement('canvas')
|
|
|
|
|
// draw canvas
|
|
|
|
|
canvas.width = image.naturalWidth
|
|
|
|
|
canvas.height = image.naturalHeight
|
|
|
|
|
canvas.getContext('2d').drawImage(image, 0, 0)
|
|
|
|
|
|
|
|
|
|
let dataUrl = canvas.toDataURL('image/' + type)
|
|
|
|
|
resolve({
|
|
|
|
|
name: name,
|
|
|
|
|
type: type,
|
|
|
|
|
dataUrl: dataUrl.split(',')[1]
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
image.onerror = function () {
|
|
|
|
|
let msg = `"${file}"을 로딩하는 데 오류가 발생하였습니다. 이미지 파일을 확인해주세요.`
|
|
|
|
|
alert(msg)
|
|
|
|
|
console.error(msg)
|
|
|
|
|
}
|
|
|
|
|
image.crossOrigin = 'anonymous';
|
|
|
|
|
image.src = url
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
