0 / 0 / 0
Регистрация: 15.10.2022
Сообщений: 1
1

Обрезка фото на JavaScript без библиотек

15.10.2022, 23:41. Показов 1164. Ответов 1

Author24 — интернет-сервис помощи студентам
Всем привет! Есть программа с фильтрами на JavaScript, но хотелось бы добавить возможность обрезать фото, реализованную хоть как-нибудь (будь это перед размещением фотографии в Canvas или после, уже с фильтрами, не важно), заранее большое спасибо!
код:
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Simple Image Editor</title>
    <link rel="stylesheet" href=
"https://fonts.googleapis.com/icon?family=Material+Icons">
 
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    
    <!-- Import custom stylesheet -->
    <link rel="stylesheet" href="style.css">
 
    <!-- Compiled and minified JavaScript -->
    <script defer src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
    </script>
</head>
 
<body>
    <nav class="green">
        <div class="nav-wrapper container">
            <span class="nav-header">
            Simple Image Filters
            </span>
            <ul class="right image-save">
                <button class="btn btn-flat blue white-text"
                        onclick="saveImage()">
                Save
                </button>
                <button class="btn btn-flat red white-text"
                        onclick="resetImage()">
                Reset
                </button>
            </ul>
        </div>
    </nav>
 
    <!-- Hidden image that will be used for
    holding the source image -->
    <img id="sourceImage" crossorigin="anonymous">
 
    <div class="image-preview">
 
        <!-- Canvas that will hold the
        image to be edited -->
        <canvas id="canvas" height="0"></canvas>
    </div>
    <div class="container app">
 
        <!-- Text to be shown at the beginning
        of the application -->
        <div class="help-text center-align">
            <h5>Please Upload an Image to Start Editing</h5>
        </div>
 
        <!-- All the image controls that will be
        used for modifying the image -->
        <div class="image-controls">
            <h6>Image Controls</h6>
            <div class="row">
                <div class="col s6">
                    <span class="range-field">
                        <label for="brightnessSlider">
                        Brightness
                        </label>
                        <input id="brightnessSlider"
                            type="range" value="100"
                            min="0" max="300"
                            onchange="applyFilter()">
                    </span>
                </div>
                <div class="col s6">
                    <span class="range-field">
                        <label for="contrastSlider">
                        Contrast
                        </label>
                        <input id="contrastSlider"
                            type="range" value="100"
                            min="0" max="200"
                            onchange="applyFilter()">
                    </span>
                </div>
            </div>
 
            <div class="row">
                <div class="col s6">
                    <span class="range-field">
                        <label for="grayscaleSlider">
                        Grayscale
                        </label>
                        <input id="grayscaleSlider"
                            type="range" value="0"
                            min="0" max="100"
                            onchange="applyFilter()">
                    </span>
                </div>
                <div class="col s6">
                    <span class="range-field">
                        <label for="saturationSlider">
                        Saturation
                        </label>
                        <input id="saturationSlider"
                            type="range" value="100"
                            min="0" max="300"
                            onchange="applyFilter()">
                    </span>
                </div>
            </div>
 
            <div class="row">
                <div class="col s6">
                    <span class="range-field">
                        <label for="sepiaSlider">
                        Sepia
                        </label>
                        <input id="sepiaSlider"
                            type="range" value="0"
                            min="0" max="200"
                            onchange="applyFilter()">
                    </span>
                </div>
                <div class="col s6">
                    <span class="range-field">
                        <label for="hueRotateSlider">
                        Hue
                        </label>
                        <input id="hueRotateSlider"
                            type="range" value="0"
                            min="0" max="360"
                            onchange="applyFilter()">
                    </span>
                </div>
            </div>
        </div>
 
        <!-- Buttons that will be used to change
        the values to preset ones -->
        <div class="preset-filters">
            <h6>Preset Filters</h6>
            <button class="btn green"
                    onclick="brightenFilter()">
            Brighten
            </button>
            <button class="btn green"
                    onclick="bwFilter()">
            Black and White
            </button>
            <button class="btn green"
                    onclick="funkyFilter()">
            Funky
            </button>
            <button class="btn green"
                    onclick="vintageFilter()">
            Vintage
            </button>
        </div>
            
        <!-- File control to upload a new file -->
        <div class="file-controls">
            <h6>File Controls</h6>
            
            <!-- Element that will be later used to download
            the canvas image from code -->
            <a id="link"></a>
            
            <!-- File Selector for uploading the image -->
            <div class="file-field input-field">
                <div class="btn green">
                    <span>Upload Image</span>
                    <input type="file" accept="image/*"
                        onchange="uploadImage(event)">
                </div>
                <div class="file-path-wrapper">
                    <input class="file-path" type="text">
                </div>
            </div>
        </div>
    </div>
    <style>
        .nav-header {
    font-size: 1.5rem;
}
 
.row {
    margin-bottom: 0;
}
 
#sourceImage,
.image-controls,
.image-save,
.preset-filters {
    display: none;
}
 
.image-preview {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
 
#canvas {
    max-height: 420px;
    object-fit: contain;
}
 
    </style>
    <!-- Load the script for the editor -->
    <script src="app.js"></script>
