Javascript-форум - скрипты Слесаря ремоонтника

Javascript-форум (https://javascript.ru/forum/)

- Ваши сайты и скрипты (https://javascript.ru/forum/project/)

- - скрипты Слесаря ремоонтника (https://javascript.ru/forum/project/73081-skripty-slesarya-remoontnika.html)

скрипты Слесаря ремоонтника

Круто, в предыдущей теме возражения не увидел. Начнём с буквы 'и', я в
последнее время проставляю её. Да ставьте вместо её любое выражение
или как в джерри знак доллара, работать будет. Тормознёт немного с конечно с длинными выражениями на английском но отработает. Для примера просто загрузка рисунка на страницу мой код

<img src='' id='копир'/>
<input type="file" id="files">
<script >
var и=document.all;
и('files').addEventListener('change', handleFileSelect, false);//обязательно до исполнения функции handleFileSelect( да просто не надо мне напрягать хостинг всё у клиента
function handleFileSelect(evt) {
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) { continue; }
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
//;желаете получить файл в базе 64 посылайте e.target.result или в alert или в любой контейнер
и.копир.src= e.target.result;
и.files.value='';//чтобы была возможность загружать повторно тот же файл
}
})(f);reader.readAsDataURL(f);}
}
</script >
Копируйте и проверяйте, что то сейчас я не в форме, вчера пенсию получил.

<head>
</head>
<video id='копир' src=""></video>
<input type="file" id="files">
<body>
<script >
var и=document.all;
и('files').addEventListener('change', handleFileSelect, false);
function handleFileSelect(evt) {
var files = evt.target.files; 
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('video.*')) { continue; }
var reader = new FileReader();
 reader.onload = (function(theFile) {
return function(e) {
и.копир.src= e.target.result;
и.копир.play();
}
})(f);reader.readAsDataURL(f);}
}
</script >
</body>

Тот же код, только не для img, а для video.
Пример использования http://clecar.ru/dvigalki/viderazr/razrezv.html

Не знаю можно ли, тот же код на разных форумах помещать, вчера воткнул его в ответ на другом форуме. Подходит к этой теме. Хотя и бестолковый.
Вращение квадратиков в canvas

<html>
<head>
</head>
<body id='экран' style=' width:100%; height:100%;' onload='var и=document.all; и.v.style.top=((и.экран.clientHeight/2)-200)+"px"; и.v.style.left=((и.экран.clientWidth/2)-200)+"px"; var a=0;
setInterval(function() { a+=0.01; и.v.width= и.v.width;
 ctx=и.v.getContext("2d");
ctx.translate(200, 200);
   ctx.rotate(a);
	 ctx.fillStyle = "rgb(255,0,0)";
	 ctx.fillRect(-50, -50, 100, 100); 
	 ctx.rotate(-a*3);
	 ctx.fillStyle = "rgb(0,255,0)";
	  ctx.fillRect(-25, -25, 50, 50); 
	  ctx.translate(100, 100);
	  ctx.rotate(a*4);
	  ctx.fillStyle = "rgb(0,0,255)";
	  ctx.fillRect(-10, -10, 40, 40);

	 }, 5);'>
	 <canvas id="v"  width='400px' height='400px' style=' position:absolute;' ></canvas>
</body>
</html>

Очистить фон

Все пиксели на рисунке рядом с которыми одинаковые становятся прозрачными. Применить можно для получения контура из силуэта.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style>
body{text-align: center;font-size:20px; }
#files{ 
  width:300px;
 cursor:pointer;
background:#ddc;
position:absolute;
font-size:20px;
 top:50px; 
        left:200px;
}
#копир{display:none;}
      #канва{
      top:0px; 
        left:0;
      position:absolute;
      z-index:2;
      }
   #контур{  position:absolute; 
  top:100px; 
        left:300px;
}
</style>
</head>
<body>
<input type="file" id="files">
<div style='  width:300px; cursor:pointer;background:#ddc;position:absolute;font-size:20px;top:0;left:0;'onclick="document.location='http://clecar.ru'">Мой сайт</div>
<div id='контур'>
<img src='' id='копир'/>
<canvas id= 'канва' width='1' height='1'></canvas >
</div>
<div id='инф'style='' >0</div>
</body>
<script >
var и=document.all;
и('files').addEventListener('change', handleFileSelect, false);
document.ondragstart = function(){return false;}
document.body.onselectstart = function(){return false;}
function handleFileSelect(evt) {
var files = evt.target.files; 
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) { continue; }
var reader = new FileReader();
 reader.onload = (function(theFile) {
return function(e) {
и.копир.src= e.target.result; 
и.files.value='';
}
})(f);reader.readAsDataURL(f);}
}
 и.копир.onload = function(){
var т=parseInt(и.копир.width);
 var в=parseInt(и.копир.height);
 и.канва.width=т;
и.канва.height=в;

рис=и.канва.getContext("2d");
рис.drawImage(и.копир, 0, 0,т,в);
весь=рис.getImageData(0,0,т,в);
цв=весь.data;
for(n=0,m=в*т*4; n<m; n+=4){
if((цв[n]==цв[n+4])&&(цв[n]==цв[n-4])&&(цв[n]==цв[n+т*4])&&(цв[n]==цв[n-(т*4)]) ){цв[n+3]=0 }   
       }
рис.putImageData(весь, 0, 0);
}
</script >
</html>

Разделил рисунок на 5 оттенков и вполне получается из фотографии делать контурный рисунок на прозрачном фоне.
http://clecar.ru/risovalki/kont/kontyr.html