print screen 후 웹페이지에 붙여넣기 하기

티스토리 뷰

컴터/html5

print screen 후 웹페이지에 붙여넣기 하기

우렁씨 2017. 11. 27. 17:56

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

* 프린트 스크린후 웹페이지에 붙여넣기

<?php

if($_REQUEST['mode']=='paste'){

if( isset( $_FILES['file'] ) ) {

$file_contents = file_get_contents( $_FILES['file']['tmp_name'] );

header("Content-Type: " . $_FILES['file']['type'] );

die($file_contents);

}

else {

header("HTTP/1.1 400 Bad Request");

}

<!DOCTYPE html>

<html>

<head>

<title>Paste Capture 'Image'</title>

<style>

.output{float:left;padding:10px;width:49%;height:300px;text-align:center;overflow:hidden;border:1px solid #ccc;background-color:#f5f5f5;}

.output::before{content:"[base64] 화면 캡쳐후 붙여넣기 해주세요.(Print Screen -> Ctrl+V)";display:inline-block;margin-top:5%;}

.output.paste{height:auto;}

.output.paste::before{display:none}

.output img{max-width:100%;}

#output2.output{float:right;}

#output2.output::before{content:"[blob] 화면 캡쳐후 붙여넣기 해주세요.(Print Screen -> Ctrl+V)"}

</style>

$(function(){

var $output=document.querySelector("#output")

,$output2=document.querySelector("#output2");

// base64 encode 되어 브라우저가 읽어 들임

// https://stackoverflow.com/questions/6333814/how-does-the-paste-image-from-clipboard-functionality-work-in-gmail-and-google-c

$output.onpaste = function(event){

var items = (event.clipboardData || event.originalEvent.clipboardData).items;

//console.log(JSON.stringify(items)); // will give you the mime types

for (index in items) {

var item = items[index];

if (item.kind === 'file') {

var blob = item.getAsFile();

var reader = new FileReader();

// data url!

reader.readAsDataURL(blob);

reader.onload = function(event){

$output.className="output paste";

var img=new Image();

img.src=event.target.result;

$output.appendChild(img);

};

}

// blob 타입 이미지로 서버에서 직접 읽어들임

// https://stackoverflow.com/questions/18055422/how-to-receive-php-image-data-over-copy-n-paste-javascript-with-xmlhttprequest

$output2.onpaste = function (e) {

var items = e.clipboardData.items;

var files = [];

for( var i = 0, len = items.length; i < len; ++i ) {

var item = items[i];

if( item.kind === "file" ) {

submitFileForm(item.getAsFile(), "paste");

}

};

function submitFileForm(file, type) {

var extension = file.type.match(/\/([a-z0-9]+)/i)[1].toLowerCase();

var formData = new FormData();

formData.append('file', file, "image_file");

formData.append('mode', 'paste' );

formData.append('extension', extension );

formData.append("mimetype", file.type );

formData.append('submission-type', type);

var xhr = new XMLHttpRequest();

xhr.responseType = "blob";

xhr.open('POST', '<?php echo basename(__FILE__); ?>');

xhr.onload = function () {

if (xhr.status == 200) {

$output2.className="output paste";

var img = new Image()

,url=(window.URL || window.webkitURL);

img.src = url.createObjectURL( xhr.response );

img.onload=function(e){

url.revokeObjectURL(this.src); // blob 메모리 해제

};

$output2.appendChild(img);

}

};

xhr.send(formData);

}

});

</script>

</head>

<body>

<h1>Paste Capture 'Image' <a href="http://nosmoke.tistory.com/2490" target="_blank" class="label label-info">설명</a></h1>

</div>

</body>

</html>

저작자표시 비영리 변경금지

'컴터 > html5' 카테고리의 다른 글

input type="file" 폴더 업로드 (webkitdirectory directory) (0)	2016.05.17
input type="number" 에서 소수점 입력하고 전송시 유효성검사 통과에 막힐때? (0)	2014.01.20
js canvas로 만든 간단한 bar 형태 챠트 (0)	2011.09.23
[html5] 안드로이드 브라우저에서 video 태그 사용하기 (2)	2010.09.10

공지사항

최근에 올라온 글

최근에 달린 댓글

Total: 1,770,491

Today: 3

Yesterday: 19

링크

TAG more

« 2023/06 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

글 보관함

2017/11 (2)
2016/05 (2)
2016/03 (1)
2014/10 (1)
2014/08 (2)

여유 or 방관

티스토리 뷰

print screen 후 웹페이지에 붙여넣기 하기

'컴터 > html5' 카테고리의 다른 글

티스토리툴바