Как обмануть КАНВАС.
 

На локальном компьютере я вношу картинки на полотно Канвы таким кодом.

<output id="list"></output>
<input type="file" id="files" >
<script>
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) {
var span = document.createElement('span');
span.innerHTML = ['<img class="po" src=" ', e.target.result,'"id=k>'].join('');
document.all.list.insertBefore(span, null);
o();
document.getElementById('list').insertBefore(span, null);
};})(f);reader.readAsDataURL(f);}}
document.getElementById('files').addEventListener( 'change', handleFileSelect, false);
function o(){
var pervii = document.getElementById("peRVI");
var raskras = pervii.getContext("2d");
var cat = document.getElementById("k");
raskras .globalAlpha = 1;
raskras.drawImage(cat, 0, 0, 400, 400);
raskras.strokeRect(0, 0, 400, 400);
}
</script>

Всё работает прекрасно имею в виду пиксельную обработку. Может кто подскажет как избавиться от кнопки. Смотрите КЛОУНА в №4 страница 8. На сервере конечно проблем нет, но в планах.....!

http://clecar.ru/1956_09.html

clecar, от какой кнопки и что значит обмануть КАНВАС и что за проблемы не на сервере?

Изменения пикселя в канвас возможно только на сервере, так задумано разработчиками. Получается обрабатывать пиксели на локальном компьютере, можно только если изображение загружено кнопкой (input type="file")
Вставка crs вместо (', e.target.result,'), ничего не даёт. Короче кнопка это дополнительные неудобства в составлении программы. Запрет появляется при загрузки картинки. До загрузки рисовать и заливать свои рисунки не чего не мешает. Обмануть КАНВАС я имею ввиду уйти от запрещающего флага на прямую без кнопки.

clecar, канвас с сервером никак не связан, он рисуется браузером, метод drawImage принимает первым аргументом источник изображения, этот источник должен быть определенного типа (<img>, <video> и тд), естественно если в источнике src источника <img> будет ошибка например <img src="неверный путь к картинке">, то и канвасу нечего будет отрисовывать, но это не проблема канваса, а проблема неправильного указания адреса картинки. Используйте относительный путь к картинке, а не абсолютный, почитайте Добавление изображения

Вы меня не поняли с добавлением картинки проблем нет. Без сервера или загрузки с кнопки невозможна обработка пиксельная картинки на полотне канваса. Заливка работает только до загрузки изображения обычным способом, а ссылка не имеет ни какого отношения к полотну канваса. Я говорю о проблеме создания программы на своём компьютере. Поместив уже готовую программу на сайт, там проблем нет всё будет работать. Вот и пришлось раскраску с клоуном буквально в слепую отправить в Файловый менеджер. Естественно удалив наладочную часть кода, с которым я сюда и обратился.

Да метод drawImage, как раз и должен устанавливать флаг запрета. С кнопки input type="file", запрета нет. Всё работает как на сервере, только неудобства с составлением программы.

Не понимаю что вы имеете ввиду, канвас получает источник картинки, а откуда источник с сервера или с диска и каким способом загружен ему не важно, если есть картинка он ее берет и обрабатывает.
Ссылка на изображение имеет первостепенное отношение к полотну канваса так как является источником его изображения если вы используете drawImage, а откуда по вашему в нем изображение появляется из космоса что-ли.
Что за запрет приведите пример с запретом.

