Googleドライブイメージチェーンコンバータ
Googleドライブをイメージ・リンクに変換して、イメージ・サーバとして使用するときに共有するツールです.
使用方法はコンバータの下部にあります.
使用方法はコンバータの下部にあります.
へんかんき
<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> </html>使用方法
Googleドライブにファイルをアップロードし、画像を右クリック->共有 リンクされたすべてのユーザーに変更 作成したリンクのコピー リンクをConverter Google Drive pathに入力 変換後のリンクリンクリンクリンク画像パス画像ラベル画像ラベルを貼り付けると完了します!Reference
この問題について(Googleドライブイメージチェーンコンバータ), 我々は、より多くの情報をここで見つけました https://velog.io/@afashs/구글드라이브-image-link-converterテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol