{"id":32,"date":"2020-09-18T20:31:30","date_gmt":"2020-09-18T20:31:30","guid":{"rendered":"https:\/\/squaremyimage.com\/?page_id=32"},"modified":"2020-09-18T20:31:46","modified_gmt":"2020-09-18T20:31:46","slug":"test","status":"publish","type":"page","link":"https:\/\/squaremyimage.com\/zh\/test\/","title":{"rendered":"\u6d4b\u8bd5"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"32\" class=\"elementor elementor-32\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a6b27a3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a6b27a3\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b1a13f1\" data-id=\"b1a13f1\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4e4f0ab elementor-widget elementor-widget-text-editor\" data-id=\"4e4f0ab\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.8.1 - 13-11-2022 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#818a91;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#818a91;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<!doctype html>\n<html lang=\"en\">\n  <head>\n    <!-- Required meta tags -->\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n\n    <!-- Bootstrap CSS -->\n    <link rel=\"stylesheet\" href=\"assets\/css\/bootstrap.min.css\">\n    <link rel=\"stylesheet\" href=\"assets\/css\/basic.min.css\">\n    <link rel=\"stylesheet\" href=\"assets\/css\/dropzone.min.css\">\n    <style>\n        body {\n            background-color: #dadada;\n        }\n        #drophere {\n            \/*display: block;\n            width: 480px;*\/\n            height: 100px;\n            margin: 10px auto;\n            overflow: auto;\n            border-style: dashed;\n        }\n        #preview {\n            display: block;\n            width: 490px;\n            height: 480px;\n            margin: 10px auto;\n        }\n\n        #preview img {\n            max-width: 480px;\n            max-height: 480px;\n            margin: 0 5px;\n        }\n\n        #zip, #list {\n            display: block;\n            text-align: center;\n            margin: 5px 0;\n        }\n\n        .navbar {\n            margin-bottom: 0px;\n        }\n    <\/style>\n\n    <title>\u56fe\u50cf\u8c03\u6574\u5668<\/title>\n  <\/head>\n  <body>\n\n    <nav class=\"navbar navbar-expand-lg\">\n        <!--<a class=\"navbar-brand\" href=\"\/\">Image Resizer<\/a>\n        <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n          <span class=\"navbar-toggler-icon\"><\/span>\n        <\/button>\n        -->\n    <\/nav>\n\n    <div class=\"container\">\n        <div id=\"drophere\" class=\"dropzone col-sm\"><\/div>\n        <div style=\"display:block;text-align:center;\">\n            <div class=\"input-group mb-3\" style=\"width:200px;margin:0 auto;\">\n                <div class=\"input-group-prepend\">\n                  <span class=\"input-group-text\" id=\"inputGroup-sizing-default\">\u8fb9\u8ddd<\/span>\n                <\/div>\n                <input type=\"number\" id=\"margin\" value=\"0\" class=\"form-control\" aria-label=\"\u8f93\u5165\u5c3a\u5bf8\u7684\u4f8b\u5b50\" aria-describedby=\"inputGroup-sizing-default\">\n            <\/div>\n            <div>\n                <div class=\"form-check form-check-inline\" >\n                    <input class=\"form-check-input\" id=\"white\" type=\"checkbox\" value=\"white\" checked>\n                    <label class=\"form-check-label\" for=\"inlineCheckbox1\">\u767d\u8272<\/label>\n                <\/div>\n                <div class=\"form-check form-check-inline\">\n                    <input class=\"form-check-input\" id=\"black\" type=\"checkbox\" value=\"black\">\n                    <label class=\"form-check-label\" for=\"inlineCheckbox2\">\u9ed1\u8272<\/label>\n                <\/div>\n                <div class=\"form-check form-check-inline\">\n                    <input class=\"form-check-input\" id=\"transparent\" type=\"checkbox\" value=\"option3\">\n                    <label class=\"form-check-label\" for=\"inlineCheckbox3\">\u900f\u660e(\u4ec5PNG)<\/label>\n                <\/div>\n            <\/div>\n            <div>\n                <button type=\"button\" id=\"submit\" class=\"btn btn-primary btn-lg\">\u63d0\u4ea4<\/button>\n                <button type=\"button\" class=\"btn btn-secondary btn-lg\">\u91cd\u7f6e<\/button>\n            <\/div>\n        <\/div>\n        <div id=\"zip\"><\/div>\n        <div id=\"list\"><\/div>\n    <\/div>\n    \n      <!-- Optional JavaScript -->\n    <!-- jQuery first, then Popper.js, then Bootstrap JS -->\n    <script src=\"assets\/js\/jquery-2.2.4.min.js\"><\/script>\n    <script src=\"assets\/js\/popper.min.js\"><\/script>\n    <script src=\"assets\/js\/bootstrap.min.js\"><\/script>\n    <script src=\"assets\/js\/dropzone.js\"><\/script>\n    <script>\n\n        jQuery(document).ready(function() {\n            var toProcess = [];\n            var allZip = [];\n\n            Dropzone.autoDiscover = false;\n\n            var myDropzone = new Dropzone(\"#drophere\", {\n                url: \"\/upload\",\n                acceptedFiles: \"image\/*\",\n                autoProcessQueue: false,\n                parallelUploads: 1,\n            });\n\n            myDropzone.on(\"complete\", function(file) {\n                \/\/console.log(file);\n                myDropzone.removeFile(file);\n\n                try {\n                    var queueLength = jQuery('#drophere .dz-preview').length;\n                    console.log({queueCount: queueLength});\n\n                    try {\n                        console.log({file:file});\n                        var response = JSON.parse(file.xhr.response);\n                        console.log({response: response});\n                        toProcess.push(response);\n                    } catch(err) {\n                        console.log({err:err, file:file});\n                        alert('An error has occured while uploading.');\n                    }\n\n                    if(!queueLength) {\n                        console.log({toProcess: toProcess});\n\n                        jQuery.ajax({\n                            method: \"POST\",\n                            url: \"\/getzip\",\n                            dataType: \"json\",\n                            data: {toZip: toProcess}\n                        })\n                        .done(function( msg ) {\n                            if(msg.zip) {\n                                var html = '<div><strong>Zip files available for download:<\/strong><\/div>';\n\n                                allZip.push(msg.zip);\n\n                                for(var x in allZip) {\n                                    html += '<div><a href=\"\/zip\/'+allZip[x]+'\">'+allZip[x]+'<a><\/div>';\n                                }\n                                top.location.href = '\/zip\/'+msg.zip;\n                                jQuery('#zip').html(html);\n                            }\n                            if(msg.files) {\n                                var html = '<div><strong>Converted the following images to squares successfully:<\/strong><\/div>';\n                                for(var x in msg.files) {\n                                    html += '<div>'+msg.files[x]+'<\/div>';\n                                }\n                                jQuery('#list').html(html);\n                            }\n                            \/\/alert( \"Data Saved: \" + msg );\n                        });\n                    }\n                } catch(e) {\n                    console.log(e);\n                    alert('An error has occured while uploading.');\n                }\n\n            });\n\n            myDropzone.on('sending', function(data, xhr, formData) {\n                var white = jQuery('#white')[0].checked;\n                var black = jQuery('#black')[0].checked;\n                var transparent = jQuery('#transparent')[0].checked;\n\n                formData.append('margin', jQuery('#margin').val());\n\n                if(white) {\n                    formData.append('white', 1);\n                }\n\n                if(black) {\n                    formData.append('black', 1);\n                }\n\n                if(transparent) {\n                    formData.append('transparent', 1);\n                }\n            });\n\n            jQuery('#submit').on('click', function(){\n                var files = myDropzone.getUploadingFiles();\n                console.log({files:files});\n                toProcess = [];\n                myDropzone.processQueue();\n            })\n\n        });\n\n    <\/script>\n  <\/body>\n<\/html>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u56fe\u50cf\u8c03\u6574\u5668 \u8fb9\u8ddd \u767d\u8272 \u9ed1\u8272 \u900f\u660e\uff08\u4ec5PNG\uff09 \u63d0\u4ea4 \u91cd\u7f6e<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":""},"_links":{"self":[{"href":"https:\/\/squaremyimage.com\/zh\/wp-json\/wp\/v2\/pages\/32"}],"collection":[{"href":"https:\/\/squaremyimage.com\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/squaremyimage.com\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/squaremyimage.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/squaremyimage.com\/zh\/wp-json\/wp\/v2\/comments?post=32"}],"version-history":[{"count":2,"href":"https:\/\/squaremyimage.com\/zh\/wp-json\/wp\/v2\/pages\/32\/revisions"}],"predecessor-version":[{"id":34,"href":"https:\/\/squaremyimage.com\/zh\/wp-json\/wp\/v2\/pages\/32\/revisions\/34"}],"wp:attachment":[{"href":"https:\/\/squaremyimage.com\/zh\/wp-json\/wp\/v2\/media?parent=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}