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

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

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

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

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

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

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

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

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

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

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

2
MrOnlineCoder
Всегда онлайн
399 / 355 / 133
Регистрация: 07.04.2013
Сообщений: 1,661
Завершенные тесты: 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
2038 / 1331 / 217
Регистрация: 05.10.2013
Сообщений: 4,224
Записей в блоге: 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...

Как отрисовывать различные данные в окне?
Здравствуйте! не давно начал изучать WinApi! Создал окно-&gt; нарисовал в нем...

Как правильно отрисовывать фигуры в событии таймера
Во общем решил сделать отрисовку прямоугольника по таймеру ,ну так что бы по...


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

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

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