Вот код который отказывается работать.
function zaliv() {
var canvas = document.getElementById("peRVI");
raskras = canvas.getContext('2d');
raskras. globalCompositeOperation="source-over";
raskras.beginPath();
raskras .globalAlpha = 1;
raskras.fillStyle = "#000"
raskras.lineWidth =5;
raskras.strokeRect(0, 0, 800, 800);
raskras.strokeStyle ="#000"
raskras.closePath();
var pr=parseInt(document.all("kras1").innerHTML)+1;
var pg=parseInt(document.all("kras2").innerHTML);
var pb=parseInt(document.all("kras3").innerHTML);
var x=parseInt(document.all("korX").innerHTML);
var y=parseInt(document.all("korY").innerHTML);



document.all("zax").innerHTML=x;
document.all("zay").innerHTML=y;
var xz=parseInt(document.all("zax").innerHTML)+3;
var yz=parseInt(document.all("zay").innerHTML);
var imgd = raskras.getImageData(0, 0, 800,800);
var pix = imgd.data;
var ja= yz+36;

var i=((ja*800)+xz)*4;// -- Адрес пикселя клика -->


var right=[];// -- массив направо -->
var left=[];// -- массив налево-->
var top=[];// -- вверх вертикально-->
var bottom=[];// -- вниз вертикально-->
var wole=[];// -- всё закрашенное-->
var o=0;
var ao=0;
for (n=i, m=2560000; n<m; n+=3200){o++; right[o]=(n+4); left[o]=n-4;
pix[n]=pr; pix[n+1]=pg; pix[n+2]=pb; pix[n+3]=255; if (pix[n+3203]==255){break}} // -- вертикальнaя синяя черта вниз -->
for (n=i-3200, m=0; n>m; n-=3200){o++; right[o]=(n+4); left[o]=n-4;
pix[n]=pr; pix[n+1]=pg; pix[n+2]=pb; pix[n+3]=255; if (pix[n-3200+3]==255){break}} // -- вертикальнaя зелёная черта вверх -->
// -- o=количеству последних закрашенных пикселей -->
var s=o;
for (pen=0, pon=1000; pen<pon; pen+=1){
var a=0;
for (n=o, m=0; n>m; n-=1){
for (k=right[n], ko=2560000; k<ko; k+=4){
pix[k]=pr; pix[k+1]=pg; pix[k+2]=pb; pix[k+3]=255; if (pix[k+7]==255){break} a++; wole[a]=k; }}
// -- налево розовый горизонтально -->
for (n=s, m=0; n>m; n-=1){
for (k= left[n], ko=0; k>ko; k-=4){
pix[k]=pr; pix[k+1]=pg; pix[k+2]=pb; pix[k+3]=255;if (pix[k-1]==255){break} a++; wole[a]=k; }}
// -- wole[a] всё что закрасилось -->
o=0;
var s=0;
for (n=a, m=0; n>m; n-=1){if (pix[wole[n]+3203]==0){o++; top[o]=wole[n]+3200;}
if (pix[wole[n]-3200+3]==0){s++; bottom[s]=wole[n]-3200;}
}
// -- вниз чёрным вертикально -->
var te=0;
for (n=o, m=0; n>m; n-=1){
for (k=top[n], ko=2560000; k<ko; k+=3200){ pix[k]=pr; pix[k+1]=pg; pix[k+2]=pb; pix[k+3]=255; if (pix[k+3203]==255){break}te++; wole[te]=k; }}
// -- вверх синим вертикально -->
for (n=s, m=0; n>m; n-=1){
for (k=bottom[n], ko=0; k>ko; k-=3200){pix[k]=pr; pix[k+1]=pg; pix[k+2]=pb; pix[k+3]=255; if (pix[k-3200+3]==255){break}te++; wole[te]=k; }}
var o=0;
var s=0;
for (n=te, m=0; n>m; n-=1){if (pix[wole[n]+7]==0){o++; right[o]=wole[n]+4;}
if (pix[wole[n]-1]==0){s++; left[s]=wole[n]-3200;}
}
if (te==0){break}
}

raskras.putImageData(imgd, 0, 0);

}

На сервере проблем нет, посмотрите мою РАСКРАСКУ.

http://clecar.ru/ris.html
и в №4 на 8 странице клоуна
http://clecar.ru/1956_09.html

clecar, отформатируйте свой код!

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

clecar, избавиться от кнопки:
- или так
<script>var img=new Image;img.onload=function(){o(this)};img.src="imag e.png";function o(b){var a=document.getElementById("peRVI").getContext("2d" );a.globalAlpha=1;a.drawImage(b,0,0,400,400);a.str okeRect(0,0,400,400)}</script>
- или так
<output id="list"><img class="po" src="image.png" id="k" onload="o(this)"></output><script>function o(b){var a=document.getElementById("peRVI").getContext("2d" );a.globalAlpha=1;a.drawImage(b,0,0,400,400);a.str okeRect(0,0,400,400)};</script>

Rise,
у Вас опечатка: a.str okeRect(0, 0, 400, 400) - пробел из ниоткуда :)

Опробовал оба варианта, картинка конечно вставляется, если убрать a.str okeRect(0, 0, 400, 400). Но не то что лейка, капризничает даже кисточка.

На сайте у меня работает по этому коду.
<script>
document.ondragstart = function(){return false;}
document.body.onselectstart = function(){return false;}
var pri = document.getElementById("pri");
var pra= pri.getContext("2d");
var pervii = document.getElementById("peRVI");
var raskras= pervii.getContext("2d");
pervii.addEventListener('mousemove', paintCanvas, false);
img = document.createElement('img');
img.onload = function (){ pra.drawImage(img, 0, 0);}
pra.clearRect(0,0,400, 400);
img.src ="risyem/kloyn.png";
</script>

