Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Сохранение изображения на клиент

Здравствуйте, не могли бы вы помочь с моей проблемкой?... Дело в том, что я делаю простенькую игрушку в стиле "перетащи-и-брось" /по видео уроку/. И я не знаю как реализовать сохранение полученного изображения на компьютер к клиенту. Я совершенный ноль в этой области, но сделать надо. Все что нашла и тут и в гугле, мне не помогло, моего ума не хватает, увы. Буду благодарна за любую помощь

Тут, то что есть из кода
Код ActionScript 3
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
import flash.display.MovieClip;
import flash.events.MouseEvent;
    
    public class main extends MovieClip 
    {
        
        public function main():void
        {
        dog.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);  
        }
        private function mouseDownHandler(event:MouseEvent):void
        {
            var dragObject:MovieClip = event.currentTarget as MovieClip;
            dragObject.startDrag(false);
            setChildIndex(dragObject, numChildren-1);
            dragObject.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
        }
        
        private function mouseUpHandler(event:MouseEvent):void
        {
            var dragObject:MovieClip = event.currentTarget as MovieClip;    
            dragObject.stopDrag();
            dragObject.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
        }
        
    }
Ответ: Нужен класс PgnEncoder();

Добавлено через 6 минут
Реалезуется
Код Code
1
var myPNG:ByteArray = PNGEncoder.encode(myBitmapData);
Вопрос: Плагин для сохранения изображения с галереи

Ищу плагин который добавит кнопку "Сохранить" под изображением при просмотре галереи или фото в полном размере.
Ответ: Chezzy, в lightbox есть такая кнопка
Вопрос: Large Blob на стороне клиента

Здравствуйте, прошу подсказать, кто знает.

Есть WebSocket, по нему в JS получаю файл в base64. Подскажите, как его можно правильно преобразовать в большой файл (blob) на стороне клиента. С небольшими файлами проблем не возникает, но при больших файлах (> 20 МБ) браузер крешится при конверте Base64 в Blob.

Возможно можно как-то собрать файл по частям, не нагружая сильно оперативу. Может быть можно аппендить несколько Blob (не нашел как)

Как вариант для хранения сконвертированного файла рассматривал сохранение в IndexedDb.

Если коротко, то нужно получить большой файл по вебсокету (формат Base64), преобразовать на стороне клиента в файл (Blob) и отдать пользователю.

Буду рад любым советам или ссылкам.
Спасибо!

Добавлено через 22 часа 56 минут
Что, никто не сталкивался с подобными задачими?
Ответ: На счет подставления в src знаю, просто проблема именно при большом файле - строка слишком длинная и если даже как-то получится ее запихнуть в переменную на страницу, то при подставлении в src браузер крэшиться, так как не может обработать такой объем файла. Причем, файлы не только изображение, он и бинарные. При этом все конечно же нагружает оперативную память.
Вопрос: Как сохранять изображения в localStorage?

Подскажите где ошибка в коде ? Я пытаюсь сохранить изображение з гугл по урл в локальное хранилище, потом достать из хранилища изображение и вставить в DOM.

Вот мой код :
<canvas  id='example'></canvas>
<img id="imageId" src="" >



function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("http://shrek.by/Photo/Shrek.jpg");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}




var image = document.getElementById('imageId');
var b64image = getBase64Image(image);
localStorage.setItem('imageIdCached', b64image);



Вот весь код:
Ответ:
Сообщение от Валерий1996
А если так

И получается так? И не получится. Чтобы задать размер канве, нужно дождаться окончания загрузки изображения. Задание атрибута crossOrigin изображению разрешит загрузить его в канву, а вот при получении его эта ошибка возникать будет, хотя и данные будут возвращены. Чтобы не надоедало, можно обернуть в try ... catch.

function getImg(im) {
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');
        
    canvas.width = im.width;
    canvas.height = im.height;
        
    try {
        ctx.drawImage(im, 0, 0);
        //base64 to localStorage
        var imageData = canvas.toDataURL();
        console.log(imageData);
    } catch (e) {}
}


<img id="imageId" crossOrigin="*" src="https://unsplash.it/300/200/?random" onload="getImg(this)"/>


Одно ли изображение, а значит и элементов сохранения, я не в курсе, как и о применении самого скрипта. Пример простой, разберетесь сами чего вам надо.

