<!doctype html> <html lang="ja"> <head> <title>Adobe Photo Editor - TheDesk</title> <meta content="width=device-width,initial-scale=1.0" name="viewport"> <link href="./css/materialize.css" type="text/css" rel="stylesheet"> <link href="./css/themes.css" type="text/css" rel="stylesheet"> <link href="./css/master.css" type="text/css" rel="stylesheet"> <link href="./css/auth.css" type="text/css" rel="stylesheet"> <link href='./css/font-awesome.css' rel='stylesheet' type='text/css'> <link href='./css/tl.css' rel='stylesheet' type='text/css'> <link href='./css/userdata.css' rel='stylesheet' type='text/css'> <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans:300" rel="stylesheet"> <style> #cb-drag { margin-bottom: 8px; padding: 24px 0; text-align: center; } #cb-drag p { font-weight: bold; text-align: center; } #cb-file { cursor: pointer; } #cb-display { margin-bottom: 0; } #cb-display p { margin-top: 8px; margin-bottom: 0; line-height: 1.4; } .cb-div { padding: 16px; margin-bottom: 8px; } .cb-image { cursor: pointer; } </style> <meta charset="utf-8"> </head> <body id="mainView"> <script type="text/javascript" src="./js/common/jquery.js"></script> <script type="text/javascript" src="./js/platform/first.js"></script> <script type="text/javascript" src="./js/common/materialize.js"></script> <script type="text/javascript" src="./js/ui/tips.js"></script> <script type="text/javascript" src="./js/common/time.js"></script> <script type="text/javascript" src="./js/common/modal.js"></script> <div> <div id="cb-drag"> <p>ここに画像ファイルをドラッグし、画像をクリックしてください。</p> <input type="file" id="cb-file"> </div> <div id="cb-display"></div> </div> <script type="text/javascript" src="https://dme0ih8comzn4.cloudfront.net/imaging/v2/editor.js"></script> <script type="text/javascript"> var dragAndDrop = (function (window, document) { "use strict"; var drag = document.getElementById("mainView"); var disp = document.getElementById("cb-display"); var file = document.getElementById("cb-file"); function makeView(data) { var div, img, customEvent; var metaData = "<p>■ファイル名: <b>" + data.name + "</b><br>■容量: <b>" + data.size + "</b>バイト</p>"; div = document.createElement("div"); div.setAttribute("class", "cb-div"); img = document.createElement("img"); img.src = data.url; img.setAttribute("class", "cb-image"); img.style.maxWidth = "100%"; img.style.height = "auto"; div.appendChild(img); img.insertAdjacentHTML("afterend", metaData); disp.appendChild(div); customEvent = document.createEvent("HTMLEvents"); customEvent.initEvent("makeView", true, false); div.dispatchEvent(customEvent); } function readImage(e) { var f = (e.dataTransfer) ? e.dataTransfer.files : e.target.files; for (var i = 0, l = f.length; i < l; i++) { var reader = new FileReader(); reader.onload = (function (f) { var imageData = {}; return function (evt) { if (f.type === "image/gif" || f.type === "image/png" || f.type === "image/jpeg") { imageData.type = f.type; imageData.name = f.name; imageData.size = f.size; imageData.date = f.lastModifiedDate.toLocaleDateString(); imageData.url = evt.target.result; makeView(imageData); } else { return; } }; })(f[i]); reader.readAsDataURL(f[i]); } } function dragFiles() { drag.addEventListener("drop", function (e) { e.stopPropagation(); e.preventDefault(); readImage(e); }, false); drag.addEventListener("dragover", function (e) { e.stopPropagation(); e.preventDefault(); }, false); } function uploadFiles() { file.addEventListener("change", function(e) { readImage(e); }, false); } return { init: function () { dragFiles(); uploadFiles(); } }; })(this, this.document); var photoEditor = (function (window, document) { "use strict"; var featherEditor = new Aviary.Feather({ apiKey: "ffee425017ab44b18ce95dab98a5cdc1", onSave: function(imageID, newURL) { var img1 = document.getElementById(imageID); img1.src = newURL; var electron = require("electron"); var ipc = electron.ipcRenderer; ipc.send('bmp-image', [newURL,0]); window.close(); } }); function clearImage() { this.parentNode.style.display = "none"; } function launchEditor(id, src) { featherEditor.launch({ image: id, url: src }); return false; } function editPhoto() { //console.log(this); var id = this.getAttribute("id"); var src = this.getAttribute("src"); launchEditor(id, src); } function makeButton() { var button = document.createElement("button"); button.setAttribute("style", "width: 64px;" + " line-height: 24px;" + " background-color: #37474F;" + " color: #fff;" + " border: none;" + " cursor: pointer;" + " border-radius: 2px;" + " font-size: 14px;" + " position: absolute;" + " text-align: center;" + " top: 16px;" + " right: 8px;" + " padding: 0;" + " z-index: 1000;" ); button.innerHTML = "削除"; return button; } function listener() { var disp = document.getElementById("cb-display"); disp.addEventListener("makeView", function () { var image = document.querySelectorAll(".cb-image"); var button = []; for (var i = 0, l = image.length; i < l; i++) { button[i] = makeButton(); image[i].setAttribute("id", "cb-image_" + i); image[i].parentNode.style.position = "relative"; image[i].parentNode.appendChild(button[i]); button[i].addEventListener("click", clearImage, false); image[i].addEventListener("click", editPhoto, false); } }, false); } return { init: function () { listener(); } }; })(this, this.document); dragAndDrop.init(); photoEditor.init(); </script> <script type="text/javascript" src="./js/ui/theme.js"></script> <script type="text/javascript" src="./js/platform/end.js"></script> </body> </html>