Ваш первый вариант работает аналогично моему. На сервере без проблем, локально на компьютере пиксели не обрабатываются.

Второй себя ведёт точно так же. После чистки cookei на компьютере. Заливку без кнопки или без сервера выполнить невозможно.

Это зависит от браузера. Firefox позволяет получать информацию по пикселям произвольного локального изображения, если сам файл тоже открыт локально. Chrome запрещает, потому что не безопасно: мало ли куда полезет случайно локально открытый файлик.
Каждая позиция по своему оправдана.

Если вы пишете то, что будет использовано в интернете - используйте для тестирования локальный сервер. Слишком многое разнится между запуском "из интернета" и просто запуском файла, целое поле грабель по которым можно пройтись.

Спасибо, так оно вероятно и есть. У меня Chrome. Firefox попробую установить.

Aetae,
Ваша правота подтвердилась, Firefox не удалось установить. Но в поисках причины удалил менеджер браузеров. У меня были установлены браузеры АМИГО, ХРОМ, ЯНДЕКС, ОПЕРА. Во всех программа раскраски работала одинаково, локально заливка с лейки не срабатывала, остальное было нормально. Теперь по прежнему работает только ЯНДЕКС. В ОПЕРЕ лейка заработала, но не переключается курсор и не срабатывает событие onmouseup оно так же перестало работать в АМИГО и ХРОМ, но в них по прежнему лейка не работает. Ваш совет удалить все, почистить ВИНД, и по новой установить браузеры?

Почистить винду бы не помешало в любом случае, особенно после Амиго, но проблема явно не в ней.
Перво-наперво вам надо определиться - чего именно вы хотите. Если что-то для других, то оно не должно зависеть от браузера и работать всегда одинаково. Если для себя - берёте тот браузер в котором работает и делаете что хотите. Можно даже спец. билд браузера под себя сделать.
Далее, если не работает javascript - чистка винды никак не поможет, потому что проблема в вашем коде. Жмёте f12 и смотрите, что вам пишет консоль.

Спасибо! На сайте в этих браузерах проблем нет. А в целом сомневаюсь связи с посетителями нет, кто его знает, почему сегодня не разу не была задействована лейка(заливка). Посетителей (обслуженных хостов 62), только кисточка, может лог файлы врут а может реально у меня вообще у людей и не работает ничего.

Ну раскраска действительно работает кое-как. Например не перестаёт рисовать когда мышка "отжата" и координаты мыши считает без учёта прокрутки.
Заходите на свою страницу, жмёте f12, выбираете "Консоль" и смотрите что за ошибки вам выдаёт, например:

TypeError: document.webkitCancelFullScreen is not a function
[Подробнее]risynok.js:5:1
22:45:43.542 ReferenceError: otmena is not defined
[Подробнее]ris.html:1:1
22:45:43.585 ReferenceError: otmficwet is not defined
[Подробнее]ris.html:1:1
22:45:44.792 ReferenceError: holst2 is not defined

Это странное явление отсутствие на верхнем слое канваса событие на отжатую мышку. Прописал к двум верхним слоям, в моей ОПЕРЕ работает. А вот куда пропало переключение курсора, пока загадка. Прокрутка учитывается просто курсор в виде лейки или кисточки имеет большие размеры и в ОПЕРЕ у меня перестал отображаться. Проверите пожалуйста сейчас на отжатие мышки реагирует?

"Отжатие" теперь работает. На счёт прокрутки - измените размер окна, так чтоб видно было только половину картинки, прокрутите вниз и попробуйте порисовать - рисовать будет сверху.

Ладно с этим разберусь, а на счёт смены курсора работает?

У меня в обоих браузерах рисует где надо. В ОПЕРЕ только курсор не меняется. Вы в каком браузере смотрите.
document.getElementById("korY").innerHTML=e.client Y+document.body.scrollTop;
document.getElementById("korX").innerHTML=e.client X+document.body.scrollLeft;

Должно правильно работать.

document.getElementById("korY").innerHTML=e.client Y+document.body.scrollTop;
document.getElementById("korX").innerHTML=e.client X+document.body.scrollLeft;
В каком браузере это не срабатывает?

Firefox:

... + (document.body.scrollTop||document.documentElement.scrollTop)

Курсор меняется.

А классическая опера вроде вообще не даёт менять курсор на нестандартный.

Понятно СПАСИБО. Сейчас изменю скроллинг.