-
Notifications
You must be signed in to change notification settings - Fork 1
/
image_editor_1.html
117 lines (108 loc) · 4.4 KB
/
image_editor_1.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
<!doctype html>
<html>
<head>
<title>Image Editor Example 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="https://yastatic.net/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="filters.js"></script>
<script type="text/javascript">
var canvas;
var loadedImage;
window.onload = function () {
setupFilters();
var canvasHolder = document.getElementById('canvasHolder');
var downloadHolder = document.getElementById('downloadHolder');
var uploader = document.getElementById('uploader');
// Загружаем файл
uploader.addEventListener('change', function (event) {
var file = event.target.files[0];
console.log('file name ' + file.name);
console.log('file size ' + file.size);
console.log('file type ' + file.type);
// Добавляем изображение в canvas
fileToCanvas(file, canvas);
});
};
function fileToCanvas (file) {
loadedImage = new Image();
loadedImage.addEventListener('load', function (event) {
URL.revokeObjectURL(loadedImage.src);
if (canvas) {
canvas.parentNode.removeChild(canvas);
}
canvas = document.createElement('canvas');
canvas.width = loadedImage.width;
canvas.height = loadedImage.height;
canvas.getContext("2d").drawImage(loadedImage, 0, 0);
canvasHolder.appendChild(canvas);
generateDownloadLink();
});
loadedImage.src = URL.createObjectURL(file);
}
function generateDownloadLink () {
downloadHolder.innerHTML = '<a class="btn btn-primary" href="' + canvas.toDataURL('image/png') + '" download=file.png>DOWNLOAD</a>';
}
function setupFilters () {
var buttons = document.getElementsByClassName('filter_button');
debugger;
Array.prototype.forEach.call(buttons, function (button) {
var path = filters[button.dataset.key];
var img = new Image();
img.src = path;
img.onload = function () {
button.onclick = function () {
setFilter(img);
};
};
button.style.backgroundImage = 'url("' + path + '")';
});
}
function setFilter (filterImg) {
if (canvas) {
var ctx = canvas.getContext("2d");
ctx.drawImage(loadedImage, 0, 0);
ctx.drawImage(filterImg, 0, 0, filterImg.width, filterImg.height, 0, 0, canvas.width, canvas.height);
generateDownloadLink();
}
}
</script>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 jumbotron">
<h1>Image editor</h1>
</div>
</div>
<div class="row">
<div class="col-md-6 mb20" style="text-align: center;">
<input type=file id=uploader accept="image/*" style="display: inline-block;" />
</div>
<div class="col-md-6 mb20" id="downloadHolder">
Здесь будет ссылка на скачивание файла
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Filters</h3>
</div>
<div class="panel-body" id="filters">
<div class=filter_button data-key="swamp"></div>
<div class=filter_button data-key="spectre"></div>
<div class=filter_button data-key="sky"></div>
<div class=filter_button data-key="orange"></div>
</div>
</div>
</div>
</div>
<div class=row>
<div class="col-md-12">
<div id="canvasHolder"></div>
</div>
</div>
</div>
</body>
</html>