Check server response of
Server response
NS records
Whois domain
200 OK - imgfe.com
HTTP Status: 200
User-Agent: Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; [email protected])
Date: Tue, 29 Apr 2025 14:47:14 GMT
Content-Type: text/html; charset=UTF-8
Transfer-Encoding: chunked
Connection: keep-alive
Vary: Accept-Encoding
X-Powered-By: PHP/7.3.6
cf-cache-status: DYNAMIC
Report-To: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v4?s=FoFh0pZJ1vxAmNUPkcrWGCG%2BFJVXCyBByqSPLmyNJ%2FuasTm9Nmy0cjqbJmy1Qxz4PYRWqO63IyOg4CkilA%2BKcGwmGcThiNu4o9%2BzAofIiCMSbaBgPeR9cV%2FR%2FxpwbVeyvEgJ2kmsc6M%3D"}],"group":"cf-nel","max_age":604800}
NEL: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
Server: cloudflare
CF-RAY: 937f97e89a3a7510-HAM
alt-svc: h3=":443"; ma=86400
server-timing: cfL4;desc="?proto=TCP&rtt=25324&min_rtt=25324&rtt_var=12662&sent=1&recv=3&lost=0&retrans=0&sent_bytes=0&recv_bytes=165&delivery_rate=0&cwnd=249&unsent_bytes=0&cid=0000000000000000&ts=0&x=0"
HTTP Code 200 OK
http status code 200 is a standard successful HTTP server response. It means that the client’s request (e.g., from a browser) was successfully processed, and the server is delivering the requested data.
When is Code 200 used?
- When loading a web page
- When successfully receiving an API response
- When processing a form or another HTTP request
What does Code 200 mean for the user?
The user receives content without errors, and the page or application functions properly. If Code 200 is accompanied by data, the browser or program processes and displays it to the user.
GET / HTTP/1.1 Host: imgfe.com Accept: */* User-Agent: Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; [email protected])
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>imgfe</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<!--<link rel="stylesheet" href="/static/css/main.css" />-->
<style type="text/css">
html {
width: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body{
margin: 0;
font-size: 16px;
color: #47474f;
background: #f5f5fa;
-webkit-font-smoothing: antialiased;
overflow: hidden;
}
::-webkit-scrollbar {
z-index: 50;
width: 4px;
height: 4px;
background-color: #4fae4f;
}
::-webkit-scrollbar-track {
background: #f0f0f0;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.hide-on-desktop {
display: flex !important;
}
.hide-on-mobile {
display: none !important;
}
@media (min-width: 768px) {
.hide-on-desktop {
display: none !important;
}
.hide-on-mobile {
display: flex !important;
}
}
@media (max-width: 768px) {
.stage {
display: block !important;
}
.stage .workbench,
.stage .sidebar{
height: auto !important;
}
.sidebar .btn-start{
position: relative !important;
left: inherit !important;
bottom: inherit !important;
right: inherit !important;
margin: 20px 10px;
}
.stage #image-list{
margin: 20px auto !important;
}
.stage .side-tools{
right: 30px !important;
}
}
a{
color: #333;
}
input, select, textarea {
background-color: #fff;
border: 1px solid #707078;
border-radius: 4px;
line-height: 20px;
font-size: 16px;
font-weight: 400;
color: #47474f;
-webkit-transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
-o-transition: border-color ease-in-out .15s, background-color ease-in-out .15s;
transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
padding: 4px 12px;
-webkit-box-shadow: none;
box-shadow: none;
}
select{
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type=number], select[type=number] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 76px;
text-align: right;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding: 8px 4px 8px 12px;
position: relative;
transition: none;
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button {
opacity: 1;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
margin-left: 6px;
}
.global-loading{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
justify-content: center;
align-items: center;
}
.tiny-input{
padding: 2px 4px;
}
.mr-2{
margin-right: 2px !important;
}
.mr-4{
margin-right: 4px !important;
}
.ml-4{
margin-left: 4px !important;
}
.ml-8{
margin-left: 8px !important;
}
.ml-10{
margin-left: 10px !important;
}
.mt-4{
margin-top: 4px !important;
}
.mt-6{
margin-top: 6px !important;
}
.mt-10{
margin-top: 10px !important;
}
.mt-20{
margin-top: 20px !important;
}
.mb-10{
margin-bottom: 10px !important;
}
.mb-20{
margin-bottom: 20px !important;
}
.mb-30{
margin-bottom: 30px !important;
}
.my-auto{
margin: 0 auto !important;
}
.pa-10{
padding: 10px !important;
}
.pa-20{
padding: 20px !important;
}
.bold{
font-weight: 500;
}
.link{
color: #007bff;
text-decoration: none;
}
.link:hover{
color: #000;
text-decoration: underline;
text-underline-offset: 5px;
}
.fs-12{
font-size: 12px;
}
.fs-13{
font-size: 13px;
}
.fs-14{
font-size: 14px;
}
.fs-16{
font-size: 16px;
}
.fs-22{
font-size: 22px;
}
.fs-42{
font-size: 42px;
}
.none{
display: none;
}
.pointer{
cursor: pointer;
}
.center{
text-align: center;
}
.btn{
border: none;
-webkit-transition: all .1s linear;
-o-transition: all .1s linear;
transition: all .1s linear;
text-shadow: none;
text-decoration: none;
letter-spacing: 0;
font-size: 15px;
border-radius: 4px;
padding: 6px 16px;
color: #fff;
background-color: #4fae4f;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn:hover {
background-color: #3e8e3e;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed; /* 禁用状态的光标样式 */
}
.btn.btn-primary{
background-color: #4fae4f;
color: #fff;
}
.btn.btn-primary:hover{
background-color: #3e8e3e;
}
.btn.btn-secondary{
background-color: #dddfe4;
border-color: #dddfe4;
color: #000;
}
.btn.btn-secondary:hover{
background-color: #b4b9c4;
border-color: #b4b9c4;
}
.btn.btn-blue {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.btn.btn-blue:hover {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
}
.btn.btn-dark {
color: #fff;
background-color: #343a40;
border-color: #343a40;
}
.btn.btn-dark:hover {
color: #fff;
background-color: #23272b;
border-color: #1d2124;
}
.btn.btn-sm{
font-size: 12px;
line-height: 16px;
padding: 8px 12px;
border-radius: 8px;
}
.btn.btn-lg{
font-size: 14px;
line-height: 16px;
padding: 10px 20px;
border-radius: 8px;
}
.btn.btn-uploader{
min-height: 60px;
min-width: 300px;
padding: 20px 42px;
font-size: 24px;
border-radius: 12px;
}
.btn.btn-start{
min-height: 60px;
padding: 20px 42px;
font-size: 24px;
border-radius: 12px;
}
.btn.btn-download{
padding: 24px 48px;
font-weight: 500;
font-size: 24px;
display: inline-flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
min-height: 80px;
min-width: 330px;
border-radius: 12px;
}
.sidebar .btn-start{
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
}
.btn-block {
display: block;
width: 100%;
}
.icon-btn {
width: 24px;
height: 24px;
-ms-flex: 0 0 24px;
flex: 0 0 24px;
text-align: center;
background: rgba(0, 0, 0, .1);
background: #ebebf4;
margin-left: 4px;
z-index: 1030;
border-radius: 100%;
cursor: pointer;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
}
.icon-btn:hover {
background-color: #4fae4f;
color: #fff;
-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .6);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .6);
}
.icon-btn.btn-lg{
width: 36px;
height: 36px;
color: #FFF;
background-color: #4fae4f;
box-shadow: none;
}
.icon-btn.btn-lg:hover{
background-color: #3e8e3e;
}
.text-center{
text-align: center;
}
.avatar{
position: relative;
border-radius: 50%;
width: 32px;
height: 32px;
overflow: hidden;
border: 1px solid #ccc;
}
.header{
background: #fff;
z-index: 100;
position: fixed;
right: 0;
left: 0;
top: 0;
-webkit-box-shadow: 0 1px 1px 0 rgba(50, 50, 50, .3);
box-shadow: 0 1px 1px 0 rgba(50, 50, 50, .3);
padding: 0 20px;
}
.header nav {
display: -ms-flexbox;
display: flex;
font-size: 12px;
height: 60px;
align-items: center;
justify-content: left;
}
.header nav a{
text-decoration: none;
}
.header nav .brand{
display: flex;
min-width: 144px;
max-width: 150px;
cursor: pointer;
background-size: contain;
flex-shrink: 0;
}
.header nav .brand span{
margin-left: 13px;
font-size: 26px;
font-family: Microsoft YaHei UI-Bold, Microsoft YaHei UI;
font-weight: 700;
letter-spacing: 1px;
color: #272e3b;
line-height: 36px;
}
.header .nav-menu{
display: flex;
align-items: stretch;
height: 100%;
}
.header .nav-menu .nav-menu-item {
position: relative;
font-size: 16px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #333;
margin-left: 42px;
display: flex;
flex: 1;
align-items: center;
white-space: nowrap;
}
.header .nav-menu .nav-menu-item>a{
color: #333;
}
.header .nav-menu .nav-menu-item:hover>a,
.header .nav-menu .nav-menu-item.active>a{
color: #4fae4f;
_font-weight: 700;
}
.header .nav-menu .nav-menu-item svg {
transition: transform 0.3s ease;
margin-left: 2px;
}
.header .nav-menu .nav-menu-item:hover svg {
transform: rotate(180deg);
color: #4fae4f;
}
#nav-user{
position: relative;
margin: 0 4px 0 8px;
display: flex;
align-items: center;
}
.dropdown {
display: none;
position: absolute;
top: 90%;
left: 0;
background: #fff;
border-radius: 6px;
box-shadow: 0 10px 55px 0 rgba(0, 25, 50, .15);
z-index: 1042;
transition: .15s .1s;
padding: 4px;
}
#nav-user .dropdown{
top: 120%;
right: 0;
left: auto;
min-width: 110px;
border: 1px solid #999;
}
.nav-menu-item:hover .dropdown {
display: block;
}
.dropdown-item {
white-space: nowrap;
font-size: 14px;
border-radius: 4px;
}
.dropdown-item:hover{
background-color: #f6f6fa;
}
.dropdown-item a{
display: block;
padding: 8px 18px;
}
.dropdown-item:hover a{
color: #4fae4f !important;
}
nav .actions{
-ms-flex-align: center;
align-items: center;
height: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-order: 3;
order: 3;
margin: 0 0 0 auto;
font-size: 14px;
}
nav .actions .action-item{
margin: 0 6px;
display: flex;
align-items: center;
}
.tabs{
display: flex;
align-items: center;
margin: 0 0 0 auto;
}
.tabs .tab{
cursor: pointer;
font-size: 14px;
-webkit-border-end: 1px solid #c4c5c7;
border-inline-end: 1px solid #c4c5c7;
border-bottom: 1px solid #c4c5c7;
cursor: pointer;
flex: 1 1;
text-align: center;
color: #85858e;
padding: 16px;
}
.tabs .tab.active{
color: #161616;
font-weight: 500;
border-bottom: none;
}
.tabs .tab:last-child {
-webkit-border-end: none;
border-inline-end: none;
}
.tab-content {
padding-top: 12px;
}
.sidebar__section {
padding: 12px;
border-bottom: 1px solid #ebebf4;
position: relative;
}
.form_item_inline {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 12px;
}
.dialog-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2); /* 半透明背景 */
display: none;
justify-content: center;
align-items: center;
z-index: 1000; /* 确保在最上层 */
}
.dialog-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2); /* 半透明背景 */
z-index: 100; /* 在对话框内容后面 */
}
/* 对话框内容 */
.dialog-content {
background-color: white;
border-radius: 8px;
padding: 20px;
width: 300px; /* 调整宽度 */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 500;
}
/* 关闭按钮 */
.dialog-close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font-size: 20px;
color: #888; /* 关闭按钮颜色 */
}
/* 标题样式 */
.dialog-title {
margin: 0;
font-size: 16px;
color: #333;
}
/* 描述样式 */
.dialog-description {
margin-top: 10px;
font-size: 16px;
color: #666;
text-align: center; /* 居中对齐 */
}
.progress-container {
width: 100%;
background-color: #f3f3f3;
border: 1px solid #d1d1d1;
border-radius: 5px;
overflow: hidden;
margin: 20px 0;
}
.progress-bar {
height: 30px;
width: 0;
background-color: #4caf50;
transition: width 0.3s;
position: relative;
display: flex;
align-items: center;
}
.progress-text {
position: absolute;
width: 100%;
text-align: center;
color: white;
font-weight: bold;
}
.main{
margin-top: 60px;
overflow: hidden;
}
.stage{
height: calc(100vh - 60px);
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
display: flex;
-ms-flex-align: center;
align-items: center;
overflow: auto;
overflow-x: hidden;
}
.stage .upload-container {
width: 90%;
height: 90%;
max-width: 520px;
margin: 0 auto 0 auto;
}
.stage .processing-container,
.stage .download-container{
width: 90%;
height: 90%;
max-width: 520px;
margin: 0 auto 0 auto;
display: none;
}
.stage .workbench{
position: relative;
flex: 1 1;
height: 100%;
overflow-y: auto;
display: none;
}
.stage .side-tools{
position: absolute;
top: 30px;
right: 470px;
display: none;
}
.stage #image-wrapper{
margin: 120px auto 120px auto;
}
.stage #image-list{
margin: 120px auto 120px auto;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
padding-top: 8px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.image-file{
margin: 4px;
width: 198px;
height: 244px;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: distribute;
align-content: space-around;
-ms-flex-pack: center;
justify-content: center;
position: relative;
border: 1px solid rgba(0, 0, 0, 0);
background: #fdfdfd;
border-radius: 8px;
-webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, .08);
box-shadow: 0 0 8px 0 rgba(0, 0, 0, .08);
}
.image-file:hover{
border: 1px solid #9999a2;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.image-file .image-file__action{
position: absolute;
top: 8px;
right: 8px;
display: flex;
}
.image-file .image-file__action .icon-btn{
display: none;
}
.image-file:hover .image-file__action .icon-btn{
display: flex;
}
.image-file .image-file__cover{
display: -ms-flexbox;
display: flex;
position: relative;
-ms-flex-align: center;
align-items: center;
width: 90%;
height: 65%;
}
.image-file .image-file__cover>div {
height: 100%;
width: 100%;
background-position: 50%;
background-repeat: no-repeat;
}
/*.image-file .image-file__info{*/
/* position: absolute;*/
/* width: 100%;*/
/* bottom: 6px;*/
/* left: 0;*/
/*}*/
.image-file .image-file__info{
margin-top: 4px;
}
.image-file .image-file__info .image-file__info__name{
display: block;
font-size: 12px;
padding: 2px;
line-height: 16px;
text-align: center;
width: 90%;
margin: 0 auto;
}
.image-file .image-file__info .image-file__info__size{
text-align: center;
margin-top: 2px;
}
.image-file .image-file__info .image-file__info__size__box{
padding: 2px 4px;
background: #adadb6;
border-radius: 4px;
color: #fff;
font-size: 12px;
}
.image-file .image-file__info .image-file__info__size__box.resized_size{
background: #4d90fe;
}
#image-comparison{
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin: 100px auto;
}
.icv__wrapper{
background-color: #FFF;
}
/*#image-comparison .mask{*/
/* background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3LjkzNyA3LjkzOCIgaGVpZ2h0PSIzMCIgd2lkdGg9IjMwIj48cGF0aCBwYWludC1vcmRlcj0ic3Ryb2tlIGZpbGwgbWFya2VycyIgZD0iTS4wMTQuMDE0SDMuOTdWMy45N0guMDE0ek0zLjk3IDMuOTY4aDMuOTU0djMuOTU1SDMuOTd6IiBmaWxsPSIjZWVlZmYwIi8+PC9zdmc+);*/
/* background-color: #fff;*/
/* z-index: 2;*/
/*}*/
.stage .sidebar {
display: none;
background: #fff;
height: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-left: 1px solid rgba(0, 0, 0, .2);
-ms-flex: 0 0;
flex: 0 0;
-ms-flex-preferred-size: 440px;
flex-basis: 440px;
-ms-flex-direction: column;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
.stage .sidebar .sidebar__title{
font-weight: 500;
font-size: 28px;
line-height: 30px;
color: #33333b;
margin-bottom: 0;
text-align: center;
padding: 21px;
border-bottom: 1px solid rgba(0, 0, 0, .2);
position: relative;
background-color: #fff;
}
.auth-form {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 400px;
margin: 120px auto 0 auto;
}
.auth-form .input-group {
position: relative;
margin: 10px 0;
}
.input-with-icon {
width: 90%;
padding: 10px 0 10px 36px;
border: 1px solid #ccc;
border-radius: 4px;
}
.auth-form .icon {
position: absolute;
left: 10px;
top: 10px;
width: 20px;
height: 20px;
fill: #888;
}
.social-buttons {
display: flex;
justify-content: space-between;
}
.social-button {
flex: 1;
padding: 8px;
text-align: center;
border: none;
border-radius: 4px;
cursor: pointer;
color: white;
margin: 5px; /* Add margin for spacing */
font-size: 0.9em; /* Smaller font size */
}
.facebook {
background-color: #3b5998;
}
.twitter {
background-color: #1da1f2;
}
.google {
background-color: #db4437;
}
.compress-info{
display: flex;
align-items: center;
margin-top: 10px;
}
.chart-text {
font-weight: 500;
fill: #000;
-webkit-transform: translateY(.25em);
transform: translateY(.25em);
}
.chart-number {
font-size: .55em;
line-height: 1;
text-anchor: middle;
-webkit-transform: translateY(-.25em);
transform: translateY(-.25em);
}
.chart-label {
font-size: .2em;
text-transform: uppercase;
text-anchor: middle;
-webkit-transform: translateY(.7em);
transform: translateY(.7em);
}
.language-menu{
display: flex;
flex-wrap: wrap;
}
.language-menu > div {
width: 47%;
}
</style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastify-js/1.12.0/toastify.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css" rel="stylesheet" />
<svg class="none">
<symbol id="icon-arrow-down" viewBox="0 0 24 24">
<path d="M12 16.75L5.13 9.87a1 1 0 0 1-.3-.7 1 1 0 0 1 1-1 1 1 0 0 1 .71.29L12 13.92l5.46-5.46a1 1 0 0 1 .71-.29 1 1 0 0 1 1 1 1 1 0 0 1-.3.7z"/>
</symbol>
<symbol id="icon-arrow-left" viewBox="0 0 24 24">
<path d="M 10.533 19.065 L 4.438 12.968 c -0.116 -0.116 -0.208 -0.255 -0.27 -0.4 a 1.27 1.27 0 0 1 0.009 -0.971 c 0.066 -0.155 0.16 -0.296 0.277 -0.415 l 6.21 -6.21 A 1.27 1.27 0 0 1 12.461 4.947 c 0.49 0.49 0.485 1.295 -0.017 1.797 l -4.02 4.02 l 10.47 -0.097 a 1.24 1.24 0 0 1 1.258 1.258 a 1.3 1.3 0 0 1 -1.282 1.282 L 8.4 13.305 l 3.947 3.947 c 0.49 0.492 0.485 1.295 -0.017 1.797 s -1.306 0.508 -1.797 0.017 z" />
</symbol>
<symbol id="icon-global" viewBox="0 0 24 24">
<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/>
</symbol>
<symbol id="icon-close" viewBox="0 0 24 24">
<path d="M13.41 12l5.3-5.29A1 1 0 0 0 19 6a1 1 0 0 0-1-1 1 1 0 0 0-.71.29L12 10.59l-5.29-5.3A1 1 0 0 0 6 5a1 1 0 0 0-1 1 1 1 0 0 0 .29.71l5.3 5.29-5.3 5.29A1 1 0 0 0 5 18a1 1 0 0 0 1 1 1 1 0 0 0 .71-.29l5.29-5.3 5.29 5.3A1 1 0 0 0 18 19a1 1 0 0 0 1-1 1 1 0 0 0-.29-.71z"/>
</symbol>
<symbol id="icon-email" viewBox="0 0 24 24">
<path d="M 21.0959 8.098 V 17.7649 a 1.6655 1.6655 90 0 1 -1.6655 1.6655 H 3.8861 a 1.6655 1.6655 90 0 1 -1.6655 -1.6655 V 8.098 l 6.9244 5.8708 a 3.8861 3.8861 90 0 0 5.0264 0 L 21.0959 8.098 z M 19.4304 3.8861 a 1.686 1.686 90 0 1 0.594 0.1088 a 1.6555 1.6555 90 0 1 0.6973 0.5052 a 1.6738 1.6738 90 0 1 0.2432 0.4025 c 0.0722 0.171 0.1166 0.3564 0.1277 0.5513 L 21.0959 5.5515 v 0.5552 L 12.7391 13.2349 a 1.6655 1.6655 90 0 1 -2.0791 0.0661 l -0.0827 -0.0666 L 2.2206 6.1067 v -0.5552 a 1.6599 1.6599 90 0 1 0.9143 -1.4867 A 1.6616 1.6616 90 0 1 3.8861 3.8861 h 15.5443 z"/>
</symbol>
<symbol id="icon-password" viewBox="0 0 24 24">
<path d="M 17.8746 6.9504 h -0.9583 V 5.2849 C 16.9162 2.9852 14.7697 1.1186 12.1247 1.1186 C 9.4798 1.1186 7.3331 2.9852 7.3331 5.2849 v 1.6655 H 6.3747 c -1.0542 0 -1.9167 0.7502 -1.9167 1.6665 v 8.3326 C 4.4582 17.8636 5.3205 18.6148 6.3747 18.6148 h 11.4998 c 1.0542 0 1.9167 -0.7502 1.9167 -1.6665 V 8.6168 c 0 -0.9163 -0.8625 -1.6665 -1.9167 -1.6665 Z M 12.1247 14.4485 c -1.0542 0 -1.9167 -0.749 -1.9167 -1.6655 c 0 -0.9163 0.8625 -1.6665 1.9167 -1.6665 s 1.9167 0.7502 1.9167 1.6665 S 13.1788 14.4485 12.1247 14.4485 Z M 9.2497 6.9504 V 5.2849 c 0 -1.3833 1.2842 -2.4998 2.8749 -2.4998 s 2.8749 1.1154 2.8749 2.4998 v 1.6655 h -5.75 Z"/>
</symbol>
<symbol id="icon-rotate" viewBox="0 0 24 24">
<path d="M 17.3013 16.6652 l 1.4773 1.4461 c 0.9363 -1.2067 1.5085 -2.601 1.6853 -4.047 h -2.1016 c -0.1456 0.9051 -0.4994 1.7894 -1.0612 2.601 M 13.2544 19.162 v 2.1016 c 1.4461 -0.1769 2.8505 -0.7385 4.0572 -1.6749 l -1.4981 -1.4981 c -0.7802 0.5618 -1.6542 0.9259 -2.5593 1.0716 m 7.2095 -7.1784 a 8.2248 8.2248 90 0 0 -1.6853 -4.047 l -1.4773 1.4773 c 0.5618 0.7802 0.9155 1.6646 1.0612 2.5697 m -2.4552 -5.6698 L 11.1737 1.5804 v 3.1939 C 7.0748 5.284 3.8913 8.7796 3.8913 13.024 s 3.173 7.7402 7.2824 8.2499 v -2.1016 c -2.9546 -0.4994 -5.2017 -3.0587 -5.2017 -6.1483 s 2.2471 -5.6491 5.2017 -6.1483 V 10.9434 l 4.7335 -4.6295" />
</symbol>
<symbol id="icon-add" viewBox="0 0 24 24">
<path d="M 10.7119 3.435 m 0.1808 0 l 1.3559 0 q 0.1808 0 0.1808 0.1808 l 0 15.9096 q 0 0.1808 -0.1808 0.1808 l -1.3559 0 q -0.1808 0 -0.1808 -0.1808 l 0 -15.9096 q 0 -0.1808 0.1808 -0.1808 Z M 3.7966 10.7119 m 0.1808 0 l 15.1864 0 q 0.1808 0 0.1808 0.1808 l 0 1.3559 q 0 0.1808 -0.1808 0.1808 l -15.1864 0 q -0.1808 0 -0.1808 -0.1808 l 0 -1.3559 q 0 -0.1808 0.1808 -0.1808 Z" />
</symbol>
<symbol id="icon-download" viewBox="0 0 24 24">
<path d="M 10.9005 4.5 h 2.4446 c 0.4064 0 0.7334 0.327 0.7334 0.7334 v 5.1337 h 2.6799 c 0.5439 0 0.8159 0.657 0.4309 1.042 L 12.5414 16.06 c -0.2292 0.2292 -0.605 0.2292 -0.8342 0 L 7.0532 11.4091 c -0.385 -0.385 -0.1131 -1.042 0.4309 -1.042 H 10.1671 V 5.2334 c 0 -0.4064 0.327 -0.7334 0.7334 -0.7334 z m 9.0451 11.4897 v 3.4225 c 0 0.4064 -0.327 0.7334 -0.7334 0.7334 H 5.0334 c -0.4064 0 -0.7334 -0.327 -0.7334 -0.7334 V 15.9897 c 0 -0.4064 0.327 -0.7334 0.7334 -0.7334 h 4.4828 l 1.4973 1.4973 c 0.6142 0.6142 1.6043 0.6142 2.2185 0 l 1.4973 -1.4973 H 19.2121 c 0.4064 0 0.7334 0.327 0.7334 0.7334 z m -3.7892 2.6891 c 0 -0.3361 -0.275 -0.6112 -0.6112 -0.6112 s -0.6112 0.275 -0.6112 0.6112 s 0.275 0.6112 0.6112 0.6112 s 0.6112 -0.275 0.6112 -0.6112 z m 1.9557 0 c 0 -0.3361 -0.275 -0.6112 -0.6112 -0.6112 s -0.6112 0.275 -0.6112 0.6112 s 0.275 0.6112 0.6112 0.6112 s 0.6112 -0.275 0.6112 -0.6112 z" />
</symbol>
<symbol id="icon-loading" viewBox="0 0 100 100">
<circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="40" stroke="#e5e5e5" fill="none" stroke-width="10" stroke-linecap="round"/>
<circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="40" stroke="#4fae4f" fill="none" stroke-width="6" stroke-linecap="round">
<animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/>
<animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/>
</circle>
</symbol>
</svg>
<script type="text/javascript">
var Imgfe = {
lang: "en",
page: "index",
t: {},
csrfToken: "",
uploadToken: "eff5o6cKTlKqGcxJmqc0ZG7VEqir2K/mWUeuFRInK3Y"
};
</script>
</head>
<body>
<header class="header">
<nav>
<a class="brand" href="/">
<img src="/static/img/imgfe.png" style="height:32px;" />
</a>
<div class="nav-menu">
<div class="nav-menu-item hide-on-mobile">
<a href="/compress-images">Compress images</a>
<svg width="18" height="18" fill="currentColor">
<use href="#icon-arrow-down"></use>
</svg>
<div class="dropdown">
<div class="dropdown-item">
<a href="/compress-images/compress-jpg">Compress JPG</a>
</div>
<div class="dropdown-item">
<a href="/compress-images/compress-jpeg">Compress JPEG</a>
</div>
<div class="dropdown-item">
<a href="/compress-images/compress-png">Compress PNG</a>
</div>
<div class="dropdown-item">
<a href="/compress-images/compress-gif">Compress GIF</a>
</div>
<div class="dropdown-item">
<a href="/compress-images/compress-svg">Compress SVG</a>
</div>
</div>
</div>
<div class="nav-menu-item hide-on-mobile">
<a href="/convert-images">Convert images</a>
<svg width="18" height="18" fill="currentColor">
<use href="#icon-arrow-down"></use>
</svg>
<div class="dropdown">
<div class="dropdown-item">
<a href="/convert-images/convert-to-jpg">Convert images to jpg</a>
</div>
<div class="dropdown-item">
<a href="/convert-images/convert-to-png">Convert images to png</a>
</div>
<div class="dropdown-item">
<a href="/convert-images/convert-to-bmp">Convert images to bmp</a>
</div>
<div class="dropdown-item">
<a href="/convert-images/convert-to-ico">Convert images to ico</a>
</div>
<div class="dropdown-item">
<a href="/convert-images/convert-to-tga">Convert images to tga</a>
</div>
<div class="dropdown-item">
<a href="/convert-images/convert-to-webp">Convert images to webp</a>
</div>
<div class="dropdown-item">
<a href="/convert-images/convert-to-avif">Convert images to avif</a>
</div>
</div>
</div>
<div class="nav-menu-item hide-on-mobile">
<a href="javascript:;">More tools</a>
<svg width="18" height="18" fill="currentColor">
<use href="#icon-arrow-down"></use>
</svg>
<div class="dropdown">
<div class="dropdown-item">
<a href="/edit-images">Edit image</a>
</div>
<div class="dropdown-item">
<a href="/blur-images">Blur Images</a>
</div>
<div class="dropdown-item">
<a href="/resize-images">Resize images</a>
</div>
<div class="dropdown-item">
<a href="/crop-image">Crop images</a>
</div>
<div class="dropdown-item">
<a href="/rotate-images">Rotate images</a>
</div>
<div class="dropdown-item">
<a href="/remove-background">Remove background</a>
</div>
</div>
</div>
</div>
<div class="hide-on-desktop">
<select class="mobile-page-jumper">
<option value="">Select tools</option>
<option value="/compress-images" >Compress images</option>
<option value="/convert-images" >Convert images</option>
<option value="/resize-images" >Resize images</option>
<option value="/crop-image" >Crop images</option>
<option value="/blur-images" >Blur Images</option>
<option value="/rotate-images" >Rotate images</option>
<option value="/remove-background" >Remove background</option>
</select>
</div>
<div class="actions">
<div class="action-item pointer" data-dialog-show="language-dialog">
<svg width="24" height="24" fill="#59636e">
<use href="#icon-global"></use>
</svg>
</div>
</div>
</nav>
</header>
<div class="main"><svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<!-- 压缩图片图标 -->
<symbol id="icon-compress" viewBox="0 0 24 24">
<path d="M4 9h16v2H4V9zm0 4h16v2H4v-2zm16-8H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 14H4V7h16v12zm-6-7h4l-5 5-5-5h4V8h2v4z"/>
</symbol>
<!-- 格式转换图标 -->
<symbol id="icon-convert" viewBox="0 0 24 24">
<path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm4 12h-4v3l-5-5 5-5v3h4v4z"/>
</symbol>
<!-- 裁剪图标 -->
<symbol id="icon-crop" viewBox="0 0 24 24">
<path d="M17 15h2V7c0-1.1-.9-2-2-2H9v2h8v8zM7 17V1H5v4H1v2h4v10c0 1.1.9 2 2 2h10v4h2v-4h4v-2H7z"/>
</symbol>
<!-- 调整尺寸图标 -->
<symbol id="icon-resize" viewBox="0 0 24 24">
<path d="M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z"/>
</symbol>
<!-- 旋转图标 -->
<symbol id="icon-rotate" viewBox="0 0 24 24">
<path d="M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z"/>
</symbol>
<!-- 移除背景图标 -->
<symbol id="icon-background" viewBox="0 0 24 24">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"/>
</symbol>
<!-- 模糊图片图标 -->
<symbol id="icon-blur" viewBox="0 0 24 24">
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-7-7c1.65 0 3-1.35 3-3s-1.35-3-3-3-3 1.35-3 3 1.35 3 3 3zm0-4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm5 7.5c0-2.49-2.01-4.5-4.5-4.5S8 13.01 8 15.5s2.01 4.5 4.5 4.5 4.5-2.01 4.5-4.5zm-4.5 2.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
</symbol>
</svg>
<div class="tools-container">
<div class="tools-grid">
<a href="/compress-images" class="tool-card">
<div class="tool-icon">
<svg width="32" height="32" fill="currentColor">
<use href="#icon-compress"></use>
</svg>
</div>
<h3>Compress images</h3>
</a>
<a href="/convert-images" class="tool-card">
<div class="tool-icon">
<svg width="32" height="32" fill="currentColor">
<use href="#icon-convert"></use>
</svg>
</div>
<h3>Convert images</h3>
</a>
<a href="/crop-image" class="tool-card">
<div class="tool-icon">
<svg width="32" height="32" fill="currentColor">
<use href="#icon-crop"></use>
</svg>
</div>
<h3>Crop images</h3>
</a>
<a href="/resize-images" class="tool-card">
<div class="tool-icon">
<svg width="32" height="32" fill="currentColor">
<use href="#icon-resize"></use>
</svg>
</div>
<h3>Resize images</h3>
</a>
<a href="/rotate-images" class="tool-card">
<div class="tool-icon">
<svg width="32" height="32" fill="currentColor">
<use href="#icon-rotate"></use>
</svg>
</div>
<h3>Rotate images</h3>
</a>
<a href="/remove-background" class="tool-card">
<div class="tool-icon">
<svg width="32" height="32" fill="currentColor">
<use href="#icon-background"></use>
</svg>
</div>
<h3>Remove background</h3>
</a>
<a href="/blur-images" class="tool-card">
<div class="tool-icon">
<svg width="32" height="32" fill="currentColor">
<use href="#icon-blur"></use>
</svg>
</div>
<h3>Blur Images</h3>
</a>
</div>
</div>
<style>
.tools-container {
padding: 40px 20px;
max-width: 1200px;
margin: 0 auto;
}
.tools-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: -15px;
}
.tool-card {
background: #fff;
border-radius: 8px;
padding: 30px;
width: 260px;
margin: 15px;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.2s, box-shadow 0.2s;
text-decoration: none;
}
.tool-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.tool-icon {
width: 64px;
height: 64px;
background: #f5f5fa;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
}
.tool-card h3 {
margin: 0 0 8px;
font-size: 18px;
color: #333;
}
.tool-card p {
margin: 0;
font-size: 14px;
color: #666;
min-height: 40px;
}
@media (max-width: 768px) {
.tool-card {
width: 100%;
max-width: 320px;
}
}
</style></div>
<div class="dialog-container" id="language-dialog">
<div class="dialog-overlay"></div>
<div class="dialog-content">
<div class="dialog-close">
<svg width="24" height="24" fill="currentColor">
<use href="#icon-close"></use>
</svg>
</div>
<div class="dialog-title">Choose a language</div>
<div class="dialog-description">
<div class="language-menu">
<div class="mt-6"><a class="link" href="/">English</a></div>
<div class="mt-6"><a class="link" href="/zh-cn">中文（简体）</a></div>
<div class="mt-6"><a class="link" href="/ja">日本語</a></div>
<div class="mt-6"><a class="link" href="/ar">العربية</a></div>
<div class="mt-6"><a class="link" href="/es">Español</a></div>
<div class="mt-6"><a class="link" href="/ko">한국어</a></div>
<div class="mt-6"><a class="link" href="/fr">Français</a></div>
<div class="mt-6"><a class="link" href="/uk">Українська</a></div>
<div class="mt-6"><a class="link" href="/ru">Pусский</a></div>
<div class="mt-6"><a class="link" href="/de">Deutsch</a></div>
<div class="mt-6"><a class="link" href="/it">Italiano</a></div>
<div class="mt-6"><a class="link" href="/pt">Português</a></div>
<div class="mt-6"><a class="link" href="/tr">Türkçe</a></div>
<div class="mt-6"><a class="link" href="/ro">română</a></div>
<div class="mt-6"><a class="link" href="/nl">Nederlands</a></div>
<div class="mt-6"><a class="link" href="/el">Ελληνικά</a></div>
<div class="mt-6"><a class="link" href="/bg">Български</a></div>
<div class="mt-6"><a class="link" href="/sv">Svenska</a></div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastify-js/1.12.0/toastify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"></script>
<script>
var initComm = function() {
Imgfe.tabCallback = function(){};
$('.mobile-page-jumper').change(function(){
window.location.href = this.value;
});
$('[data-dialog-show]').each(function(idx, ele){
ele.addEventListener('click', function() {
const dialogId = this.getAttribute('data-dialog-show');
const dialog = document.getElementById(dialogId);
if (dialog) {
dialog.style.display = 'flex';
}
});
});
// 遍历所有对话框
$('.dialog-container').each(function(idx, ele){
$(ele).find('.dialog-close, .dialog-overlay').on('click', function() {
ele.style.display = 'none';
});
});
$('.tippy').each(function(idx, ele){
tippy(ele, {
content: ele.getAttribute('data-title'),
placement: 'top',
animation: 'shift-away',
theme: 'light-border',
arrow: true,
arrowType: 'round',
duration: 200,
delay: [200, 0],
});
});
$('.tabs .tab').click(function(){
const container = $(this).parent().parent();
const mount = container.data('mount');
const tab = $(this).data('tab');
Imgfe[mount] = tab;
container.find('.tab').removeClass('active');
$(this).addClass('active');
container.find('.tab-content').hide();
$('#tab-content-' + tab).show();
Imgfe.tabCallback && Imgfe.tabCallback(tab);
});
Imgfe.activeTab = function(mount, tab){
Imgfe[mount] = tab;
const container = $('.tabs-container[data-mount="' + mount + '"]');
container.find('.tab').removeClass('active');
container.find('.tab[data-tab="' + tab + '"]').addClass('active');
container.find('.tab-content').hide();
$('#tab-content-' + tab).show();
}
$('#nav-user .avatar').on('click', function(event){
event.stopPropagation();
$('#nav-user .dropdown').toggle();
});
$(document).on('click', function() {
$('#nav-user .dropdown').hide();
});
$('.upload-trigger').click(function() {
$('.stage input[type="file"]').click();
});
$('.btn-download').click(function(){
var job_id = $(this).data('job-id');
window.location.href = 'https://imgfe-job.iupdown.com/download.php?job_id=' + job_id;
})
Imgfe.getPageUrl = function(path){
if(Imgfe.lang === 'en'){
return path;
}else{
if(path === '/'){
return '/' + Imgfe.lang;
}else{
return '/' + Imgfe.lang + path;
}
}
}
Imgfe.formatFileSize = function(bytes) {
if (bytes === 0) return '0 Bytes';
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
const i = Math.floor(Math.log(bytes) / Math.log(1024));
return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + ' ' + sizes[i];
}
Imgfe.getFileExtension = function(fileName){
const match = fileName.match(/\.([^.]+)$/);
return match ? match[1].toLocaleString() : '';
}
Imgfe.getFileNameNoExt = function(fileName){
const match = fileName.match(/(.+)\.[^.]+$/);
return match ? match[1].toLocaleString() : fileName;
}
Imgfe.getFileSign = function(file){
return file.name + '_' + file.size + '_' + file.lastModified;
}
Imgfe.fixFilename = function(fileName){
return fileName.replace(/["']/g, '');
}
Imgfe.isDisplayableImage = function(fileName){
const ext = Imgfe.getFileExtension(fileName).toLowerCase();
return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'ico', 'svg'].includes(ext);
}
Imgfe.random = function(len) {
len = len || 32;
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz';
var maxPos = chars.length;
var str = '';
for (i = 0; i < len; i++) {
str += chars.charAt(Math.floor(Math.random() * maxPos));
}
return str;
}
Imgfe.loadJs = function(url) {
let script = document.createElement('script')
script.type = "text/javascript"
script.src = url
document.getElementsByTagName('head')[0].appendChild(script)
}
Imgfe.loadCss = function(url) {
let link = document.createElement('link')
link.type = "text/css"
link.rel = 'stylesheet';
link.media = 'all';
link.href = url
document.getElementsByTagName('head')[0].appendChild(link)
}
Imgfe.waitFor = function(name, callback){
var timer = null;
var check = function(){
if(timer) {
clearTimeout(timer)
}
if(window[name]){
callback()
}else{
timer = setTimeout(()=>{
check()
},200)
}
}
check();
}
Imgfe.numberChanged = function(selector, callback){
let timer = null;
$(selector).on('input', function(){
if(timer){
clearTimeout(timer);
}
timer = setTimeout(function(){
callback($(selector).val());
}, 100);
});
}
Imgfe.toast = function(msg, style = {}){
window.Toastify({
text: msg,
duration: 3000,
close: false,
gravity: "top",
position: 'center',
style: style,
}).showToast();
};
Imgfe.info = function(msg){
Imgfe.toast(msg, {
color: '#fff',
background: '#59636e'
});
};
Imgfe.succ = function(msg){
Imgfe.toast(msg, {
color: '#fff',
background: '#4fae4f'
});
};
Imgfe.error = function(msg){
Imgfe.toast(msg, {
color: '#fff',
background: '#db4437'
});
};
Imgfe.imageFiles = {};
Imgfe.jobInfo = null;
Imgfe.initRestart = function(){
$('#restart').click(function(){
Imgfe.imageFiles = {};
Imgfe.jobInfo = null;
$('#image-list').empty();
$('.stage .upload-container').show();
$('.stage .workbench').hide();
$('.stage .side-tools').hide();
$('.stage .sidebar').hide();
$('.stage .processing-container').hide();
$('.stage .processing-container .title').html(Imgfe.t['48'])
$('#progress-bar').css('width', '0%');
$('.stage .processing-container .progress-container').show();
$('.stage .processing-container .loading-container').hide();
$('.stage .download-container').hide();
$('input[type="file"]').val('');
});
}
Imgfe.initDeleteJob = function(){
$('#delete-files').click(function(){
if(Imgfe.jobInfo && Imgfe.jobInfo.job_id){
$.ajax({
url: 'https://imgfe-job.iupdown.com/delete-files.php',
type: 'POST',
data: {
job_id: Imgfe.jobInfo.job_id
},
success: function(res){
if(res.ret === 0){
Imgfe.succ(Imgfe.t['55']);
$('#restart').click();
}else{
Imgfe.error(res.msg);
}
}
});
}
});
}
Imgfe.initUpload = function(operate){
Imgfe.initRestart();
Imgfe.initDeleteJob();
$('#image-list').on('click', '.icon-btn.rotate', function() {
var id = $(this).data('file-id');
Imgfe.imageFiles[id].rotate += 90;
$('#' + id + ' .image-file__cover').css('transform', 'rotate(' + Imgfe.imageFiles[id].rotate + 'deg)');
});
$('#image-list').on('click', '.icon-btn.remove', function() {
var id = $(this).data('file-id');
delete Imgfe.imageFiles[id];
$('#' + id).remove();
});
$('#image-list').on('change', '.image-file__info__name', function() {
var id = $(this).data('file-id');
if(this.value){
if(Imgfe.imageFiles[id].extension !== Imgfe.getFileExtension(this.value)){
this.value += '.' + Imgfe.imageFiles[id].extension;
}
Imgfe.imageFiles[id].name = Imgfe.fixFilename(this.value);
}else{
this.value = Imgfe.imageFiles[id].name;
}
});
$('input[type="file"]').change(function(e){
var files = e.target.files;
if(files.length > 0){
$('.stage .upload-container').hide();
$('.stage .workbench').show();
$('.stage .side-tools').show();
$('.stage .sidebar').css('display', 'flex');
if(operate === 'resize') {
if (files.length > 1) {
Imgfe.activeTab('resize_type', 'percent');
}
}
for (let i = 0; i < files.length; i++) {
const sign = Imgfe.getFileSign(files[i]);
var find = false;
Object.keys(Imgfe.imageFiles).forEach(function(key){
if(Imgfe.imageFiles[key].sign === sign){
find = true;
}
});
if(find){
continue;
}
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.src = e.target.result;
img.onload = function() {
const width = img.width;
const height = img.height;
if(operate === 'resize' && i === 0){
Imgfe.resized_width = width;
Imgfe.resized_height = height;
Imgfe.trigger_change = false;
$('#pix_width').val(width);
$('#pix_height').val(height);
Imgfe.trigger_change = true;
}
var item = {
id: Imgfe.random(8),
name: files[i].name,
extension: Imgfe.getFileExtension(files[i].name),
size: Imgfe.formatFileSize(files[i].size),
width: width,
height: height,
resized_width: width,
resized_height: height,
rotate: 0,
sign: sign,
file: files[i]
}
Imgfe.imageFiles[item.id] = item;
var html = '<div id="'+item.id+'" class="image-file" data-file-size="'+item.size+'" data-width="'+width+'" data-height="'+height+'">';
html += '<div class="image-file__action">';
html += '<div class="icon-btn rotate" data-file-id="'+item.id+'"><svg width="20" height="20" fill="currentColor"><use href="#icon-rotate"></use></svg></div>';
html += '<div class="icon-btn remove" data-file-id="'+item.id+'"><svg width="20" height="20" fill="currentColor"><use href="#icon-close"></use></svg></div>';
html += '</div>';
html += '<div class="image-file__cover">';
if(Imgfe.isDisplayableImage(item.name)){
html += '<div style="background-image: url(\'' + URL.createObjectURL(files[i]) + '\');background-size: contain;"></div>';
}else{
html += '<div class="no-cover-name">'+ item.extension +'</div>';
}
html += '</div>';
html += '<div class="image-file__info">';
html += '<input data-file-id="'+item.id+'" type="text" class="image-file__info__name tiny-input" value="' + files[i].name + '" />';
if(operate === 'resize'){
html += '<div class="image-file__info__size">';
html += '<span class="image-file__info__size__box">' + width + ' x ' + height + '</span>';
html += '<span> -> </span>';
html += '<span class="image-file__info__size__box resized_size">' + width + ' x ' + height + '</span>';
html += '</div>';
}
html += '</div>';
html += '</div>';
$('#image-list').append(html);
tippy(`#${item.id}`, {
content: `${item.size} - ${item.width} x ${item.height}`
});
};
};
reader.readAsDataURL(files[i]);
}
}
})
}
};
var initLogin = function(){
$('#login-btn').click(function(){
var email = $('#email').val();
var password = $('#password').val();
if(email === '' || password === ''){
return;
}
$(this).prop('disabled', true);
$.ajax({
url: '/api/v1/auth/login',
type: 'POST',
data: {
email: email,
password: password,
lang: Imgfe.lang
},
success: function(res){
if(res.ret === 0){
Imgfe.succ(Imgfe.t['30']);
window.location.href = Imgfe.getPageUrl('/');
}else{
Imgfe.error(res.msg);
}
},
complete: function(){
$('#login-btn').prop('disabled', false);
}
});
});
}
var initSignup = function(){
$('#signup-btn').click(function(){
var email = $('#email').val();
var password = $('#password').val();
if(email === '' || password === ''){
return;
}
if(password.length < 6){
Imgfe.error(Imgfe.t['33']);
return;
}
$(this).prop('disabled', true);
$.ajax({
url: '/api/v1/auth/signup',
type: 'POST',
data: {
email: email,
password: password,
lang: Imgfe.lang
},
success: function(res){
if(res.ret === 0){
Imgfe.succ(Imgfe.t['31']);
window.location.href = Imgfe.getPageUrl('/');
}else{
Imgfe.error(res.msg);
}
},
complete: function(){
$('#signup-btn').prop('disabled', false);
}
});
});
}
var initCompress = function(){
$('.btn-start').click(function(){
console.log(Imgfe.imageFiles)
var imgIds = [];
const formData = new FormData();
for (var imgId in Imgfe.imageFiles) {
if (Imgfe.imageFiles.hasOwnProperty(imgId)) {
imgIds.push(imgId);
var file = Imgfe.imageFiles[imgId];
formData.append(imgId + '_name', Imgfe.fixFilename(file.name));
formData.append(imgId + '_extension', file.extension);
formData.append(imgId + '_rotate', file.rotate);
formData.append(imgId + '_file', file.file);
}
}
if(imgIds.length === 0){
return;
}
formData.append('img_ids', imgIds.join('_'));
formData.append('upload_token', Imgfe.uploadToken);
$('.stage .upload-container').hide();
$('.stage .workbench').hide();
$('.stage .side-tools').hide();
$('.stage .sidebar').hide();
$('.stage .processing-container').show();
$.ajax({
url: 'https://imgfe-job.iupdown.com/upload.php',
type: 'POST',
data: formData,
contentType: false,
processData: false,
xhr: function() {
var xhr = new window.XMLHttpRequest();
// 监听上传进度
xhr.upload.addEventListener('progress', function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total * 100;
$('#progress-bar').css('width', percentComplete + '%');
$('#progress-text').text(percentComplete.toFixed(2) + '%');
}
}, false);
return xhr;
},
success: function(res){
$('.stage .processing-container .title').html(Imgfe.t['49'])
$('.stage .processing-container .progress-container').hide();
$('.stage .processing-container .loading-container').show();
if(res.ret === 0){
$.ajax({
url: 'https://imgfe-job.iupdown.com/compress-images.php',
type: 'POST',
data: {
job_id: res.data.job_id,
lang: Imgfe.lang
},
success: function(res){
console.log('2', res);
if(res.ret === 0){
$('.stage .processing-container').hide();
$('.stage .download-container').show();
Imgfe.jobInfo = res.data.job_info;
$('.btn-download').attr('data-job-id', Imgfe.jobInfo.job_id);
$('#donut-segment').css('stroke-dasharray', Imgfe.jobInfo.saved_percent + ', ' + (100 - Imgfe.jobInfo.saved_percent));
$('.compress-info .chart-number').html('-' + Imgfe.jobInfo.saved_percent + '%');
$('#result-text1').html(Imgfe.t['50'].replace('{0}', Imgfe.jobInfo.saved_percent + '%'));
$('#result-text2').html(Imgfe.formatFileSize(Imgfe.jobInfo.original_size) + ' -> ' + Imgfe.formatFileSize(Imgfe.jobInfo.compressed_size));
window.location.href = 'https://imgfe-job.iupdown.com/download.php?job_id=' + Imgfe.jobInfo.job_id;
}else{
Imgfe.error(res.msg);
}
}
});
}else{
Imgfe.error(res.msg);
}
}
});
});
Imgfe.initUpload('compress');
}
var initConvert = function(){
$('.btn-start').click(function(){
console.log(Imgfe.imageFiles)
var imgIds = [];
const formData = new FormData();
for (var imgId in Imgfe.imageFiles) {
if (Imgfe.imageFiles.hasOwnProperty(imgId)) {
imgIds.push(imgId);
var file = Imgfe.imageFiles[imgId];
formData.append(imgId + '_name', Imgfe.fixFilename(file.name));
formData.append(imgId + '_extension', file.extension);
formData.append(imgId + '_rotate', file.rotate);
formData.append(imgId + '_file', file.file);
}
}
if(imgIds.length === 0){
return;
}
formData.append('img_ids', imgIds.join('_'));
formData.append('upload_token', Imgfe.uploadToken);
$('.stage .upload-container').hide();
$('.stage .workbench').hide();
$('.stage .side-tools').hide();
$('.stage .sidebar').hide();
$('.stage .processing-container').show();
$.ajax({
url: 'https://imgfe-job.iupdown.com/upload.php',
type: 'POST',
data: formData,
contentType: false,
processData: false,
xhr: function() {
var xhr = new window.XMLHttpRequest();
// 监听上传进度
xhr.upload.addEventListener('progress', function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total * 100;
$('#progress-bar').css('width', percentComplete + '%');
$('#progress-text').text(percentComplete.toFixed(2) + '%');
}
}, false);
return xhr;
},
success: function(res){
$('.stage .processing-container .title').html(Imgfe.t['71'])
$('.stage .processing-container .progress-container').hide();
$('.stage .processing-container .loading-container').show();
if(res.ret === 0){
$.ajax({
url: 'https://imgfe-job.iupdown.com/convert-images.php',
type: 'POST',
data: {
job_id: res.data.job_id,
format: $('#converted_format').val(),
lang: Imgfe.lang
},
success: function(res){
console.log('2', res);
if(res.ret === 0){
$('.stage .processing-container').hide();
$('.stage .download-container').show();
Imgfe.jobInfo = res.data.job_info;
$('.btn-download').attr('data-job-id', Imgfe.jobInfo.job_id);
window.location.href = 'https://imgfe-job.iupdown.com/download.php?job_id=' + Imgfe.jobInfo.job_id;
}else{
Imgfe.error(res.msg);
}
}
});
}else{
Imgfe.error(res.msg);
}
}
});
});
Imgfe.initUpload('convert');
}
var initResize = function(){
Imgfe.resize_type = 'pix';
Imgfe.resized_width = '';
Imgfe.resized_height = '';
Imgfe.resized_percent = 50;
Imgfe.maintain_ratio = true;
Imgfe.no_enlarge = false;
Imgfe.trigger_change = true;
Imgfe.tabCallback = function(tab){
if(tab === 'pix') {
}if(tab === 'percent'){
applyPercent(Imgfe.resized_percent);
}
};
var applyPercent = function(percent){
Object.keys(Imgfe.imageFiles).forEach(function(imgId){
const img = Imgfe.imageFiles[imgId];
const width = Math.round(img.width - img.width * percent / 100);
const height = Math.round(img.height - img.height * percent / 100);
Imgfe.imageFiles[imgId].resized_width = width;
Imgfe.imageFiles[imgId].resized_height = height;
$('#' + img.id + ' .resized_size').html(width + ' x ' + height);
})
}
$('#percent_value').on('input', function(e) {
const percent = e.target.value;
Imgfe.resized_percent = percent;
$('#percent_tips').html(Imgfe.t['82'].replace('{0}', percent));
applyPercent(percent);
});
Imgfe.numberChanged('#pix_width', function(width){
if(!Imgfe.trigger_change){
return;
}
Imgfe.trigger_change = false;
const multiImages = Object.keys(Imgfe.imageFiles).length > 1;
if(Imgfe.maintain_ratio){
if(multiImages){
Imgfe.resized_height = '';
$('#pix_height').val('');
Object.keys(Imgfe.imageFiles).forEach(function(imgId){
const img = Imgfe.imageFiles[imgId];
const ratio = img.width / img.height;
Imgfe.imageFiles[imgId].resized_width = width;
if(Imgfe.no_enlarge && width > img.width){
Imgfe.imageFiles[imgId].resized_width = img.width;
}
Imgfe.imageFiles[imgId].resized_height = Math.round(width / ratio);
if(Imgfe.no_enlarge && Imgfe.imageFiles[imgId].resized_height > img.height){
Imgfe.imageFiles[imgId].resized_height = img.height;
}
$('#' + img.id + ' .resized_size').html(Imgfe.imageFiles[imgId].resized_width + ' x ' + Imgfe.imageFiles[imgId].resized_height);
})
}else{
Object.keys(Imgfe.imageFiles).forEach(function(imgId){
const img = Imgfe.imageFiles[imgId];
const ratio = img.width / img.height;
Imgfe.imageFiles[imgId].resized_width = width;
if(Imgfe.no_enlarge && width > img.width){
Imgfe.imageFiles[imgId].resized_width = img.width;
}
Imgfe.imageFiles[imgId].resized_height = Math.round(width / ratio);
if(Imgfe.no_enlarge && Imgfe.imageFiles[imgId].resized_height > img.height){
Imgfe.imageFiles[imgId].resized_height = img.height;
}
$('#' + img.id + ' .resized_size').html(Imgfe.imageFiles[imgId].resized_width + ' x ' + Imgfe.imageFiles[imgId].resized_height);
Imgfe.resized_height = Imgfe.imageFiles[imgId].resized_height;
$('#pix_height').val(Imgfe.imageFiles[imgId].resized_height);
})
}
}else{
Object.keys(Imgfe.imageFiles).forEach(function (imgId) {
const img = Imgfe.imageFiles[imgId];
Imgfe.imageFiles[imgId].resized_width = width;
if(Imgfe.no_enlarge && width > img.width){
Imgfe.imageFiles[imgId].resized_width = img.width;
}
$('#' + img.id + ' .resized_size').html(Imgfe.imageFiles[imgId].resized_width + ' x ' + Imgfe.imageFiles[imgId].resized_height);
})
}
Imgfe.trigger_change = true;
});
Imgfe.numberChanged('#pix_height', function(height){
if(!Imgfe.trigger_change){
return;
}
Imgfe.trigger_change = false;
const multiImages = Object.keys(Imgfe.imageFiles).length > 1;
if(Imgfe.maintain_ratio){
if(multiImages){
Imgfe.resized_width = '';
$('#pix_width').val('');
Object.keys(Imgfe.imageFiles).forEach(function(imgId){
const img = Imgfe.imageFiles[imgId];
const ratio = img.width / img.height;
Imgfe.imageFiles[imgId].resized_height = height;
if(Imgfe.no_enlarge && height > img.height){
Imgfe.imageFiles[imgId].resized_height = img.height;
}
Imgfe.imageFiles[imgId].resized_width = Math.round(height * ratio);
if(Imgfe.no_enlarge && Imgfe.imageFiles[imgId].resized_width > img.width){
Imgfe.imageFiles[imgId].resized_width = img.width;
}
$('#' + img.id + ' .resized_size').html(Imgfe.imageFiles[imgId].resized_width + ' x ' + Imgfe.imageFiles[imgId].resized_height);
})
}else{
Object.keys(Imgfe.imageFiles).forEach(function(imgId){
const img = Imgfe.imageFiles[imgId];
const ratio = img.width / img.height;
Imgfe.imageFiles[imgId].resized_height = height;
if(Imgfe.no_enlarge && height > img.height){
Imgfe.imageFiles[imgId].resized_height = img.height;
}
Imgfe.imageFiles[imgId].resized_width = Math.round(height * ratio);
if(Imgfe.no_enlarge && Imgfe.imageFiles[imgId].resized_width > img.width){
Imgfe.imageFiles[imgId].resized_width = img.width;
}
$('#' + img.id + ' .resized_size').html(Imgfe.imageFiles[imgId].resized_width + ' x ' + Imgfe.imageFiles[imgId].resized_height);
Imgfe.resized_width = Imgfe.imageFiles[imgId].resized_width;
$('#pix_width').val(Imgfe.imageFiles[imgId].resized_width);
})
}
}else{
Object.keys(Imgfe.imageFiles).forEach(function (imgId) {
const img = Imgfe.imageFiles[imgId];
Imgfe.imageFiles[imgId].resized_height = height;
if(Imgfe.no_enlarge && height > img.height){
Imgfe.imageFiles[imgId].resized_height = img.height;
}
$('#' + img.id + ' .resized_size').html(Imgfe.imageFiles[imgId].resized_width + ' x ' + Imgfe.imageFiles[imgId].resized_height);
})
}
Imgfe.trigger_change = true;
});
$('#maintain_ratio').on('change', function() {
if ($(this).is(':checked')) {
Imgfe.maintain_ratio = true;
} else {
Imgfe.maintain_ratio = false;
}
});
$('#no_enlarge').on('change', function() {
if ($(this).is(':checked')) {
Imgfe.no_enlarge = true;
} else {
Imgfe.no_enlarge = false;
}
});
$('.btn-start').click(function(){
var imgIds = [];
const formData = new FormData();
for (var imgId in Imgfe.imageFiles) {
if (Imgfe.imageFiles.hasOwnProperty(imgId)) {
imgIds.push(imgId);
var file = Imgfe.imageFiles[imgId];
formData.append(imgId + '_name', Imgfe.fixFilename(file.name));
formData.append(imgId + '_extension', file.extension);
formData.append(imgId + '_rotate', file.rotate);
formData.append(imgId + '_resized_width', file.resized_width);
formData.append(imgId + '_resized_height', file.resized_height);
formData.append(imgId + '_file', file.file);
}
}
if(imgIds.length === 0){
return;
}
formData.append('img_ids', imgIds.join('_'));
formData.append('upload_token', Imgfe.uploadToken);
$('.stage .upload-container').hide();
$('.stage .workbench').hide();
$('.stage .side-tools').hide();
$('.stage .sidebar').hide();
$('.stage .processing-container').show();
$.ajax({
url: 'https://imgfe-job.iupdown.com/upload.php',
type: 'POST',
data: formData,
contentType: false,
processData: false,
xhr: function() {
var xhr = new window.XMLHttpRequest();
// 监听上传进度
xhr.upload.addEventListener('progress', function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total * 100;
$('#progress-bar').css('width', percentComplete + '%');
$('#progress-text').text(percentComplete.toFixed(2) + '%');
}
}, false);
return xhr;
},
success: function(res){
$('.stage .processing-container .title').html(Imgfe.t['72'])
$('.stage .processing-container .progress-container').hide();
$('.stage .processing-container .loading-container').show();
if(res.ret === 0){
$.ajax({
url: 'https://imgfe-job.iupdown.com/resize-images.php',
type: 'POST',
data: {
job_id: res.data.job_id,
lang: Imgfe.lang
},
success: function(res){
if(res.ret === 0){
$('.stage .processing-container').hide();
$('.stage .download-container').show();
Imgfe.jobInfo = res.data.job_info;
$('.btn-download').attr('data-job-id', Imgfe.jobInfo.job_id);
window.location.href = 'https://imgfe-job.iupdown.com/download.php?job_id=' + Imgfe.jobInfo.job_id;
}else{
Imgfe.error(res.msg);
}
}
});
}else{
Imgfe.error(res.msg);
}
}
});
});
Imgfe.initUpload('resize');
}
var initCrop = function(){
var trigger_change = true;
var file = null;
var cropper = null;
var crop_x = $('#crop_x');
var crop_y = $('#crop_y');
var crop_width = $('#crop_width');
var crop_height = $('#crop_height');
var setCropBox = function(x, y, width, height){
var values = cropper.getCropBoxData();
cropper.setCropBoxData({
left: x ? parseInt(x, 10) : values.left,
top: y ? parseInt(y, 10) : values.top,
width: width ? parseInt(width, 10) : values.width,
height: height ? parseInt(height, 10) : values.height
});
}
Imgfe.numberChanged('#crop_x', function(value){
setCropBox(value, null, null, null);
});
Imgfe.numberChanged('#crop_y', function(value){
setCropBox(null, value, null, null);
});
Imgfe.numberChanged('#crop_width', function(value){
setCropBox(null, null, value, null);
});
Imgfe.numberChanged('#crop_height', function(value){
setCropBox(null, null, null, value);
});
$('input[type="file"]').change(function(e) {
var files = e.target.files;
if (files.length > 0) {
if(cropper){
cropper.destroy();
}
file = files[0];
$('.stage .upload-container').hide();
$('.stage .workbench').show();
$('.stage .side-tools').show();
$('.stage .sidebar').css('display', 'flex');
const reader = new FileReader();
reader.onload = function (e) {
const img = new Image();
img.src = e.target.result;
img.onload = function () {
const width = img.width;
const height = img.height;
var displayWidth = width;
if (width > 800) {
displayWidth = 800;
}
if (width < 200) {
displayWidth = 200;
}
crop_x.attr('max', width - 10);
crop_y.attr('max', height - 10);
crop_width.attr('max', width);
crop_height.attr('max', height);
$('#image-wrapper').css('width', displayWidth + 'px');
$('#image-wrapper img').css('width', displayWidth + 'px');
$('#image-wrapper img').attr('src', URL.createObjectURL(files[0]));
cropper = new Cropper($('#image-wrapper img').get(0), {
viewMode: 1,
background: false,
zoomable: false,
scalable: false,
crop: function (e) {
crop_x.val(Math.round(e.detail.x));
crop_y.val(Math.round(e.detail.y));
crop_width.val(Math.round(e.detail.width));
crop_height.val(Math.round(e.detail.height));
}
});
}
}
reader.readAsDataURL(files[0]);
}
});
$('.btn-start').click(function(){
if(!file){
return;
}
const formData = new FormData();
var imgId = Imgfe.random(8);
formData.append(imgId + '_name', Imgfe.fixFilename(file.name));
formData.append(imgId + '_extension', Imgfe.getFileExtension(file.name));
formData.append(imgId + '_rotate', 0);
formData.append(imgId + '_cropped_x', crop_x.val());
formData.append(imgId + '_cropped_y', crop_y.val());
formData.append(imgId + '_cropped_width', crop_width.val());
formData.append(imgId + '_cropped_height', crop_height.val());
formData.append(imgId + '_file', file);
formData.append('img_ids', imgId);
formData.append('upload_token', Imgfe.uploadToken);
$('.stage .upload-container').hide();
$('.stage .workbench').hide();
$('.stage .side-tools').hide();
$('.stage .sidebar').hide();
$('.stage .processing-container').show();
$.ajax({
url: 'https://imgfe-job.iupdown.com/upload.php',
type: 'POST',
data: formData,
contentType: false,
processData: false,
xhr: function() {
var xhr = new window.XMLHttpRequest();
// 监听上传进度
xhr.upload.addEventListener('progress', function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total * 100;
$('#progress-bar').css('width', percentComplete + '%');
$('#progress-text').text(percentComplete.toFixed(2) + '%');
}
}, false);
return xhr;
},
success: function(res){
$('.stage .processing-container .title').html(Imgfe.t['95'])
$('.stage .processing-container .progress-container').hide();
$('.stage .processing-container .loading-container').show();
if(res.ret === 0){
$.ajax({
url: 'https://imgfe-job.iupdown.com/crop-image.php',
type: 'POST',
data: {
job_id: res.data.job_id,
lang: Imgfe.lang
},
success: function(res){
console.log('2', res);
if(res.ret === 0){
$('.stage .processing-container').hide();
$('.stage .download-container').show();
Imgfe.jobInfo = res.data.job_info;
$('.btn-download').attr('data-job-id', Imgfe.jobInfo.job_id);
window.location.href = 'https://imgfe-job.iupdown.com/download.php?job_id=' + Imgfe.jobInfo.job_id;
}else{
Imgfe.error(res.msg);
}
}
});
}else{
Imgfe.error(res.msg);
}
}
});
});
Imgfe.initRestart();
Imgfe.initDeleteJob();
}
var initRemoveBg = () => {
var base64Img = null;
var imgName = null;
$('input[type="file"]').change(function(e) {
var files = e.target.files;
if (files.length > 0) {
if(files[0].size > 5000000){
Imgfe.error(Imgfe.t['98']);
return;
}
$('.stage .upload-container').hide();
$('.stage .workbench').show();
$('.stage .side-tools').show();
$('.stage .sidebar').css('display', 'flex');
$('.global-loading').css('display', 'flex');
var file = files[0];
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.onload = function() {
const width = img.width;
const height = img.height;
var displayWidth = width;
if (width > 800) {
displayWidth = 800;
}
if (width < 200) {
displayWidth = 200;
}
$('#image-comparison').css('width', displayWidth + 'px');
$('#image-comparison img').attr('src', URL.createObjectURL(file));
var viewer = new window.ImageCompare(document.getElementById('image-comparison'), {
}).mount();
}
img.src = e.target.result;
}
reader.readAsDataURL(file);
imgName = Imgfe.getFileNameNoExt(file.name) + '_rmbg.' + Imgfe.getFileExtension(file.name);
const formData = new FormData();
var imgId = Imgfe.random(8);
formData.append(imgId + '_name', Imgfe.fixFilename(file.name));
formData.append(imgId + '_extension', Imgfe.getFileExtension(file.name));
formData.append(imgId + '_rotate', 0);
formData.append(imgId + '_file', file);
formData.append('img_ids', imgId);
formData.append('upload_token', Imgfe.uploadToken);
$.ajax({
url: 'https://imgfe-job.iupdown.com/upload.php',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function (res) {
$('.stage .processing-container .title').html(Imgfe.t['49'])
$('.stage .processing-container .progress-container').hide();
$('.stage .processing-container .loading-container').show();
if (res.ret === 0) {
$.ajax({
url: 'https://imgfe-job.iupdown.com/remove-background.php',
type: 'POST',
data: {
job_id: res.data.job_id,
lang: Imgfe.lang
},
success: function (res) {
console.log('2', res);
$('.global-loading').css('display', 'none');
if (res.ret === 0) {
base64Img = res.data.image;
$('#image-comparison img.second').attr('src', 'data:image/png;base64,' + res.data.image);
}else{
Imgfe.error(res.msg);
}
}
});
} else {
Imgfe.error(res.msg);
}
}
});
}
});
$('.btn-start').click(function() {
if (!base64Img) {
return;
}
const link = document.createElement('a');
link.href = "data:image/png;base64," + base64Img;
link.download = imgName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
}
var initRotate = () => {
var rotateAll = (deg_delta = null, deg_to = null) => {
for (var imgId in Imgfe.imageFiles) {
if(deg_delta !== null) {
Imgfe.imageFiles[imgId].rotate += deg_delta;
}
if(deg_to !== null) {
Imgfe.imageFiles[imgId].rotate = deg_to;
}
$('#' + imgId + ' .image-file__cover').css('transform', 'rotate(' + Imgfe.imageFiles[imgId].rotate + 'deg)');
}
}
$('#rotate-right').click(function(){
rotateAll(90);
});
$('#rotate-left').click(function(){
rotateAll(-90);
});
$('#rotate-reset').click(function(){
rotateAll(null, 0);
});
$('.btn-start').click(function(){
console.log(Imgfe.imageFiles)
var imgIds = [];
const formData = new FormData();
for (var imgId in Imgfe.imageFiles) {
if (Imgfe.imageFiles.hasOwnProperty(imgId)) {
imgIds.push(imgId);
var file = Imgfe.imageFiles[imgId];
formData.append(imgId + '_name', Imgfe.fixFilename(file.name));
formData.append(imgId + '_extension', file.extension);
formData.append(imgId + '_rotate', file.rotate);
formData.append(imgId + '_file', file.file);
}
}
if(imgIds.length === 0){
return;
}
formData.append('img_ids', imgIds.join('_'));
formData.append('upload_token', Imgfe.uploadToken);
$('.stage .upload-container').hide();
$('.stage .workbench').hide();
$('.stage .side-tools').hide();
$('.stage .sidebar').hide();
$('.stage .processing-container').show();
$.ajax({
url: 'https://imgfe-job.iupdown.com/upload.php',
type: 'POST',
data: formData,
contentType: false,
processData: false,
xhr: function() {
var xhr = new window.XMLHttpRequest();
// 监听上传进度
xhr.upload.addEventListener('progress', function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total * 100;
$('#progress-bar').css('width', percentComplete + '%');
$('#progress-text').text(percentComplete.toFixed(2) + '%');
}
}, false);
return xhr;
},
success: function(res){
$('.stage .processing-container .title').html(Imgfe.t['102'])
$('.stage .processing-container .progress-container').hide();
$('.stage .processing-container .loading-container').show();
if(res.ret === 0){
$.ajax({
url: 'https://imgfe-job.iupdown.com/rotate-images.php',
type: 'POST',
data: {
job_id: res.data.job_id,
format: $('#converted_format').val(),
lang: Imgfe.lang
},
success: function(res){
console.log('2', res);
if(res.ret === 0){
$('.stage .processing-container').hide();
$('.stage .download-container').show();
Imgfe.jobInfo = res.data.job_info;
$('.btn-download').attr('data-job-id', Imgfe.jobInfo.job_id);
window.location.href = 'https://imgfe-job.iupdown.com/download.php?job_id=' + Imgfe.jobInfo.job_id;
}else{
Imgfe.error(res.msg);
}
}
});
}else{
Imgfe.error(res.msg);
}
}
});
});
Imgfe.initUpload('rotate');
Imgfe.initRestart();
Imgfe.initDeleteJob();
}
var initBlur = () => {
$('.btn-start').click(function(){
console.log(Imgfe.imageFiles)
var imgIds = [];
const formData = new FormData();
for (var imgId in Imgfe.imageFiles) {
if (Imgfe.imageFiles.hasOwnProperty(imgId)) {
imgIds.push(imgId);
var file = Imgfe.imageFiles[imgId];
formData.append(imgId + '_name', Imgfe.fixFilename(file.name));
formData.append(imgId + '_extension', file.extension);
formData.append(imgId + '_rotate', file.rotate);
formData.append(imgId + '_blur_radius', $('#blur_radius').val());
formData.append(imgId + '_blur_sigma', $('#blur_sigma').val());
formData.append(imgId + '_file', file.file);
}
}
if(imgIds.length === 0){
return;
}
formData.append('img_ids', imgIds.join('_'));
formData.append('upload_token', Imgfe.uploadToken);
$('.stage .upload-container').hide();
$('.stage .workbench').hide();
$('.stage .side-tools').hide();
$('.stage .sidebar').hide();
$('.stage .processing-container').show();
$.ajax({
url: 'https://imgfe-job.iupdown.com/upload.php',
type: 'POST',
data: formData,
contentType: false,
processData: false,
xhr: function() {
var xhr = new window.XMLHttpRequest();
// 监听上传进度
xhr.upload.addEventListener('progress', function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total * 100;
$('#progress-bar').css('width', percentComplete + '%');
$('#progress-text').text(percentComplete.toFixed(2) + '%');
}
}, false);
return xhr;
},
success: function(res){
$('.stage .processing-container .title').html(Imgfe.t['102'])
$('.stage .processing-container .progress-container').hide();
$('.stage .processing-container .loading-container').show();
if(res.ret === 0){
$.ajax({
url: 'https://imgfe-job.iupdown.com/blur-images.php',
type: 'POST',
data: {
job_id: res.data.job_id,
format: $('#converted_format').val(),
lang: Imgfe.lang
},
success: function(res){
console.log('2', res);
if(res.ret === 0){
$('.stage .processing-container').hide();
$('.stage .download-container').show();
Imgfe.jobInfo = res.data.job_info;
$('.btn-download').attr('data-job-id', Imgfe.jobInfo.job_id);
window.location.href = 'https://imgfe-job.iupdown.com/download.php?job_id=' + Imgfe.jobInfo.job_id;
}else{
Imgfe.error(res.msg);
}
}
});
}else{
Imgfe.error(res.msg);
}
}
});
});
Imgfe.initUpload('blur');
}
initComm();
if(Imgfe.page === 'signup'){
initSignup();
}else if(Imgfe.page === 'login'){
initLogin();
}else if(Imgfe.page.indexOf('compress-images') > -1){
initCompress();
}else if(Imgfe.page.indexOf('convert-images') > -1){
initConvert();
}else if(Imgfe.page.indexOf('resize-images') > -1){
initResize();
}else if(Imgfe.page.indexOf('crop-image') > -1){
initCrop();
}else if(Imgfe.page.indexOf('remove-background') > -1){
initRemoveBg();
}else if(Imgfe.page.indexOf('rotate-images') > -1) {
initRotate();
}else if(Imgfe.page.indexOf('blur-images') > -1) {
initBlur();
}
</script>
</body>
</html>
Whois info of domain
Domain Name: IMGFE.COM
Registry Domain ID: 2914119987_DOMAIN_COM-VRSN
Registrar WHOIS Server: whois-service.virtualcloud.co
Registrar URL: http://sav.com
Updated Date: 2024-09-05T12:44:51Z
Creation Date: 2024-09-05T12:39:53Z
Registry Expiry Date: 2025-09-05T12:39:53Z
Registrar: Sav.com, LLC
Registrar IANA ID: 609
Registrar Abuse Contact Email: [email protected]
Registrar Abuse Contact Phone: +1.8885808790
Domain Status: clientTransferProhibited https://icann.org/epp#clientTransferProhibited
Name Server: ACHIEL.NS.CLOUDFLARE.COM
Name Server: WREN.NS.CLOUDFLARE.COM
DNSSEC: unsigned
URL of the ICANN Whois Inaccuracy Complaint Form: https://www.icann.org/wicf/
>>> Last update of whois database: 2025-04-29T14:46:55Z <<<
For more information on Whois status codes, please visit https://icann.org/epp
NOTICE: The expiration date displayed in this record is the date the
TERMS OF USE: You are not authorized to access or query our Whois
by the following terms of use: You agree that you may use this Data only
to: (1) allow, enable, or otherwise support the transmission of mass