そのまま表示

<html><head><meta http-equiv="content-type" charset="utf-8"></head>
<body>
    課題：画面に表示されている解像度で保存される、オリジナル解像度で保存したい<br>
    <div id="dragDropArea" style="border:dashed;height:100%;" class="dragover">
        ここに画像をドロップするとファイルを保存<br>
        <span id="previewArea"><img src="" id="previewImage"></span>
    </div>

    <script language="JavaScript">

        var fileArea = document.getElementById('dragDropArea');

        fileArea.addEventListener('dragover',function(evt){
            evt.preventDefault();
            fileArea.classList.add('dragover');
        });

        fileArea.addEventListener('dragleave',function(evt){
            evt.preventDefault();
            fileArea.classList.remove('dragover');
        });

        fileArea.addEventListener('drop',function(evt){
            evt.preventDefault();
            fileArea.classList.remove('dragenter');
            var files = evt.dataTransfer.files;
            document.getElementById('fileInput').files = files;
            photoPreview('onChenge',files[0]);
        });

        function photoPreview(event, f = null) {
            
            var file = f;

            if(file === null){
                file = event.target.files[0];
            }

            var reader = new FileReader();
            var preview = document.getElementById("previewArea");
            var previewImage = document.getElementById("previewImage");

            if(previewImage != null) {
                preview.removeChild(previewImage);
            }
            
            reader.onload = function(event) {
                var img = document.createElement("img");
                img.setAttribute("src", reader.result);
                img.setAttribute("id", "previewImage");
                preview.appendChild(img);
            };

            reader.readAsDataURL(file);
        }

        fileArea.addEventListener('drop', function(evt) {
            evt.preventDefault();
            fileArea.classList.remove('dragover');
            var files = evt.dataTransfer.files;
            generateFile(files[0]);
            photoPreview('onChenge', files[0]);
        });

        function generateFile(file) {
            var reader = new FileReader();

            reader.onload = function(event) {
                var content = event.target.result;

                var imageType = '';
                switch (file.type) {
                    case 'image/jpeg':
                        imageType = 'jpg';
                        break;
                    case 'image/png':
                        imageType = 'png';
                        break;
                    case 'image/gif':
                        imageType = 'gif';
                        break;
                    default:
                        imageType = 'txt'; // デフォルトの拡張子を設定する
                        break;
                }

                var now = new Date();
                var timestamp = now.toISOString().replace(/:/g, '-'); // コロンを置換してファイル名に使えるようにする

                var newFile = new Blob([content], { type: file.type });
                var fileName = 'generated_file_' + timestamp + '.' + imageType;

                var link = document.createElement('a');
                link.href = window.URL.createObjectURL(newFile);
                link.download = fileName;
                link.click();
            };

            reader.readAsArrayBuffer(file);
        }

    </script>

</body></html>
＜＜　広告　＞＞