이미지 파일을 드래그 앤 드롭으로 브라우저 응용 프로그램으로 캡처하는 방법

이미지 파일을 드래그 앤 드롭으로 브라우저 응용 프로그램으로 캡처하는 방법을 살펴 보았습니다.

예를 들어, 다음과 같은 사진을 캘린더 형식으로 관리하는 응용 프로그램을 만들면 이미지 파일을 드래그 앤 드롭으로 표시할 수 있으면 편리할까 생각합니다.


JavaScript만을 사용한 간이한 구현 방법과 PHP를 사용한 깔끔한(정의) 구현 방법의 2 패턴을 씁니다.

1. JavaScript만으로 구현

calender.html

<table>
    <tr>
        <td id="box1">ボックス1</td>
        <td id="box2">ボックス2</td>
    </tr>
</table>

drag_drop.js

$(function () {
    $("td").on('dragover', function (e) {
        e.stopPropagation();
        e.preventDefault();
    });

    $("td").on('drop', function (e) {
        e.stopPropagation();
        e.preventDefault();

        var boxid = $(this).attr("id");
        var items  = e.originalEvent.dataTransfer.items;
        var file = items[0].getAsFile();
        var reader = new FileReader();
        reader.readAsDataURL(file);

        reader.onloadend = function() {
            $("#" + boxid).append("<img src=" + reader.result + " width=130>");
        };
    });
});

이 코드로 이미지를 브라우저에 표시할 수는 있지만 이미지를 저장할 수 없기 때문에 실용적으로는 의미가 거의 없습니다.

a 태그에 이미지를 삽입하고 a 태그의 Download 속성을 사용하여 다운로드 폴더에 저장하는 것도 시도했지만 사용하기 쉽지 않았습니다.

2.PHP를 사용하여 구현

calender.html

<table>
    <tr>
        <td id="box1"> ボックス1 <?php if ($box == "box1") { print("<img src=\"" . $data . "\" width=130>"); } ?></td>
        <td id="box2"> ボックス2 <?php if ($box == "box2") { print("<img src=\"" . $data . "\" width=130>"); } ?></td>
    </tr>
</table>

drag_drop.js

$(function () {
    $("td").on('dragover', function (e) {
        e.stopPropagation();
        e.preventDefault();
    });

    $("td").on('drop', function (e) {
        e.stopPropagation();
        e.preventDefault();

        var boxid = $(this).attr("id");
        var items  = e.originalEvent.dataTransfer.items;
        var file = items[0].getAsFile();
        var reader = new FileReader();
        reader.readAsDataURL(file);

        reader.onloadend = function() {
            $("#" + boxid).append("<form id=\"upload" + boxid + "\" action=\"calender.php\" method=\"POST\"></form>")
            $("#upload" + boxid).append("<input type=\"hidden\" name=\"day\" value=\"" + boxid + "\">");
            $("#upload" + boxid).append("<input type=\"hidden\" name=\"data\" value=\"" + reader.result + "\">");
            var form = $("#upload" + boxid);
            form.submit();
        };
    });
});

calender.php

function get_post_data($key) {
    $str = '';
    if (isset($_POST[$key]) === TRUE) {
        $str = $_POST[$key];
    }
    return $str;
}

$box = "";
$data = "";

if ($_SERVER['REQUEST_METHOD'] === "POST") {
    $box = get_post_data('box');
    $data = get_post_data('data');
}

include_once "calender.html";

이제 이미지를 브라우저에 표시할 수 있습니다.

그리고는 이미지 데이터의 DB에의 출납과 브라우저에의 묘화의 부분을 수정하면, 의도한 대로 화상 파일의 캡처를 드래그＆드롭으로 실현할 수 있습니다.