<script>
        // Get the source image to be edited
let image = document.getElementById('sourceImage');
 
// Get the canvas for the edited image
let canvas = document.getElementById('canvas');
 
// Get the 2D context of the image
let context = canvas.getContext('2d');
 
// Get all the sliders of the image
let brightnessSlider = document.getElementById("brightnessSlider");
let contrastSlider = document.getElementById("contrastSlider");
let grayscaleSlider = document.getElementById("grayscaleSlider");
let hueRotateSlider = document.getElementById("hueRotateSlider");
let saturateSlider = document.getElementById("saturationSlider");
let sepiaSlider = document.getElementById("sepiaSlider");
function uploadImage(event) {
 
    // Set the source of the image from the uploaded file
    image.src = URL.createObjectURL(event.target.files[0]);
 
    image.onload = function () {
        // Set the canvas the same width and height of the image
        canvas.width = this.width;
        canvas.height = this.height;
        canvas.crossOrigin = "anonymous";
        applyFilter();
    };
 
    // Show the image editor controls and hide the help text
    document.querySelector('.help-text').style.display = "none";
    document.querySelector('.image-save').style.display = "block";
    document.querySelector('.image-controls').style.display = "block";
    document.querySelector('.preset-filters').style.display = "block";
};
// This function is used to update the image
// along with all the filter values
function applyFilter() {
 
    // Create a string that will contain all the filters
    // to be used for the image
    let filterString =
        "brightness(" + brightnessSlider.value + "%" +
        ") contrast(" + contrastSlider.value + "%" +
        ") grayscale(" + grayscaleSlider.value + "%" +
        ") saturate(" + saturateSlider.value + "%" +
        ") sepia(" + sepiaSlider.value + "%" +
        ") hue-rotate(" + hueRotateSlider.value + "deg" + ")";
 
    // Apply the filter to the image
    context.filter = filterString;
 
    // Draw the edited image to canvas
    context.drawImage(image, 0, 0);
}
// A series of functions that handle the preset filters
// Each of these will first reset the image
// and then apply a certain parameter before
// redrawing the image
function brightenFilter() {
    resetImage();
    brightnessSlider.value = 130;
    contrastSlider.value = 120;
    saturateSlider.value = 120;
    applyFilter();
}
 
function bwFilter() {
    resetImage();
    grayscaleSlider.value = 100;
    brightnessSlider.value = 120;
    contrastSlider.value = 120;
    applyFilter();
}
 
function funkyFilter() {
    resetImage();
 
    // Set a random hue rotation everytime
    hueRotateSlider.value =
        Math.floor(Math.random() * 360) + 1;
    contrastSlider.value = 120;
    applyFilter();
}
 
function vintageFilter() {
    resetImage();
    brightnessSlider.value = 120;
    saturateSlider.value = 120;
    sepiaSlider.value = 150;
    applyFilter();
}
 
    </script>
</body>
 
</html>
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
15.10.2022, 23:41
Ответы с готовыми решениями:

Почему сейчас так модно переходить на javascript без использования библиотек?
Здравствуйте, я начинающий веб-разработчик, работаю на поддержке одного единственного проекта,...

Обрезка фото
есть функция которая режет изображение, делает его меньшего веса, и есть код который сохраняет фото...

Обрезка фото по кругу
Доброго времени суток! Подскажите как сделать круговую обрезку фото, пошагово. Желательно...

Простейшая обрезка фото
Доброе время суток! Вот поместил я загруженное фото в папку и назвал ее move_uploaded_file(...

1
Модератор
Эксперт JS
6279 / 3518 / 1050
Регистрация: 07.09.2019
Сообщений: 5,664
Записей в блоге: 1
16.10.2022, 23:27 2
Обрезку можно осуществить, передав подходящие координаты методу drawImage.
0
16.10.2022, 23:27
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
16.10.2022, 23:27
Помогаю со студенческими работами здесь

Обрезка фото для миниатюр
у меня в скрипте создаются миниатюры: $img_width = imageSX ($img); $img_height = imageSY...

Обрезка фото с заданной зоной
Всем привет. Может кто знает способы или знает где поискать следующее: Мне нужно обрезать фото но...

Автоматическая обрезка и выравнивание фото
Всем привет! Имеем фотографию, на ней есть фигуры, к примеру квадраты с белым фоном и текстом,...

Обрезка необходимого объекта на фото (рентген)
Добрый вечер! Понимаю, что мой вопрос прост, но я все же нуб в фотошопе, поэтому, буду признателен,...

Не работает обрезка и отправка фото в бд php js
Всем привет. Скачал готовые croppie скрипты, чтобы пользователь обрезал фото при загрузке в базу...

Обрезка фото на клиентской части с последующей загрузкой в БД
Здравствуйте! Помогите, пожалуйста. Пользователь должен загрузить выбранную им картинку с...

Обрезка картинки по средством javascript
Можно ли с помощью js обрезать существующую картинку (уже загруженную через html-тег &lt;img&gt;) таким...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru