-
Notifications
You must be signed in to change notification settings - Fork 4
/
cropdemo.html
187 lines (144 loc) · 10.6 KB
/
cropdemo.html
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
---
title: Mosaico Cropper - a jQuery-UI based image crop widget
---
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<link rel="stylesheet" href="dist/jqueryui-mosaico-cropper.min.css" />
<script src="dist/jqueryui-mosaico-cropper.min.js"></script>
<script src="urladapters.js"></script>
<style>
.croppable-image:hover {
outline: 2px solid #ff5722;
}
@-webkit-keyframes pulse {
0% { opacity: 0.7; }
50% { opacity: 1; }
100% { opacity: 0.7; }
}
@keyframes pulse {
0% { opacity: 0.7; }
50% { opacity: 1; }
100% { opacity: 0.7; }
}
img.my-cropper-loading {
animation: pulse 1s infinite ease-in-out;
}
</style>
<script>
$(function() {
// quando clicco si inizializza
$('.croppable-image').on("click", function(e) {
$(e.target).mosaicoCropper({
imgLoadingClass: "my-cropper-loading",
/* urlPrefix: urlprefix */
/* urlPostfix: urlpostfix */
autoClose: !e.shiftKey,
autoZoom: !e.shiftKey,
shiftWheel: e.shiftKey,
containerSelector: 'body',
urlAdapter: automaticURLAdapter(e.target)
});
});
$('.cropthemall').on("click", function(e) {
$('.croppable-image').each(function(index, el) {
$(el).mosaicoCropper({
imgLoadingClass: "my-cropper-loading",
autoClose: false,
autoZoom: false,
shiftWheel: true,
containerSelector: 'body',
urlAdapter: automaticURLAdapter(el)
});
});
});
$('.closethemall').on("click", function(e) {
$('.croppable-image.my-cropper-loading').mosaicoCropper("destroy");
});
});
</script>
<h1>jQuery Mosaico Cropper Demo</h1>
<div>
<p>This demo works against multiple cloud image resizing demo services</p>
<p>Mosaico Cropper automatically detect already existing crop/resize transformations in the src image and find out the original image and the applied transformations.</p>
<p>When cropping is closed, Mosaico Cropper removes itself and updates the original image src url with the new one.</p>
<table border="0" cellpadding="5"><tr>
<td valign="top"><img class="croppable-image cloudinary" src="https://res.cloudinary.com/demo/image/upload/w_166,h_90,c_fill/balloons.jpg"></td>
<td valign="top"><img class="croppable-image cloudinary" src="https://res.cloudinary.com/demo/image/upload/w_330,h_213,c_scale/x_39,y_15,w_166,h_90,c_crop/sofa_cat.jpg"></td>
<td valign="top"><img class="croppable-image cloudinary" src="https://res.cloudinary.com/demo/image/upload/w_440,h_303,c_scale/x_65,y_66,w_166,h_90,c_crop/woman.jpg"></td>
<td valign="top"><img class="croppable-image cloudinary" src="https://res.cloudinary.com/idemo/image/upload/w_578,h_385,c_scale/x_200,y_100,w_166,h_92,c_crop/friends.jpg" width="166"></td>
</tr></table>
<p>Click on the image to start cropping using <code>autoClose</code> on focus out and <code>autoZoom</code> on resize</p>
<p>Shift-Click in the image to start cropping with NO <code>autoClose</code> and NO <code>autoZoom</code> and to enable <code>shiftWheel</code> (mousewheel only works when pressing shift)</p>
<h1>imagekit</h1>
<img class="croppable-image imagekit" src="https://ik.imagekit.io/demo/tr:w-472,h-638:w-200,h-310,cm-extract,x-127,y-256,fo-top_left/img/plant.jpeg">
<img class="croppable-image imagekit" src="https://ik.imagekit.io/demo/tr:w-200/medium_cafe_B1iTdD0C.jpg">
<h1>cloudimage</h1>
<img class="croppable-image cloudimage" src="https://demo.cloudimg.io/crop_px/2009,28,2500,316-300x176/n/sample.li/girls.jpg">
<img class="croppable-image cloudimage" src="https://demo.cloudimg.io/crop/300x100/n/https://jolipage.airstore.io/img.jpg">
<img class="croppable-image cloudimage" src="https://demo.cloudimg.io/width/300/n/https://jolipage.airstore.io/img.jpg">
<h1>gumlet</h1>
<img class="croppable-image gumlet" src="https://demo.gumlet.com/black-leaf.jpeg?width=200">
<img class="croppable-image gumlet" src="https://demo.gumlet.com/black-leaf.jpeg?mode=crop&width=300&height=100">
<img class="croppable-image gumlet" src="https://demo.gumlet.com/black-leaf.jpeg?extract=100,0,600,200&mode=crop&width=300&height=100">
<h1>sirv</h1>
<img class="croppable-image sirv" src="https://demo.sirv.com/bag.jpg?w=300">
<img class="croppable-image sirv" src="https://sirv-cdn.sirv.com/website/demos/Nikon_D750_24_120_front34l.jpg?w=300&h=200&scale.option=fill&cw=300&ch=200&cx=center&cy=center">
<img class="croppable-image sirv" src="https://sirv-cdn.sirv.com/website/demos/Nikon_D750_24_85_back34r.jpg?w=643&cx=303&cy=211&cw=300&ch=245">
<h1>cloudinary</h1>
<img class="croppable-image cloudinary" src="https://res.cloudinary.com/demo/image/upload/balloons.jpg" width="400">
<img class="croppable-image cloudinary" src="https://res.cloudinary.com/demo/image/upload/w_200/balloons.jpg">
<img class="croppable-image cloudinary" src="https://res.cloudinary.com/demo/image/upload/w_924,h_616,c_scale/x_22,y_183,w_200,h_285,c_crop/balloons.jpg">
<h1>uploadcare</h1>
<img class="croppable-image uploadcare" src="https://ucarecdn.com/c4b32a69-f817-48be-b918-7eb6718f7aca/-/resize/300x/">
<img class="croppable-image uploadcare" src="https://ucarecdn.com/c4b32a69-f817-48be-b918-7eb6718f7aca/-/scale_crop/300x100/">
<img class="croppable-image uploadcare" src="https://ucarecdn.com/c4b32a69-f817-48be-b918-7eb6718f7aca/-/resize/1210x/-/crop/300x200/737,202/">
<h1>filestack</h1>
<img class="croppable-image filestack" src="https://cdn.filestackcontent.com/resize=w:300/hOv6CUMRTErojO1feJUA">
<img class="croppable-image filestack" src="https://cdn.filestackcontent.com/resize=w:300,h:200,fit:crop/v8x4EUOKRS6OowxpkY8i">
<img class="croppable-image filestack" src="https://cdn.filestackcontent.com/crop=d:[600,200,300,300]/resize=w:200,h:200,fit:crop/hOv6CUMRTErojO1feJUA">
<h1>weserve.nl</h1>
<img class="croppable-image weservenl" src="https://images.weserv.nl/?url=ory.weserv.nl/zebra.jpg" width="300">
<img class="croppable-image weservenl" src="https://images.weserv.nl/?w=300&h=100&t=square&url=ory.weserv.nl/lichtenstein.jpg">
<img class="croppable-image weservenl" src="https://images.weserv.nl/?w=455&h=559&t=fitup&crop=300,300,19,0&url=ory.weserv.nl%2Flichtenstein.jpg">
<h1>thumbor(thumborize)</h1>
<img class="croppable-image thumbor" src="https://i2.wp.com/thumbor.thumborize.me/unsafe/300x/http://thumborize.me/static/img/beach.jpg">
<img class="croppable-image thumbor" src="https://i2.wp.com/thumbor.thumborize.me/unsafe/300x100/http://thumborize.me/static/img/beach.jpg">
<img class="croppable-image thumbor" src="https://i2.wp.com/thumbor.thumborize.me/unsafe/170x335:609x628/300x200/https://d19lgisewk9l6l.cloudfront.net/assetbank/Northern_Lights_at_Jokulsarlon_Glacier_Lagoon_Iceland_240127.jpg">
<h1>wnimageproxy(willnorris)</h1>
<img class="croppable-image wnimageproxy" src="https://willnorris.com/api/imageproxy/300x/https://willnorris.com/2013/12/small-things.jpg">
<img class="croppable-image wnimageproxy" src="https://willnorris.com/api/imageproxy/300x200/https://willnorris.com/2015/05/material-animations.gif">
<img class="croppable-image wnimageproxy" src="https://willnorris.com/api/imageproxy/cx437,cy76,cw1427,ch656,300x138/https://willnorris.com/2016/02/moon/moon.jpg">
<h1>imaginary(pimmr)</h1>
<img class="croppable-image imaginary" src="https://static.pimmr.me/resize?width=300&nocrop=true&url=https://s3.eu-central-1.amazonaws.com/sasapost/wp-content/uploads/33-1.jpeg">
<img class="croppable-image imaginary" src="https://static.pimmr.me/resize?width=300&height=100&url=https://s3.eu-central-1.amazonaws.com/sasapost/wp-content/uploads/GettyImages-74439287.jpg">
<img class="croppable-image imaginary" src="https://static.pimmr.me/extract?width=1255&height=706&left=924&top=506&areawidth=300&areaheight=200&url=https%3A%2F%2Fs3.eu-central-1.amazonaws.com%2Fsasapost-media%2Fwp-content%2Fuploads%2F20180630140808%2F31785956755_fdd21edec0_o.jpg">
<h1>imageflow(zzr)</h1>
<img class="croppable-image imageflow" src="https://z.zr.io/ri/zermatt.jpg;w=300">
<img class="croppable-image imageflow" src="https://z.zr.io/ri/zermatt.jpg;w=300;h=100;mode=crop;scale=both">
<img class="croppable-image imageflow" src="https://z.zr.io/ri/zermatt.jpg;crop=700,100,1300,700;w=300;h=300;mode=crop;scale=both">
<h1>cimage</h1>
<img class="croppable-image cimage" src="https://cimage.se/cimage/imgd.php?src=example/kodim13.png&w=300">
<img class="croppable-image cimage" src="https://cimage.se/cimage/imgd.php?src=example/kodim13.png&w=300&h=100&crop-to-fit">
<img class="croppable-image cimage" src="https://cimage.se/image/example/kodim04.png?crop=225,92,181,298&w=300">
<h1>glide(herokudemo)</h1>
<img class="croppable-image glide" src="https://glide.herokuapp.com/1.0/kayaks.jpg?w=300">
<img class="croppable-image glide" src="https://glide.herokuapp.com/1.0/kayaks.jpg?w=300&h=100&fit=crop">
<img class="croppable-image glide" src="https://glide.herokuapp.com/1.0/kayaks.jpg?crop=122,81,1750,1315&w=200&h=133&fit=crop">
<h1>free open proxies weservnl</h1>
<img class="croppable-image weservenl" src="https://d19lgisewk9l6l.cloudfront.net/assetbank/Northern_Lights_at_Jokulsarlon_Glacier_Lagoon_Iceland_240127.jpg" width="300">
<h1>demo open proxies cloudinaryp/cloudimage/thumbor</h1>
<img class="croppable-image cloudinaryp" src="https://d19lgisewk9l6l.cloudfront.net/assetbank/Northern_Lights_at_Jokulsarlon_Glacier_Lagoon_Iceland_240127.jpg" width="300">
<img class="croppable-image cloudimage" src="https://d19lgisewk9l6l.cloudfront.net/assetbank/Northern_Lights_at_Jokulsarlon_Glacier_Lagoon_Iceland_240127.jpg" width="300">
<img class="croppable-image thumbor" src="https://d19lgisewk9l6l.cloudfront.net/assetbank/Northern_Lights_at_Jokulsarlon_Glacier_Lagoon_Iceland_240127.jpg" width="300">
<h1>limited proxies wnimageproxy(willnorris)/imaginary(pimmr)</h1>
<!-- removed as they have some cookie/session protection resulting in errors
<img class="croppable-image gumlet" src="https://d19lgisewk9l6l.cloudfront.net/assetbank/Northern_Lights_at_Jokulsarlon_Glacier_Lagoon_Iceland_240127.jpg" width="300">
-->
<img class="croppable-image wnimageproxy" src="https://willnorris.com/2016/02/moon/moon.jpg" width="300">
<img class="croppable-image imaginary" src="https://s3.eu-central-1.amazonaws.com/sasapost/wp-content/uploads/GettyImages-74439287.jpg" width="300">
<hr />
<div class="cropthemall">crop them all (with no automatic close and shift-wheel</div>
<div class="closethemall">close them all</div>
</div>