Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript: HTML5 Canvas
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
Gerd199
5 / 5 / 3
Регистрация: 06.03.2014
Сообщений: 793
1

Отрисовывать линии по изображению

17.01.2018, 18:54. Просмотров 876. Ответов 2
Метки нет (Все метки)

Есть изображение, фон белый, на нем черные нарисованные линии.

Задача стоит следующая, необходимо поменять цвет этих линий и выдать изображение. Цвет выбирает пользователь, через js необходимо поменять их цвет.

Такая задача решаема при помощи js? И возможно ли реализовать за счет php?
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
17.01.2018, 18:54
Ответы с готовыми решениями:

Не получается отрисовывать один объект несколько раз! HTML 5 CANVAS
Здравствуйте! Я хочу, чтобы при клике на canvas добавлялся один объект в виде...

Как отрисовывать один объект несколько раз! HTML 5 CANVAS
Такая история! Есть плавно увеличивающийся круг на полотне canvas! (круг...

Эффекты к изображению
увидел на сайте вот такой эффект к изображениям соответственно при нажатии...

Высота блока по фоновому изображению
Здравствуйте. Искал в и-нете, пробовал варианты, но никак не получается. Я не...

Как отрисовывать линию, соединяющую две фигуры, так, чтобы она не пересекала эти фигуры и другие линии
Подскажите, пожалуйста, как отрисовывать линию, соединяющую две фигуры, так,...

2
MrOnlineCoder
Всегда онлайн
418 / 367 / 142
Регистрация: 07.04.2013
Сообщений: 1,707
Завершенные тесты: 2
17.01.2018, 23:42 2
Лучший ответ Сообщение было отмечено Gerd199 как решение

Решение

Gerd199, как вариант - нарисовать картинку на HTML5 canvas, получить контекст и пройтись по всем пикселям, проверять черный пиксель или нет, и изменять его если надо:

Javascript
1
2
3
4
5
6
7
8
9
var pixel = context.getImageData(x, y, 1, 1).data;
/*
pixel = RGBA
pixel[0] = R
pixel[1] = G
pixel[2] = B
pixel[3] = A
 
*/
Проблема может возникнуть если картинка загружается и рисуется на канвасе с другого домена (из-за CORS).
0
8Observer8
2269 / 1436 / 227
Регистрация: 05.10.2013
Сообщений: 4,412
Записей в блоге: 56
20.01.2018, 08:55 3
Цитата Сообщение от MrOnlineCoder Посмотреть сообщение
Проблема может возникнуть если картинка загружается и рисуется на канвасе с другого домена (из-за CORS).
Дополню, что если есть возможность хранить рисунки на Dropbox или GitHub Pages, то проблемы с CORS не будет, если написать:
Javascript
1
img.crossOrigin = "";
Для Dropbox ссылку нужно изменить так:

Было:
"https://www.dropbox.com/s/xi091ya34qqzda2/lightblueflower.jpg"
Стало:
"https://dl.dropboxusercontent.com/s/xi091ya34qqzda2/lightblueflower.jpg"
Песочница: https://plnkr.co/edit/CLRYXyLzjMWfN94iOL9v?p=preview

index.html
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
 
  <head>
    <script src="main.js"></script>
  </head>
 
  <body>
    <canvas id="renderCanvas" width="300" height="640">
        Your browser does not support the HTML5 canvas.
    </canvas>
  </body>
 
</html>
main.js
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
window.onload = function()
{
    var canvas = document.getElementById("renderCanvas");
    var ctx = canvas.getContext("2d");
    
    var img1 = new Image();
    img1.onload = function ()
    {
        console.log(img1.naturalHeight);
        ctx.drawImage(img1, 10, 10);
    }
    img1.crossOrigin = "";
    img1.src = "https://dl.dropboxusercontent.com/s/xi091ya34qqzda2/lightblueflower.jpg";
 
    var img2 = new Image();
    img2.onload = function ()
    {
        ctx.drawImage(img2, 10, 276);
    }
    img2.crossOrigin = "";
    img2.src = "https://8observer8.github.io/Assets/WebGLProgrammingGuide/resources/redflower.jpg";
}
2
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
20.01.2018, 08:55

Как праивильно отрисовывать объекты?
Здравствуйте! Имеется просьтенькая спрайтовая игра. Как выполняю...

Отрисовывать рисунок сразу в нужной позиции
Всем доброго времени суток!Я хотел у вас спросить,я уже месяц не могу получить...

Как отрисовывать меню по вертикали и горизонтали?
Имеется меню следующего вида function ShowTree($parent, $lvl) { global...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru