<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>AIS Edit Tool</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <meta name="viewport" content="height=device-height"> <link rel="stylesheet" href="./css/drawingboard.css"> <style> .board { margin: 0 auto; } </style> <style> #ais-edit-tool { height: 90vh; /* For 90% screen height */ width: 90vw; /* For 90% screen width */ } </style> <style> .drawing-board-canvas-wrapper { border: 1px solid gray; } #overlay{ position:initial; display:block; width:100%; height:100%; z-index:30; } </style> </head> <body> <noscript>JavaScript is required :(</noscript> <div class="container"> <div> <div class="board" id="ais-edit-tool"> </div> </div> </div> <script src="./js/jquery.min.js"></script> <script src="./js/simple-undo.js"></script> <script src="./js/utils.js"></script> <script src="./js/drawingboard.js"></script> <script src="./js/controls/control.js"></script> <script src="./js/controls/color.js"></script> <script src="./js/controls/drawingmode.js"></script> <script src="./js/controls/navigation.js"></script> <script src="./js/controls/size.js"></script> <script src="./js/controls/download.js"></script> <script> var aisEditTool = new DrawingBoard.Board('ais-edit-tool', { controls: [ 'Color', { Size: { type: 'dropdown' } }, { DrawingMode: { filler: false } }, 'Download' ], color: '#ff0000', background: false, size: 3, webStorage: 'false', controlsPosition: 'center', enlargeYourContainer: true }); //Canvasのサイズを写真の横縦割合に合わせて変更 function resizeCanvasToRatio(ratio, maxHeight){ aisEditTool.resizeCanvasToRatio(ratio, maxHeight); } //CanvasのBackgroundをイメージファイルのurlに設定 function setBackground(url){ aisEditTool.setBackground(url); } //Canvasの修正可否を返す。 function isCanvasEdited(){ return aisEditTool.isCanvasEdited(); } //パスを取得してoverlayイメージをCanvasの中に入れる。(iOS) function createOverlayImageElement(imageSrc) { aisEditTool.createOverlayImageElement(imageSrc); } //接続しているクライアントがPCかmobileかをはんだんする function checkPC() { var filter = "win16|win32|win64|mac|macintel"; if ( navigator.platform ) { if ( filter.indexOf( navigator.platform.toLowerCase() ) < 0 ) { //mobile return false; } else { //pc return true; } } } //このペースのロード完了後でイメージをロードする document.addEventListener("DOMContentLoaded", function(event) { console.log('DOMContentLoaded'); if(checkPC()){ parent.loadDlgImage(); //call parent, parent call setBackground } }); </script> </body> </html>