CIRCL
/
AIL-framework
mirror of https://github.com/CIRCL/AIL-framework
2
1
Fork 0
Code Issues Releases Wiki Activity

chg: [show domain screenshots] replace canevas by img blur

pull/607/merge
terrtia 2024-09-19 10:16:17 +02:00
parent aca877b6ab
commit a5a2f90e8b
No known key found for this signature in database
GPG Key ID: 1E1B1F50D84613D0
2 changed files with 64 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
var/www/templates/crawler/crawler_splash/showDomain.html
View File

@ -423,12 +423,16 @@
{% endfor %} {% endfor %}
</div> </div>
</td> </td>
<td class="text-center"> {%if item['crawler']["screenshot"]%}
{%if item['crawler']["screenshot"]%} <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="icon_img" 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();"> </div>
<i class="fas fa-eye-slash"></i> <span><img class="object_image mb-1" style="width: 100%;" alt="" id="domain_screenshot"></span>
<span class="label-icon">Hide</span>
</button>
</div>
<div class="col-md-6">
<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,88 +541,58 @@ 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);
var draw_img = false;
{%if "crawler_history_items" in dict_domain%} const base_url = "{{ url_for('objects_item.screenshot', filename="") }}";
{%if "random_item" in dict_domain%} const screenshot_href = "{{ url_for('objects_item.showItem') }}?id=";
{%if dict_domain['random_item']['crawler']['screenshot']%} const domain_screenshot = document.getElementById('domain_screenshot');
var screenshot = "{{dict_domain['random_item']['crawler']['screenshot']}}"; var screenshot;
var selected_icon = $("#"+screenshot.replace(/\//g, "")); var screenshot_link = $("#screenshot_link");
selected_icon.addClass("icon_selected");
selected_icon.removeClass("icon_img");
$("#screenshot_link").attr("href", screenshot_href + "{{dict_domain['random_item']['id']}}"); domain_screenshot.addEventListener('error', function() {
$("#screenshot_link").text("{{dict_domain['random_item']['crawler']['url']}}"); domain_screenshot.src = "{{ url_for('static', filename='image/AIL.png') }}";
{%else%} });
var screenshot = "";
{%endif%}
{%endif%}
{%else%}
var screenshot = "";
{%endif%}
img.src = base_url + screenshot; {% if "crawler_history_items" in dict_domain %}
{% if "random_item" in dict_domain %}
{% if dict_domain['random_item']['crawler']['screenshot'] %}
screenshot = "{{dict_domain['random_item']['crawler']['screenshot']}}";
var selected_icon = $("#"+screenshot.replace(/\//g, ""));
selected_icon.addClass("icon_selected");
selected_icon.removeClass("icon_img");
function pixelate() { screenshot_link.attr("href", screenshot_href + "{{dict_domain['random_item']['id']}}");
/// use slider value screenshot_link.text("{{dict_domain['random_item']['crawler']['url']}}");
if( blocks.value == 50 ){ {% else %}
size = 1; screenshot = "";
} else { {% endif %}
var size = (blocks.value) * 0.01; {% endif %}
} {% else %}
screenshot = "";
canvas.width = img.width; {% endif %}
canvas.height = img.height; domain_screenshot.src = base_url + screenshot;
/// 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) {
$("#"+screenshot.replace(/\//g, "")).removeClass("icon_selected").addClass("icon_img"); $("#"+screenshot.replace(/\//g, "")).removeClass("icon_selected").addClass("icon_img");
} }
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>

9
var/www/templates/objects/image/block_blur_img_slider.html
View File

@ -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>