PS. toDataURL("image/png") - это лишено смысла, так как по умолчанию тип возвращаемого изображения и будет png, задание типа имеет смысл, если нужно вернуть в jpeg формате.

PPS. crossOrigin - заголовок, который передается сервером, и равен либо конкретному домену, либо всем (*). У изображения же можно написать просто crossOrigin и все. А если говорить о локальном приложение, то тогда либо VBS, либо если под win, можно HTA-приложение, и никаких ограничений не будет.
Вопрос: Как сохранить картинку из <img> на компьютер клиента?

Здравствуйте, есть тег
<img id="code">
, в атрибут
SRC=""
, c помощью BASE64, автоматически генерируется изображение. Как сохранить эту картинку программно на компьютер пользователя?
Делаю так:
$('#save_but').click(function() {
var img = document.getElementById('bar');
img.src =$('#bar').attr('src');
window.location.href = img.src.replace('image/png', 'image/octet-stream');
});

Но сохраняется файл без имени и формата, который, конечно же, можно переименовать в img.png и он откроется. Но пользователь, ясно понятно, этого делать не будет.
Как можно сохранить файл хотябы с указанием формата?
Ответ: есть и менее радикальные средства -

говнокод сохранения -
function saveImage(img,fn){
 var c = document.createElement('canvas');
 c.width = img.naturalWidth;
 c.height= img.naturalHeight;
 var ctx=c.getContext("2d");
 ctx.drawImage(img,0,0);
 c.toBlob(function(blob) {  saveAs(blob, fn);});
}
Вопрос: Запись выбора изображений и отправка ссылки на почту

Всем привет! Есть такая задача: на страничке находится 100 изображений(скрытых), при клике на кнопку из них рандомно выбирается 6 изображений и показывается пользователю. Можно ли как то записать эти 6 выбранных рандомно изображений и отправить пользователю на почту ссылку, что бы он мог позднее перейти на эту страничку и увидеть эти 6 изображений? Спасибо
Ответ: Alekseyideas,
нет никакого рандома у клиента и 100 карт, на сервере формируется уникальная ссылка с показом 6 карт и всё, клиент жмёт кнопу-рандом показываются карты и ссылка. потом по ссылке этиже карты с другим css(открыты изначально и нет кнопы)
Вопрос: Не работает кнопка сохранения настроек в палагине Dokan Multivendor

Здравствуйте, уважаемые форумчане.
Есть сайт на wordpress и установленный на ней плагин мультивендор - Dokan.
На странице настроек продавца, где он может к примеру изменить свой пароль, информацию о себе имеется клавиша "update settings", которая по идее должна сохранять настройки после нажатия, но она этого не делает. То есть ничего не происходит, и даже не выходит никаких сообщений об ошибках.
Следовательно есть несовместимость плагина с шаблоном. Не могу разобраться, как прикрутить правильно функцию с темы шаблона сайта, чтобы она заработала.
Шаблон, установленный на сайте: "Marketo".
Я так понимаю нужно класс, отвечающий за сохранение нужно взять с темы и заменить его в плагине? Простите, если глупость сейчас написал...
Это часть из плагина, файл store-form.php, кажется здесь нужно прописать нужные значения
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
  <?php do_action( 'dokan_settings_form_bottom', $current_user, $profile_info ); ?>
 
        <div class="dokan-form-group">
 
            <div class="dokan-w4 ajax_prev dokan-text-left" style="margin-left:24%;">
                <input type="submit" name="dokan_update_store_settings" class="dokan-btn dokan-btn-danger dokan-btn-theme" value="<?php esc_attr_e( 'Update Settings', 'dokan-lite' ); ?>">
            </div>
        </div>
    </form>
 
    <?php do_action( 'dokan_settings_after_form', $current_user, $profile_info ); ?>
На всякий случай прикрепил к вопросу архив с сами плагином, и с темой.
Помогите пожалуйста, я уже 4 день копаюсь)
Ответ: Попробуй сравнить, только не перекидывай все, у меня некоторые поля скрыты
PHP
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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
<?php
/**
 * Dokan Dashboard Settings Store Form Template
 *
 * @since 2.4
 */
