다모앙 이미지 업로드 시 미리보기, 클립보드 붙여넣기, 드래그드랍 기능 확장 (Tampermonkey)
알림
|
페이지 정보
작성일
2024.08.12 17:38
본문
tampermonkey 스크립트이므로 해당 확장이 필요합니다.
: https://chromewebstore.google.com/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo
기능 소개:
1. 이미지 미리보기, 드래그드랍 영역을 추가합니다.
2. 이미지 선택 및 붙여넣기, 드래그드랍 시 미리보기를 표시합니다.
3. 드래그 시 테두리가 파랗게 변하며 드랍 하면 이미지가 자동으로 선택됩니다.
- 사이트 이미지를 그대로 드래그해도 동작하나 이 경우 새 창으로 이미지가 하나 더 뜨게 됩니다. (해결 중)
4. 클립보드에 이미지가 있을 경우 붙여넣기 하면 해당 이미지를 추가합니다. (GIF 미지원)
- 2번 설명 이미지 참조
- 해당 기능 동작을 위해서는 미리 보기 영역을 한번 클릭해야 합니다. (한번 클릭 후 Ctrl + V)
소스코드는 댓글에...
- 게시물이 없습니다.
LiNE님의 댓글
// @name 다모앙 이미지 클립보드 붙여넣기 및 드래그드롭, 미리보기 기능
// @namespace http://tampermonkey.net/
// @version 1.0
// @description damoang.net의 이미지 업로드 페이지에서 클립보드 붙여넣기 및 드래그드롭과 이미지 미리보기 기능을 생성합니다.
// @author LiNE
// @match *://*.damoang.net/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
const uploadForm = document.getElementById('na_upload_form');
const fileInput = document.getElementById('na_upload_file');
if (!uploadForm || !fileInput) {
return; // 폼이나 파일 입력 필드가 없으면 스크립트를 중단
}
// 미리보기 설명 텍스트 추가
const previewText = document.createElement('div');
previewText.className = 'form-text';
previewText.innerHTML = '<i class="bi bi-check2-circle"></i> 이미지 미리보기:';
uploadForm.appendChild(previewText);
// 미리보기 영역 추가 (배경색 포함)
const previewContainer = document.createElement('div');
previewContainer.id = 'clipboard-image-preview';
previewContainer.style.marginTop = '10px';
previewContainer.style.padding = '10px';
previewContainer.style.border = '1px solid #ddd';
previewContainer.style.backgroundColor = '#f9f9f9';
previewContainer.style.width = '100%';
previewContainer.style.height = '250px'; // 기본 높이를 250px로 설정
previewContainer.style.display = 'flex';
previewContainer.style.alignItems = 'center';
previewContainer.style.justifyContent = 'center';
previewContainer.style.color = '#ccc';
previewContainer.style.overflow = 'hidden'; // 스크롤바 표시를 위한 초기 설정
previewContainer.style.maxHeight = '80vh'; // 페이지의 80% 높이를 최대 높이로 설정
previewContainer.innerHTML = '여기에 이미지를 붙여넣기 (영역 클릭 후 Ctrl + V) 또는 드래그 앤 드롭하세요';
uploadForm.appendChild(previewContainer);
function displayImagePreview(blob) {
const img = document.createElement('img');
img.style.maxWidth = '100%'; // 좌우 여백을 확보하기 위해 이미지 폭을 줄임
img.style.height = 'auto'; // 이미지 높이를 자동 조정
const reader = new FileReader();
reader.onload = function(e) {
img.src = e.target.result;
previewContainer.innerHTML = ''; // 이전 텍스트를 지웁니다.
previewContainer.appendChild(img);
img.onload = function() {
const imgHeight = img.height;
const maxHeight = window.innerHeight * 0.8;
if (imgHeight > 250) {
// 이미지 높이가 250px을 초과하면 컨테이너 높이를 이미지에 맞춰 조정
previewContainer.style.height = imgHeight + 'px';
previewContainer.style.overflow = 'hidden';
} else {
// 이미지 높이가 250px 이하인 경우, 컨테이너 높이를 250px로 유지
previewContainer.style.height = '250px';
}
// 만약 이미지가 너무 커서 컨테이너 높이가 페이지의 80%를 초과하면 스크롤바 표시
if (imgHeight > maxHeight) {
previewContainer.style.height = maxHeight + 'px';
previewContainer.style.overflow = 'auto';
}
};
};
reader.readAsDataURL(blob);
}
// 클립보드에서 이미지 붙여넣기 이벤트
document.addEventListener('paste', function(event) {
const items = (event.clipboardData || event.originalEvent.clipboardData).items;
for (let index in items) {
const item = items[index];
if (item.kind === 'file' && item.type.indexOf('image') !== -1) {
const blob = item.getAsFile();
displayImagePreview(blob);
const dataTransfer = new DataTransfer();
dataTransfer.items.add(new File([blob], 'clipboard-image.' + blob.type.split('/')[1], { type: blob.type }));
fileInput.files = dataTransfer.files;
break; // 하나의 이미지만 처리하도록 중지
}
}
});
// 파일 선택 시 이미지 미리보기
fileInput.addEventListener('change', function(event) {
const file = event.target.files[0];
if (file && file.type.indexOf('image') !== -1) {
displayImagePreview(file);
}
});
// 드래그 앤 드롭으로 이미지 미리보기 제공
previewContainer.addEventListener('dragover', function(event) {
event.preventDefault(); // 기본 드래그 동작을 방지
previewContainer.style.border = '2px solid #007bff'; // 드래그 중 부드러운 파란색 실선으로 표시
previewContainer.style.backgroundColor = '#e9f7ff'; // 드래그 중 부드러운 배경색 추가
});
previewContainer.addEventListener('dragleave', function(event) {
previewContainer.style.border = '1px solid #ddd'; // 드래그 종료 시 원래 스타일로 복구
previewContainer.style.backgroundColor = '#f9f9f9'; // 드래그 종료 시 원래 배경색으로 복구
});
previewContainer.addEventListener('drop', function(event) {
event.preventDefault(); // 기본 드롭 동작을 방지
previewContainer.style.border = '1px solid #ddd'; // 드롭 시 원래 스타일로 복구
previewContainer.style.backgroundColor = '#f9f9f9'; // 드롭 시 원래 배경색으로 복구
const files = event.dataTransfer.files;
if (files.length > 0 && files[0].type.indexOf('image') !== -1) {
const file = files[0];
displayImagePreview(file);
const dataTransfer = new DataTransfer();
dataTransfer.items.add(new File([file], file.name, { type: file.type }));
fileInput.files = dataTransfer.files;
}
});
})();