Как обмануть КАНВАС.
На локальном компьютере я вношу картинки на полотно Канвы таким кодом.
<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", запрета нет. Всё работает как на сервере, только неудобства с составлением программы.
|
Цитата:
Цитата:
Цитата:
|
Вот код который отказывается работать.
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, отформатируйте свой код!
|
Часовой пояс GMT +3, время: 19:24. |