?>
<?php
 
    $gravatar       = isset( $profile_info['gravatar'] ) ? absint( $profile_info['gravatar'] ) : 0;
    $banner         = isset( $profile_info['banner'] ) ? absint( $profile_info['banner'] ) : 0;
    $storename      = isset( $profile_info['store_name'] ) ? esc_attr( $profile_info['store_name'] ) : '';
    $store_ppp      = isset( $profile_info['store_ppp'] ) ? esc_attr( $profile_info['store_ppp'] ) : '';
    $phone          = isset( $profile_info['phone'] ) ? esc_attr( $profile_info['phone'] ) : '';
    $show_email     = isset( $profile_info['show_email'] ) ? esc_attr( $profile_info['show_email'] ) : 'no';
    $show_more_ptab = isset( $profile_info['show_more_ptab'] ) ? esc_attr( $profile_info['show_more_ptab'] ) : 'yes';
 
    $address         = isset( $profile_info['address'] ) ? $profile_info['address'] : '';
    $address_street1 = isset( $profile_info['address']['street_1'] ) ? $profile_info['address']['street_1'] : '';
    $address_street2 = isset( $profile_info['address']['street_2'] ) ? $profile_info['address']['street_2'] : '';
    $address_city    = isset( $profile_info['address']['city'] ) ? $profile_info['address']['city'] : '';
    $address_zip     = isset( $profile_info['address']['zip'] ) ? $profile_info['address']['zip'] : '';
    $address_country = isset( $profile_info['address']['country'] ) ? $profile_info['address']['country'] : '';
    $address_state   = isset( $profile_info['address']['state'] ) ? $profile_info['address']['state'] : '';
 
    $map_location   = isset( $profile_info['location'] ) ? esc_attr( $profile_info['location'] ) : '';
    $map_address    = isset( $profile_info['find_address'] ) ? esc_attr( $profile_info['find_address'] ) : '';
    $dokan_category = isset( $profile_info['dokan_category'] ) ? $profile_info['dokan_category'] : '';
    $enable_tnc     = isset( $profile_info['enable_tnc'] ) ? $profile_info['enable_tnc'] : '';
    $store_tnc      = isset( $profile_info['store_tnc'] ) ? $profile_info['store_tnc'] : '' ;
 
    if ( is_wp_error( $validate ) ) {
        $storename    = $_POST['dokan_store_name']; // WPCS: CSRF ok, Input var ok.
        $map_location = $_POST['location'];         // WPCS: CSRF ok, Input var ok.
        $map_address  = $_POST['find_address'];     // WPCS: CSRF ok, Input var ok.
        
        $posted_address = wc_clean( $_POST['dokan_address'] ); // WPCS: CSRF ok, Input var ok.
        
        $address_street1 = $posted_address['street_1'];
        $address_street2 = $posted_address['street_2'];
        $address_city    = $posted_address['city'];
        $address_zip     = $posted_address['zip'];
        $address_country = $posted_address['country'];
        $address_state   = $posted_address['state'];
    }
 
    $dokan_appearance = dokan_get_option( 'store_header_template', 'dokan_appearance', 'default' );
 
?>
<?php do_action( 'dokan_settings_before_form', $current_user, $profile_info ); ?>
 
    <form method="post" id="store-form"  action="" class="dokan-form-horizontal">
 
        <?php wp_nonce_field( 'dokan_store_settings_nonce' ); ?>
 
            <div class="dokan-banner">
 
                <div class="image-wrap<?php echo $banner ? '' : ' dokan-hide'; ?>">
                    <?php $banner_url = $banner ? wp_get_attachment_url( $banner ) : ''; ?>
                    <input type="hidden" class="dokan-file-field" value="<?php echo $banner; ?>" name="dokan_banner">
                    <img class="dokan-banner-img" src="<?php echo esc_url( $banner_url ); ?>">
 
                    <a class="close dokan-remove-banner-image">&times;</a>
                </div>
 
                <div class="button-area<?php echo $banner ? ' dokan-hide' : ''; ?>">
                    <i class="fa fa-cloud-upload"></i>
