Strength & Honor

Home MacBook Html CSS JavaScript Python etc. All Posts.

구글드라이브에 있는 이미지 파일을 웹사이트에 추가하기

구글드라이브에 이미지 파일을 저장 해 놓고 그 이미지 파일을 웹에서 링크를 하고자 할때에는 이미지 파일에서 우클릭을 통해 링크를 생성해서 붙여넣기 한다고 해서 웹에서 그 이미지 파일이 보여지는 것은 아니다.

즉 아래와 같이 이미지가 깨져 보인다.

git1

어떻게 하면 이미지를 보여줄 수 있을까 고민하던 차에 아래와 같은 웹사이트를 알게 되었다.
이곳에 링크를 복사하면 html 이미지 태그를 할 수 있게 생성 해 준다.






Preview image

image preview


아래는 위의 페이지에 대한 소스이다.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<html>
 
<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <style>
    #converter {
      padding: 20px 20px;
      border-radius: 5px;
      background-color: #f8f8f8;
      width: 100%;
      padding: 15px 15px;
    }
    #converter textarea {
      display: block;
      white-space: wrap;
      border: 1px solid #888;
      border-radius: 5px;
      margin-bottom: 10px;
      padding: 5px 5px;
      width: 100%;
      height: 60px;
    }
    #converter label {
      font-weight: bold;
      color: #333;
    }
    #converter button {
      font-weight: bold;
    }
    #btn-convert {
      width: 100%;
    }
    #convert-result {
      margin-top: 20px;
    }
  </style>
</head>
 
<body>
  <div id="converter">
    <label>Google Drive path</label>
    <textarea id="gd-url" placeholder="Input Google Drive Url"></textarea>
    <button id="btn-convert" class="btn btn-primary">Make Google Drive Path Linkable</button>
    <div id="convert-result">
      <label for="result">Linkable Image path</label>
      <textarea id="result" name="result" readonly></textarea>
      <button id="btn-save-result-cb" class="btn btn-success pull-right" data-clipboard-target="#result">
        <span class="glyphicon glyphicon-copy" aria-hidden="true"></span>
        Save to Clipboard
      </button>
      <br><br>
      <label for="result-img-tag">Image Tag</label>
      <textarea id="result-img-tag" name="result" readonly></textarea>
      <button id="btn-save-result-img-tag-cb" class="btn btn-success pull-right" data-clipboard-target="#result-img-tag">
        <span class="glyphicon glyphicon-copy" aria-hidden="true"></span>
        Save to Clipboard
      </button>
    </div>
    <br><br><br>
      <p align="center">
      <b>Preview image</b>
      </p>
    <p align="center">
      <img id="preview" alt="image preview" src='https://www.google.com/drive/static/images/drive/logo-drive.png' class="img-thumbnail" style="max-width: 200px"/><br>
    </p>
 
  </div>
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
  <script>
    var gdUrl = $("#gd-url");
    $("#btn-convert").on("click", function(event) {
 
      if (!isValidUrl(gdUrl.val())) {
        alert("You have inputted invalid path.");
        gdUrl.val("");
        return;
      }
 
      var gdId = extractFileId(gdUrl.val());
      var prefix = "http://drive.google.com/uc?export=view&id=";
      $("#result").val(prefix + gdId);
      $("#result-img-tag").val(
        "<img src='" +
        prefix + gdId +
        "' /><br>");
      $("#preview").attr("src", prefix + gdId);
    });
 
    var clipboard = new Clipboard('.btn');
 
    clipboard.on('success', function(e) {
      console.info('Action:', e.action);
      console.info('Text:', e.text);
      console.info('Trigger:', e.trigger);
 
      e.clearSelection();
    });
 
    clipboard.on('error', function(e) {
      console.error('Action:', e.action);
      console.error('Trigger:', e.trigger);
    });
 
    // validity check. ref: https://gist.github.com/jlong/2428561
    function isValidUrl(url) {
      // to be impl...
      var parser = document.createElement('a');
      parser.href = url;
 
      if(url === '' || parser.hostname !== "drive.google.com" || !parser.pathname.includes("/file/d/"))
        return false;
 
      return true;
    }
 
    function extractFileId(url) {
      if (!url) 
        url = window.location.href;
 
      var strip = url.replace(/https:\/\/drive.google.com\/file\/d\//gi, "")
      .replace(/\/view\?[a-zA-Z=\/]+/gi, "");
      
      return strip;
    }
  </script>
</body>
 
cs

위에서 컨버팅한 값을 html 에 붙여 넣으면 잘 보인다.
단, 크롬에서만 보여지고 사파리에서 실행 해 보니 보이질 않는다.
좀 더 찾아봐야겠다.

금일 다시 새로운 것을 발견했다.
분명 로컬에서는 이미지가 깨지는데 호스트에 올리니 이미지가 아래와 같이 잘 보인다.

그동안 깃허브의 작은 용량 때문에 걱정을 했었는데 이제 당분간 용량 걱정없게 되었다.



Categories


CSS

Wizzen2801

One Day, One New!
Avatar