ImageTransformWebGL/index.html at master · OriginalSin/ImageTransformWebGL · GitHub

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
<!DOCTYPE html>
<html>
<head>
	<title>Leaflet Image Transform Interactive Example</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
		integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
		crossorigin=""/>
	<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
		integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
		crossorigin=""></script>

    <script src="./src/m4.js" type="module"></script>
    <script src="./src/earcut.js"></script>
    <script src="./src/L.ImageTransformWebGL.js"></script>
    <style>
        html, body, #map {
            height: 100%;
            width: 100%;
            margin: 0px;
        }
		.outer-info {
			position: absolute;
			top: 19px;
			left: 0;
			right: 0;
			text-align: center
		}
		.info {
			padding: 6px 8px;
			font: 14px/18px Arial, Helvetica, sans-serif;
			background: rgba(255,255,255,0.8);
			color: #777;
			font-size: 1.1em;
			font-weight: bold;
		}
		.leaflet-image-layer {
			pointer-events: none;
}
    </style>

</head>
<body>
	<div id="map"></div>
	<script>
		var quickLooks = [
		{
			anchorsLatLngs: [[47.20627509437822, 37.60396957397461], [47.20802436605374, 37.73983955383301], [47.14804977458752, 37.73271560668945], [47.14495586297567, 37.59993553161621]],	// [lat, lng]
			clipGeoJSON: {
				type: 'MultiPolygon',
				coordinates: [
					[
						[[37.70122338120615,47.206343977765634],[37.59645260839524,47.191123009948875],[37.59605312758839,47.20628386519843],[37.70122338120615,47.206343977765634]]
					],
					[
						[[37.59706103733718,47.16803047231103],[37.64263320052125,47.15858258486256],[37.67685038901948,47.193445372693404],[37.71232674605145,47.2076359237855],[37.71241765555821,47.20763696123541],[37.73495503856385,47.203129477088574],[37.74011990228989,47.19150857168657],[37.72397969191706,47.16439308156757],[37.71042195832301,47.15858258486256],[37.69621860553427,47.15858258486256],[37.68136963355083,47.14696164006479],[37.68120748764205,47.14663734023848],[37.59765024233203,47.14566668950419],[37.59706103733718,47.16803047231103]]
						,
						[[37.6,47.16],[37.54,47.15],[37.62,47.155],[37.6,47.16]]
					]
				]
			},
			src: './examples/img/QuickLookImage1.jpg'
		},
		{
			anchorsLatLngs: [[56.344192, 136.59558], [56.344192, 137.8782], [55.613245, 137.8782], [55.613245, 136.59558]],
			clipGeoJSON: {
				type: "Polygon",
				coordinates: [
					[[136.90579, 56.301281],[137.83902, 56.150009],[137.53169, 55.639533],[136.60979, 55.788635]]
					// top-left, top-right, bottom-right, bottom-left
				]
			},
			src: './examples/img/image.jpg'
		}
		];
		var current = quickLooks[1];
		var map = new L.Map('map')
			.fitBounds(L.latLngBounds(current.anchorsLatLngs));

		var layersControl = L.control.layers({
			Google: L.tileLayer('//mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}').addTo(map),
		}, {}, {position: 'topleft'}).addTo(map);

		var imageTransform = L.imageTransformWebGL(current.src, current.anchorsLatLngs, { opacity: 0.5, clip: current.clipGeoJSON, disableSetClip: false })
			.addTo(map);
window.test = {
	imageTransform
};//	= imageTransform;
/*
		var drawClip;
		var drawAnchors = new L.GmxDrawing.Feature(map.gmxDrawing,
			L.polygon(current.anchorsLatLngs, {color: 'red'}),
			{editable: true, disableAddPoints: true, maxPoints: 4, type: 'Polygon', lineStyle: {color: 'blue'}, pointStyle: {shape: 'box'}}
		).on('edit', function() {
			imageTransform.setOpacity(0.5);
			imageTransform.setAnchors(L.geoJson(drawAnchors.toGeoJSON()).getLayers()[0].getLatLngs()[0]);
			if (drawClip && !imageTransform.options.disableSetClip) {
				var geo = imageTransform.getClip();
				drawClip.setGeoJSON(geo);
				// drawClip.setGeoJSON(imageTransform.getClip());
			}
		}).on('editstop', function() {
			imageTransform.setOpacity(1);
		});
*/
		var overlay = L.featureGroup([
			imageTransform,
			/*drawAnchors*/
		]).addTo(map);
		layersControl.addOverlay(overlay, 'imageTransform');
/*
		if (imageTransform.options.clip) {
			drawClip = new L.GmxDrawing.Feature(map.gmxDrawing, current.clipGeoJSON, {editable: true, type: current.clipGeoJSON.type, lineStyle: {color: 'red'}, pointStyle: {color: 'red'}})
				.on('edit', function() {
					var geo = drawClip.toGeoJSON().geometry;
					imageTransform.setClip(drawClip.toGeoJSON().geometry);
				});
			overlay.addLayer(drawClip);
		}*/
	</script>

    <a href="//github.com/OriginalSin/ImageTransformWebGL" target="_blank">
        <img style="position: absolute; top: 0; right: 0; border: 0;z-index: 500;" src="//camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png">
    </a>
	<div id="test"></div>
    <script typ="module" src="./src/filters.js"></script>
</body>
</html>