<p>Большой баннер (фото мастерской, изображение логотипа/бренда компании</p>
                    <a href="#" class="dokan-banner-drag dokan-btn dokan-btn-info dokan-theme"><?php _e( 'Upload banner', 'dokan-lite' ); ?></a>
                    <p class="help-block">
                        <?php
                        /**
                         * Filter `dokan_banner_upload_help`
                         *
                         * @since 2.4.10
                         */
                        $general_settings = get_option( 'dokan_general', [] );
                        $banner_width = ! empty( $general_settings['store_banner_width'] ) ? $general_settings['store_banner_width'] : 625;
                        $banner_height = ! empty( $general_settings['store_banner_height'] ) ? $general_settings['store_banner_height'] : 300;
 
                        $help_text = sprintf(
                            __('Upload a banner for your store. Banner size is (%sx%s) pixels.', 'dokan-lite' ),
                            $banner_width, $banner_height
                        );
 
                        echo apply_filters( 'dokan_banner_upload_help', $help_text );
                        ?>
                    </p>
                </div>
            </div> <!-- .dokan-banner -->
 
            <?php do_action( 'dokan_settings_after_banner', $current_user, $profile_info ); ?>
 
        <div class="dokan-form-group">
            <label class="dokan-w3 dokan-control-label" for="dokan_gravatar"><?php _e( 'Изображение профиля/фото мастера', 'dokan-lite' ); ?></label>
 
            <div class="dokan-w5 dokan-gravatar">
                <div class="dokan-left gravatar-wrap<?php echo $gravatar ? '' : ' dokan-hide'; ?>">
                    <?php $gravatar_url = $gravatar ? wp_get_attachment_url( $gravatar ) : ''; ?>
                    <input type="hidden" class="dokan-file-field" value="<?php echo $gravatar; ?>" name="dokan_gravatar">
                    <img class="dokan-gravatar-img" src="<?php echo esc_url( $gravatar_url ); ?>">
                    <a class="dokan-close dokan-remove-gravatar-image">&times;</a>
                </div>
                <div class="gravatar-button-area<?php echo $gravatar ? ' dokan-hide' : ''; ?>">
                    <a href="#" class="dokan-pro-gravatar-drag dokan-btn dokan-btn-default"><i class="fa fa-cloud-upload"></i> <?php _e( 'Upload Photo', 'dokan-lite' ); ?></a>
                </div>
            </div>
        </div>
 
        <div class="dokan-form-group">
            <label class="dokan-w3 dokan-control-label" for="dokan_store_name"><?php _e( 'Store Name', 'dokan-lite' ); ?></label>
 
            <div class="dokan-w5 dokan-text-left">
                <input id="dokan_store_name" required value="<?php echo $storename; ?>" name="dokan_store_name" placeholder="<?php _e( 'store name', 'dokan-lite'); ?>" class="dokan-form-control" type="text">
            </div>
        </div>
 
        <div class="dokan-form-group">
            <label class="dokan-w3 dokan-control-label" for="dokan_store_ppp"><?php _e( 'Store Product Per Page', 'dokan-lite' ); ?></label>
 
            <div class="dokan-w5 dokan-text-left">
                <input id="dokan_store_ppp" value="<?php echo $store_ppp; ?>" name="dokan_store_ppp" placeholder="10" class="dokan-form-control" type="number">
            </div>
        </div>
         <!--address-->
 
        <?php
        $verified = false;
 
        if ( isset( $profile_info['dokan_verification']['info']['store_address']['v_status'] ) ) {
            if ( $profile_info['dokan_verification']['info']['store_address']['v_status'] == 'approved' ){
                $verified = true;
            }
        }
 
        dokan_seller_address_fields( $verified );
 
        ?>
        <!--address-->
 
        <div class="dokan-form-group">
            <label class="dokan-w3 dokan-control-label" for="setting_phone"><?php _e( 'Phone No', 'dokan-lite' ); ?></label>
            <div class="dokan-w5 dokan-text-left">
                <input id="setting_phone" value="<?php echo $phone; ?>" name="setting_phone" placeholder="<?php _e( '+123456..', 'dokan-lite' ); ?>" class="dokan-form-control input-md" type="text">
            </div>
        </div><p style="font-size:10px">Номер телефона необходим для быстрой связи с вами в случаи необходимости</p>
<!--
        <div class="dokan-form-group">
            <label class="dokan-w3 dokan-control-label"><?php _e( 'Email', 'dokan-lite' ); ?></label>
            <div class="dokan-w5 dokan-text-left">
                <div class="checkbox">
                    <label>
                        <input type="hidden" name="setting_show_email" value="no">
                        <input type="checkbox" name="setting_show_email" value="yes"<?php checked( $show_email, 'yes' ); ?>> <?php _e( 'Show email address in store', 'dokan-lite' ); ?>
                    </label>
                </div>
            </div>
        </div>
 
        <div class="dokan-form-group">
            <label class="dokan-w3 dokan-control-label"><?php _e( 'More product', 'dokan-lite' ); ?></label>
            <div class="dokan-w5 dokan-text-left">
                <div class="checkbox">
                    <label>
                        <input type="hidden" name="setting_show_more_ptab" value="no">
                        <input type="checkbox" name="setting_show_more_ptab" value="yes"<?php checked( $show_more_ptab, 'yes' ); ?>> <?php _e( 'Enable tab on product single page view', 'dokan-lite' ); ?>
                    </label>
                </div>
            </div>
        </div>
 
 
        <div class="dokan-form-group">
            <label class="dokan-w3 dokan-control-label" for="setting_map"><?php _e( 'Map', 'dokan-lite' ); ?></label>
 
            <div class="dokan-w6 dokan-text-left">
                <input id="dokan-map-lat" type="hidden" name="location" value="<?php echo $map_location; ?>" size="30" />
 
                <div class="dokan-map-wrap">
                    <div class="dokan-map-search-bar">
                        <input id="dokan-map-add" type="text" class="dokan-map-search" value="<?php echo $map_address; ?>" name="find_address" placeholder="<?php _e( 'Type an address to find', 'dokan-lite' ); ?>" size="30" />
                        <a href="#" class="dokan-map-find-btn" id="dokan-location-find-btn" type="button"><?php _e( 'Find Address', 'dokan-lite' ); ?></a>
                    </div>
 
                    <div class="dokan-google-map" id="dokan-map"></div>
                </div>
            </div> <!-- col.md-4 -->
        </div> <!-- .dokan-form-group -->
 
        <!--terms and conditions enable or not -->
<!--        <?php
        $tnc_enable = dokan_get_option( 'seller_enable_terms_and_conditions', 'dokan_general', 'off' );
        if ( $tnc_enable == 'on' ) :
            ?>
            <div class="dokan-form-group">
                <label class="dokan-w3 dokan-control-label"><?php _e( 'Terms and Conditions', 'dokan-lite' ); ?></label>
                <div class="dokan-w5 dokan-text-left dokan_tock_check">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="dokan_store_tnc_enable" value="on" <?php echo $enable_tnc == 'on' ? 'checked':'' ; ?> name="dokan_store_tnc_enable" ><?php _e( 'Show terms and conditions in store page', 'dokan-lite' ); ?>
                        </label>
                    </div>
                </div>
            </div>
            <div class="dokan-form-group" id="dokan_tnc_text">
                <label class="dokan-w3 dokan-control-label" for="dokan_store_tnc"><?php _e( 'TOC Details', 'dokan-lite' ); ?></label>
                <div class="dokan-w8 dokan-text-left">
                    <?php
                        $settings = array(
                            'editor_height' => 200,
                            'media_buttons' => false,
                            'teeny'         => true,
                            'quicktags'     => false
                        );
                        wp_editor( $store_tnc, 'dokan_store_tnc', $settings );
                    ?>
                </div>
            </div>
-->
        <?php endif;?>
 
 
        <?php do_action( 'dokan_settings_form_bottom', $current_user, $profile_info ); ?>
 
        <div class="dokan-form-group">
 
            <div class="dokan-w4 ajax_prev dokan-text-left" style="margin-left:24%;">
                <input type="submit" name="dokan_update_store_settings" class="dokan-btn dokan-btn-danger dokan-btn-theme" value="<?php esc_attr_e( 'Update Settings', 'dokan-lite' ); ?>">
            </div>
        </div>
    </form>
 
    <?php do_action( 'dokan_settings_after_form', $current_user, $profile_info ); ?>
 
<style>
    .dokan-settings-content .dokan-settings-area .dokan-banner {
        width: <?php echo $banner_width . 'px'; ?>;
        height: <?php echo $banner_height . 'px'; ?>;
    }
 
    .dokan-settings-content .dokan-settings-area .dokan-banner .dokan-remove-banner-image {
        height: <?php echo $banner_height . 'px'; ?>;
    }
</style>
<script type="text/javascript">
 
    (function($) {
        var dokan_address_wrapper = $( '.dokan-address-fields' );
        var dokan_address_select = {
            init: function () {
 
                dokan_address_wrapper.on( 'change', 'select.country_to_state', this.state_select );
            },
            state_select: function () {
                var states_json = wc_country_select_params.countries.replace( /&quot;/g, '"' ),
                    states = $.parseJSON( states_json ),
                    $statebox = $( '#dokan_address_state' ),
                    input_name = $statebox.attr( 'name' ),
                    input_id = $statebox.attr( 'id' ),
                    input_class = $statebox.attr( 'class' ),
                    value = $statebox.val(),
                    selected_state = '<?php echo $address_state; ?>',
                    input_selected_state = '<?php echo $address_state; ?>',
                    country = $( this ).val();
 
                if ( states[ country ] ) {
 
                    if ( $.isEmptyObject( states[ country ] ) ) {
 
                        $( 'div#dokan-states-box' ).slideUp( 2 );
                        if ( $statebox.is( 'select' ) ) {
                            $( 'select#dokan_address_state' ).replaceWith( '<input type="text" class="' + input_class + '" name="' + input_name + '" id="' + input_id + '" required />' );
                        }
 
                        $( '#dokan_address_state' ).val( 'N/A' );
 
                    } else {
                        input_selected_state = '';
 
                        var options = '',
                            state = states[ country ];
 
                        for ( var index in state ) {
                            if ( state.hasOwnProperty( index ) ) {
                                if ( selected_state ) {
                                    if ( selected_state == index ) {
                                        var selected_value = 'selected="selected"';
                                    } else {
                                        var selected_value = '';
                                    }
                                }
                                options = options + '<option value="' + index + '"' + selected_value + '>' + state[ index ] + '</option>';
                            }
                        }
 
                        if ( $statebox.is( 'select' ) ) {
                            $( 'select#dokan_address_state' ).html( '<option value="">' + wc_country_select_params.i18n_select_state_text + '</option>' + options );
                        }
                        if ( $statebox.is( 'input' ) ) {
                            $( 'input#dokan_address_state' ).replaceWith( '<select type="text" class="' + input_class + '" name="' + input_name + '" id="' + input_id + '" required ></select>' );
                            $( 'select#dokan_address_state' ).html( '<option value="">' + wc_country_select_params.i18n_select_state_text + '</option>' + options );
                        }
                        $( '#dokan_address_state' ).removeClass( 'dokan-hide' );
                        $( 'div#dokan-states-box' ).slideDown();
 
                    }
                } else {
 
 
                    if ( $statebox.is( 'select' ) ) {
                        input_selected_state = '';
                        $( 'select#dokan_address_state' ).replaceWith( '<input type="text" class="' + input_class + '" name="' + input_name + '" id="' + input_id + '" required="required"/>' );
                    }
                    $( '#dokan_address_state' ).val(input_selected_state);
 
                    if ( $( '#dokan_address_state' ).val() == 'N/A' ){
                        $( '#dokan_address_state' ).val('');
                    }
                    $( '#dokan_address_state' ).removeClass( 'dokan-hide' );
                    $( 'div#dokan-states-box' ).slideDown();
                }
            }
        }
 
        $(function() {
            dokan_address_select.init();
 
            $('#setting_phone').keydown(function(e) {
                // Allow: backspace, delete, tab, escape, enter and .
                if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 91, 107, 109, 110, 187, 189, 190]) !== -1 ||
                     // Allow: Ctrl+A
                    (e.keyCode == 65 && e.ctrlKey === true) ||
                     // Allow: home, end, left, right
                    (e.keyCode >= 35 && e.keyCode <= 39)) {
                         // let it happen, don't do anything
                    return;
                }
 
                // Ensure that it is a number and stop the keypress
                if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                    e.preventDefault();
                }
            });
            <?php
            $locations = explode( ',', $map_location );
            $def_lat = isset( $locations[0] ) ? $locations[0] : 90.40714300000002;
            $def_long = isset( $locations[1] ) ? $locations[1] : 23.709921;
            ?>
            var def_zoomval = 12;
            var def_longval = '<?php echo $def_long; ?>';
            var def_latval = '<?php echo $def_lat; ?>';
 
            try {
                var curpoint = new google.maps.LatLng(def_latval, def_longval),
                    geocoder   = new window.google.maps.Geocoder(),
                    $map_area = $('#dokan-map'),
                    $input_area = $( '#dokan-map-lat' ),
                    $input_add = $( '#dokan-map-add' ),
                    $find_btn = $( '#dokan-location-find-btn' );
 
                $find_btn.on('click', function(e) {
                    e.preventDefault();
 
                    geocodeAddress( $input_add.val() );
                });
 
                var gmap = new google.maps.Map( $map_area[0], {
                    center: curpoint,
                    zoom: def_zoomval,
                    mapTypeId: window.google.maps.MapTypeId.ROADMAP
                });
 
                var marker = new window.google.maps.Marker({
                    position: curpoint,
                    map: gmap,
                    draggable: true
                });
 
                window.google.maps.event.addListener( gmap, 'click', function ( event ) {
                    marker.setPosition( event.latLng );
                    updatePositionInput( event.latLng );
                } );
 
                window.google.maps.event.addListener( marker, 'drag', function ( event ) {
                    updatePositionInput(event.latLng );
                } );
 
            } catch( e ) {
                console.log( 'Google API not found.' );
            }
 
            autoCompleteAddress();
 
            function updatePositionInput( latLng ) {
                $input_area.val( latLng.lat() + ',' + latLng.lng() );
            }
 
            function updatePositionMarker() {
                var coord = $input_area.val(),
                    pos, zoom;
 
                if ( coord ) {
                    pos = coord.split( ',' );
                    marker.setPosition( new window.google.maps.LatLng( pos[0], pos[1] ) );
 
                    zoom = pos.length > 2 ? parseInt( pos[2], 10 ) : 12;
 
                    gmap.setCenter( marker.position );
                    gmap.setZoom( zoom );
                }
            }
 
            function geocodeAddress( address ) {
                geocoder.geocode( {'address': address}, function ( results, status ) {
                    if ( status == window.google.maps.GeocoderStatus.OK ) {
                        updatePositionInput( results[0].geometry.location );
                        marker.setPosition( results[0].geometry.location );
                        gmap.setCenter( marker.position );
                        gmap.setZoom( 15 );
                    }
                } );
            }
 
            function autoCompleteAddress(){
                if (!$input_add) return null;
 
                $input_add.autocomplete({
                    source: function(request, response) {
                        // TODO: add 'region' option, to help bias geocoder.
                        geocoder.geocode( {'address': request.term }, function(results, status) {
                            response(jQuery.map(results, function(item) {
                                return {
                                    label     : item.formatted_address,
                                    value     : item.formatted_address,
                                    latitude  : item.geometry.location.lat(),
                                    longitude : item.geometry.location.lng()
                                };
                            }));
                        });
                    },
                    select: function(event, ui) {
 
                        $input_area.val(ui.item.latitude + ',' + ui.item.longitude );
 
                        var location = new window.google.maps.LatLng(ui.item.latitude, ui.item.longitude);
 
                        gmap.setCenter(location);
                        // Drop the Marker
                        setTimeout( function(){
                            marker.setValues({
                                position    : location,
                                animation   : window.google.maps.Animation.DROP
                            });
                        }, 1500);
                    }
                });
            }
 
        });
    })(jQuery);
