mirror of https://github.com/CIRCL/AIL-framework
chg: [show domain screenshots] replace canevas by img blur
terrtia
parent
aca877b6ab
commit
a5a2f90e8b
|
|
@ -423,12 +423,16 @@
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="text-center">
|
|
||||||
{%if item['crawler']["screenshot"]%}
|
{%if item['crawler']["screenshot"]%}
|
||||||
<span class="icon_img" onclick="reload_image('{{ item['crawler']["screenshot"] }}', '{{ item['crawler']["url"] }}', '{{ item["id"] }}');" id="{{ item['crawler']["screenshot"].replace('/', '') }}">
|
<td class="text-center icon_img" title="Show Screenshot" onclick="reload_image('{{ item['crawler']["screenshot"] }}', '{{ item['crawler']["url"] }}', '{{ item["id"] }}');" id="{{ item['crawler']["screenshot"].replace('/', '') }}">
|
||||||
|
<span class="">
|
||||||
<i class="far fa-image"></i>
|
<i class="far fa-image"></i>
|
||||||
{%endif%}
|
</span>
|
||||||
</td>
|
</td>
|
||||||
|
{% else %}
|
||||||
|
<td></td>
|
||||||
|
{%endif%}
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
|
|
@ -474,32 +478,12 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12 col-xl-6">
|
<div class="col-12 col-xl-6">
|
||||||
<div class="card my-2" style="background-color:#ecf0f1;">
|
{# button usafe if not tag safe <i class="fas fa-exclamation-triangle"></i> #}
|
||||||
<div class="card-body py-2">
|
|
||||||
<div class="row">
|
<div class="mt-2">
|
||||||
<div class="col-md-3 text-center">
|
{% include 'objects/image/block_blur_img_slider.html' %}
|
||||||
<button class="btn {%if dict_domain['tags_safe']%}btn-primary{%else%}btn-danger{%endif%}" onclick="blocks.value=0;pixelate();">
|
|
||||||
<i class="fas fa-eye-slash"></i>
|
|
||||||
<span class="label-icon">Hide</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6">
|
<span><img class="object_image mb-1" style="width: 100%;" alt="" id="domain_screenshot"></span>
|
||||||
<input class="custom-range mt-2" id="blocks" type="range" min="1" max="50" value="{%if dict_domain['tags_safe']%}13{%else%}0{%endif%}">
|
|
||||||
</div>
|
|
||||||
<div class="col-md-3 text-center">
|
|
||||||
<button class="btn {%if dict_domain['tags_safe']%}btn-primary{%else%}btn-danger{%endif%}" onclick="blocks.value=50;pixelate();">
|
|
||||||
{%if dict_domain['tags_safe']%}
|
|
||||||
<i class="fas fa-plus-square"></i>
|
|
||||||
{%else%}
|
|
||||||
<i class="fas fa-exclamation-triangle"></i>
|
|
||||||
{%endif%}
|
|
||||||
<span class="label-icon">Full resolution</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<canvas id="canvas" style="width:100%;"></canvas>
|
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<small class="text-info" style="line-height:0.9;">
|
<small class="text-info" style="line-height:0.9;">
|
||||||
<a target="_blank" href="" id="screenshot_link"></a>
|
<a target="_blank" href="" id="screenshot_link"></a>
|
||||||
|
|
@ -557,69 +541,42 @@ function toggle_sidebar(){
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var ctx = canvas.getContext('2d'), img = new Image();
|
{% if not dict_domain['tags_safe'] %}
|
||||||
var base_url = "{{ url_for('objects_item.screenshot', filename="") }}";
|
blur_unsafe();
|
||||||
var screenshot_href = "{{ url_for('objects_item.showItem') }}?id=";
|
{% else %}
|
||||||
|
blur_images();
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
/// turn off image smoothing
|
|
||||||
ctx.webkitImageSmoothingEnabled = false;
|
|
||||||
ctx.imageSmoothingEnabled = false;
|
|
||||||
|
|
||||||
img.onload = pixelate;
|
|
||||||
img.addEventListener("error", img_error);
|
const base_url = "{{ url_for('objects_item.screenshot', filename="") }}";
|
||||||
var draw_img = false;
|
const screenshot_href = "{{ url_for('objects_item.showItem') }}?id=";
|
||||||
|
const domain_screenshot = document.getElementById('domain_screenshot');
|
||||||
|
var screenshot;
|
||||||
|
var screenshot_link = $("#screenshot_link");
|
||||||
|
|
||||||
|
domain_screenshot.addEventListener('error', function() {
|
||||||
|
domain_screenshot.src = "{{ url_for('static', filename='image/AIL.png') }}";
|
||||||
|
});
|
||||||
|
|
||||||
{% if "crawler_history_items" in dict_domain %}
|
{% if "crawler_history_items" in dict_domain %}
|
||||||
{% if "random_item" in dict_domain %}
|
{% if "random_item" in dict_domain %}
|
||||||
{% if dict_domain['random_item']['crawler']['screenshot'] %}
|
{% if dict_domain['random_item']['crawler']['screenshot'] %}
|
||||||
var screenshot = "{{dict_domain['random_item']['crawler']['screenshot']}}";
|
screenshot = "{{dict_domain['random_item']['crawler']['screenshot']}}";
|
||||||
var selected_icon = $("#"+screenshot.replace(/\//g, ""));
|
var selected_icon = $("#"+screenshot.replace(/\//g, ""));
|
||||||
selected_icon.addClass("icon_selected");
|
selected_icon.addClass("icon_selected");
|
||||||
selected_icon.removeClass("icon_img");
|
selected_icon.removeClass("icon_img");
|
||||||
|
|
||||||
$("#screenshot_link").attr("href", screenshot_href + "{{dict_domain['random_item']['id']}}");
|
screenshot_link.attr("href", screenshot_href + "{{dict_domain['random_item']['id']}}");
|
||||||
$("#screenshot_link").text("{{dict_domain['random_item']['crawler']['url']}}");
|
screenshot_link.text("{{dict_domain['random_item']['crawler']['url']}}");
|
||||||
{% else %}
|
{% else %}
|
||||||
var screenshot = "";
|
screenshot = "";
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% else %}
|
{% else %}
|
||||||
var screenshot = "";
|
screenshot = "";
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
domain_screenshot.src = base_url + screenshot;
|
||||||
img.src = base_url + screenshot;
|
|
||||||
|
|
||||||
function pixelate() {
|
|
||||||
/// use slider value
|
|
||||||
if( blocks.value == 50 ){
|
|
||||||
size = 1;
|
|
||||||
} else {
|
|
||||||
var size = (blocks.value) * 0.01;
|
|
||||||
}
|
|
||||||
|
|
||||||
canvas.width = img.width;
|
|
||||||
canvas.height = img.height;
|
|
||||||
|
|
||||||
/// cache scaled width and height
|
|
||||||
w = canvas.width * size;
|
|
||||||
h = canvas.height * size;
|
|
||||||
|
|
||||||
/// draw original image to the scaled size
|
|
||||||
ctx.drawImage(img, 0, 0, w, h);
|
|
||||||
|
|
||||||
/// pixelated
|
|
||||||
ctx.drawImage(canvas, 0, 0, w, h, 0, 0, canvas.width, canvas.height);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
blocks.addEventListener('change', pixelate, false);
|
|
||||||
|
|
||||||
function img_error() {
|
|
||||||
img.onerror=null;
|
|
||||||
img.src="{{ url_for('static', filename='image/AIL.png') }}";
|
|
||||||
blocks.value = 50;
|
|
||||||
pixelate;
|
|
||||||
}
|
|
||||||
|
|
||||||
function reload_image(new_screenshot, link, item_id) {
|
function reload_image(new_screenshot, link, item_id) {
|
||||||
if (screenshot) {
|
if (screenshot) {
|
||||||
|
|
@ -627,18 +584,15 @@ function reload_image(new_screenshot, link, item_id) {
|
||||||
}
|
}
|
||||||
screenshot = new_screenshot;
|
screenshot = new_screenshot;
|
||||||
|
|
||||||
img.src=base_url + screenshot;
|
domain_screenshot.src=base_url + screenshot;
|
||||||
selected_icon = $("#"+screenshot.replace(/\//g, ""));
|
selected_icon = $("#"+screenshot.replace(/\//g, ""));
|
||||||
selected_icon.addClass("icon_selected");
|
selected_icon.addClass("icon_selected");
|
||||||
selected_icon.removeClass("icon_img")
|
selected_icon.removeClass("icon_img")
|
||||||
|
|
||||||
$("#screenshot_link").attr("href", screenshot_href + item_id);
|
screenshot_link.attr("href", screenshot_href + item_id);
|
||||||
$("#screenshot_link").text(link);
|
screenshot_link.text(link);
|
||||||
pixelate;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
<input type="range" min="0" max="15" step="0.1" value="10" id="blur-slider" onchange="blur_images();">
|
<input type="range" min="0" max="15" step="0.1" value="10" id="blur-slider" onchange="blur_images();">
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-3 text-center">
|
<div class="col-md-3 text-center">
|
||||||
<button class="btn btn-sm btn-secondary" onclick="blur_slider.val(15);blur_images();">
|
<button class="btn btn-sm btn-secondary" id="btn_unblur_img" onclick="blur_slider.val(15);blur_images();">
|
||||||
<i class="fas fa-image"></i>
|
<i class="fas fa-image"></i>
|
||||||
<span class="label-icon">Full</span>
|
<span class="label-icon">Full</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -31,4 +31,11 @@
|
||||||
images[i].style.filter = "blur(" + blurValue + "px)";
|
images[i].style.filter = "blur(" + blurValue + "px)";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
function blur_unsafe(){
|
||||||
|
blur_slider.val(0);
|
||||||
|
blur_images();
|
||||||
|
let btn = $('#btn_unblur_img');
|
||||||
|
btn.removeClass("btn-secondary")
|
||||||
|
btn.addClass("btn-danger");
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
Loading…
Reference in New Issue