<!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>