</script>
Вопрос: Подмена IP клиента

Здравствуйте!

Так случилось, что мой IP, похоже, забанили на одном хостинге изображений. Сервер перестал давать ответы, а с анонимайзеров работает отлично.

Это мешает тем, что я не могу смотреть превьюшки картинок расположенных на этом хостинге с любого сайта.
У меня есть расширение, которое позволяет выполнять свой JS код на страницах сайтов.

И вот вопрос на который я не нашел ответа в учебниках - возможно ли с помощью JS перед тем, как браузер начнет запрашивать изображения с <img src="ссылка"> подменить отправляемую информацию о себе, что бы обойти блокировку?

ps: анонимайзеры в данном случае помогают, но я хотел бы решить проблему без них
Ответ:
Сообщение от tenRabbits
Подмена IP клиента
Здравствуйте!

Так случилось, что мой IP, похоже, забанили на одном хостинге изображений. Сервер перестал давать ответы, а с анонимайзеров работает отлично.

Это мешает тем, что я не могу смотреть превьюшки картинок расположенных на этом хостинге с любого сайта.
У меня есть расширение, которое позволяет выполнять свой JS код на страницах сайтов.

И вот вопрос на который я не нашел ответа в учебниках - возможно ли с помощью JS перед тем, как браузер начнет запрашивать изображения с <img src="ссылка"> подменить отправляемую информацию о себе, что бы обойти блокировку?

ps: анонимайзеры в данном случае помогают, но я хотел бы решить проблему без них
на сетевом уровне две точки сети соединяются между собой с использованием ip-like протоколов, если тебя забанили по ip, а ip не выделенный, то ты и тот, кому ещё когда-нибудь перепадёт этот ip, не смогут получить нужный доступ к ресурсам того сервера, только через прокси, который имеет другой ip
Вопрос: Ajax. Как сделать загрузку изображений, отображение, удаление как на Авито

Привет всем,хочу сделать загрузку изображений на сайт, сразу их просмотр и возможность удаления некоторых изображений, как на Авито.
Писать буду только на Ajax, без библиотек, но есть несколько вопросов:
1. по какому событию запускать скрипт?
2. как реализовать просмотр?
3. как реализовать удаление некоторых изображений?
Поделитесь небольшими примерами, чтоб въехать, а дальше сам)
На стороне сервера буду делать на PHP + ImageMagic.
Заранее спасибо!
Ответ: 1. Смотря что считать событиями. Если выбрать для загрузки, просмотреть перед загрузкой на сервер (такое возможно, это к 2.), то это первое событие запускающее просмотр/редактирование выбранного. Отправка на сервер будет вторым событием.

2. Методами доступными в HTML5, либо через сервер для старых браузеров.

3. Либо на клиенте посредством JS, либо через сервер.

РНР и ImageMagic или GD, это уже к клиенту отношения не имеет.
Вопрос: Добавить товару активному изображению

Всем привет. Народ, помогите пжлста. Есть сайт:
В нём есть товар, например "колбы для кальяна". подскажите как сделать так, чтобы выбранное изображение колбы дополнялось меткой? Ну т.е. картинкой? Надо чтобы на выбранном изображении стояла галочка, что в данный момент выбрано именно это изображение товара.

Помогите пжлста. Саму метку с её изображением сделал, а вот как её прикрепить к изображению товара - не знаю.

Думаю функция на JS нужна, которая бы активной картинке какой-нибудь класс active присваивала, но вот реализовать пока не получается. Вот код:

<span id='list_product_image_thumb'>
				<?php if ( (count($this->images)>1) || (count($this->videos) && count($this->images)) ) {?>
				
				
					<!--тут идёт вывод метки товара, сейчас выводятся метки у каждой миниатюры, а надо только у выбранной--->
						<?php if ($product->label_id){?>
							<div class="product_label">
								<?php if ($product->_label_image){?>
									<img src="<?php print $product->_label_image?>" alt="<?php print htmlspecialchars($product->_label_name)?>" />
								<?php }else{?>
									<span class="label_name"><?php print $product->_label_name;?></span>
								<?php }?>
							</div>
						<?php }?>
						<!-------------------------------->	
				
				
					<?php foreach($this->images as $k=>$image){?>
						
						
						<!--нужно обработать OnClick(). Нужно добавить класс active именно той картинке, на которую нажали,
						а остальным присвоить класс no_active. Изображение с классом active (метка) и будет появляться только
						на одной картинке, а не на всех-->
						<img class="jshop_img_thumb" src="<?php print $this->image_product_path?>/<?php print $image->image_thumb?>" alt="<?php print htmlspecialchars($image->_title)?>" title="<?php print htmlspecialchars($image->_title)?>" onclick="showImage(<?php print $image->image_id?>,this)" />
											
						
					<?php }?>
				<?php }?>
			</span>


И есть вот такая функция, срабатывает при клике по изображению:

function showImage(id, obj){    
    jQuery('.video_full').hide();
    jQuery('a.lightbox').hide();
    jQuery("#main_image_full_"+id).show();//Вывод большой картинки
    jQuery(".product_label").show();//Вывод метки
	
	
	//Добавляем класс 
	//jQuery(".jshop_img_thumb").addClass("active");
	//jQuery(obj.className).addClass("active");
	var my_class=jQuery(obj).attr("class");
	jQuery("."+my_class).addClass("active");
	
	//my_class.addClass("active");
}
Ответ: Если результирующий html это span и в нем img, то ради этих двух тегов столько php-тегов натуеверчено, что код читать, это приключение. ) Неужто нельзя упростить запись используя тернарный оператор?

Если я правильно понял, то не jQuery(".product_label").show(); нужен, а добавлять/удалять класс. Но речь идет о товарах, а не просто картинках, а товары это не собственность клиента, сервер то должен знать о выборе пользователя, а сообщать ему об этом классом не получится, нужна форма, а конкретно ее элемент checkbox, который и определяет выбор. И все события должны быть привязаны к нему, по вашему же описанию получается, что вы пытаетесь управлять картинкой вне контекста товара, которому она принадлежит.