Javascript код для раскрашивания рисунков. Как это работает?

Question

Я пытаюсь понять, как работает код, который делает страницу ниже: http://www.coloring.com/online/eagle-head-flag

Все, что я знаю, это то, что загружаемое изображение представляет собой png 32-битный файл.Я попытался понять код в файле раскраски.js , который загружен на странице.Но я не могу.Это выглядит так просто.

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

Я проанализировал изображение на фейерверке, и оно не имеет слоев.Так что действительно не могу понять, как это делается.

Я также не смог найти ни одного простого примера на Google, о том, как это сделать.

Может кто-нибудь помочь мне, по крайней мере, где можетЯ нашел простой пример об этом.

Answer 1

Это на самом деле довольно просто на странице, потому что сервер обрабатывает «окраску» каждого региона.

Когда вы щелкаете изображение, он отправляет запрос изображения для этого URL: http://image.coloring.com/pictures/single/eagle-head-flag?color=F69679&x=449&y=263

Где color - ваш текущий цвет, а x и y - координаты, по которым вы щелкнули.

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

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

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

Это потому, что сервер считает эти звезды как один элементили регион.Опять же, как он решает, что нет способа узнать без их серверного кода.

Наконец, когда вы нажимаете кнопку «Готово», он просто генерирует большой URL со всеми регионами, закодированными в этом цвете, которые сервер может генерировать.изображение с этим заполняет все в: http://image.coloring.com/pictures/colored/aXSH3sI2wz9J/IaebaOnG5C/83b6Ulg2/8CwNyM5M/aKSc4Coh/Ojzg1BeO/CWW2uEJ6ao/zcTvWnSc/DXCbJuVU/N5ZrH71ZbuvwmhrH/D3szJmBY/85T0rLZo/1540n/eagle-head-flag.gif

Answer 2

Вы можете сделать это с помощью SVG.

Учитывая некоторые SVG:

<div id="main">
  <svg id="octocat" xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="-60 0 420 330" style="fill:#fff;stroke: #000; stroke-opacity: 0.1">
    <path id="puddle" d="m296.94 295.43c0 20.533-47.56 37.176-106.22 37.176-58.67 0-106.23-16.643-106.23-37.176s47.558-37.18 106.23-37.18c58.66 0 106.22 16.65 106.22 37.18z"/>
    <path class="shadow-legs" d="m161.85 331.22v-26.5c0-3.422-.619-6.284-1.653-8.701 6.853 5.322 7.316 18.695 7.316 18.695v17.004c6.166.481 12.534.773 19.053.861l-.172-16.92c-.944-23.13-20.769-25.961-20.769-25.961-7.245-1.645-7.137 1.991-6.409 4.34-7.108-12.122-26.158-10.556-26.158-10.556-6.611 2.357-.475 6.607-.475 6.607 10.387 3.775 11.33 15.105 11.33 15.105v23.622c5.72.98 11.71 1.79 17.94 2.4z"/>
    <path class="shadow-legs" d="m245.4 283.48s-19.053-1.566-26.16 10.559c.728-2.35.839-5.989-6.408-4.343 0 0-19.824 2.832-20.768 25.961l-.174 16.946c6.509-.025 12.876-.254 19.054-.671v-17.219s.465-13.373 7.316-18.695c-1.034 2.417-1.653 5.278-1.653 8.701v26.775c6.214-.544 12.211-1.279 17.937-2.188v-24.113s.944-11.33 11.33-15.105c0-.01 6.13-4.26-.48-6.62z"/>
    <path id="cat" d="m378.18 141.32l.28-1.389c-31.162-6.231-63.141-6.294-82.487-5.49 3.178-11.451 4.134-24.627 4.134-39.32 0-21.073-7.917-37.931-20.77-50.759 2.246-7.25 5.246-23.351-2.996-43.963 0 0-14.541-4.617-47.431 17.396-12.884-3.22-26.596-4.81-40.328-4.81-15.109 0-30.376 1.924-44.615 5.83-33.94-23.154-48.923-18.411-48.923-18.411-9.78 24.457-3.733 42.566-1.896 47.063-11.495 12.406-18.513 28.243-18.513 47.659 0 14.658 1.669 27.808 5.745 39.237-19.511-.71-50.323-.437-80.373 5.572l.276 1.389c30.231-6.046 61.237-6.256 80.629-5.522.898 2.366 1.899 4.661 3.021 6.879-19.177.618-51.922 3.062-83.303 11.915l.387 1.36c31.629-8.918 64.658-11.301 83.649-11.882 11.458 21.358 34.048 35.152 74.236 39.484-5.704 3.833-11.523 10.349-13.881 21.374-7.773 3.718-32.379 12.793-47.142-12.599 0 0-8.264-15.109-24.082-16.292 0 0-15.344-.235-1.059 9.562 0 0 10.267 4.838 17.351 23.019 0 0 9.241 31.01 53.835 21.061v32.032s-.943 11.33-11.33 15.105c0 0-6.137 4.249.475 6.606 0 0 28.792 2.361 28.792-21.238v-34.929s-1.142-13.852 5.663-18.667v57.371s-.47 13.688-7.551 18.881c0 0-4.723 8.494 5.663 6.137 0 0 19.824-2.832 20.769-25.961l.449-58.06h4.765l.453 58.06c.943 23.129 20.768 25.961 20.768 25.961 10.383 2.357 5.663-6.137 5.663-6.137-7.08-5.193-7.551-18.881-7.551-18.881v-56.876c6.801 5.296 5.663 18.171 5.663 18.171v34.929c0 23.6 28.793 21.238 28.793 21.238 6.606-2.357.474-6.606.474-6.606-10.386-3.775-11.33-15.105-11.33-15.105v-45.786c0-17.854-7.518-27.309-14.87-32.3 42.859-4.25 63.426-18.089 72.903-39.591 18.773.516 52.557 2.803 84.873 11.919l.384-1.36c-32.131-9.063-65.692-11.408-84.655-11.96.898-2.172 1.682-4.431 2.378-6.755 19.25-.80 51.38-.79 82.66 5.46z"/>
    <path id="face" d="m258.19 94.132c9.231 8.363 14.631 18.462 14.631 29.343 0 50.804-37.872 52.181-84.585 52.181-46.721 0-84.589-7.035-84.589-52.181 0-10.809 5.324-20.845 14.441-29.174 15.208-13.881 40.946-6.531 70.147-6.531 29.07-.004 54.72-7.429 69.95 6.357z"/>
    <path id="eyes" d="m160.1 126.06 c0 13.994-7.88 25.336-17.6 25.336-9.72 0-17.6-11.342-17.6-25.336 0-13.992 7.88-25.33 17.6-25.33 9.72.01 17.6 11.34 17.6 25.33z m94.43 0 c0 13.994-7.88 25.336-17.6 25.336-9.72 0-17.6-11.342-17.6-25.336 0-13.992 7.88-25.33 17.6-25.33 9.72.01 17.6 11.34 17.6 25.33z"/>
    <path id="pupils" d="m154.46 126.38 c0 9.328-5.26 16.887-11.734 16.887s-11.733-7.559-11.733-16.887c0-9.331 5.255-16.894 11.733-16.894 6.47 0 11.73 7.56 11.73 16.89z m94.42 0 c0 9.328-5.26 16.887-11.734 16.887s-11.733-7.559-11.733-16.887c0-9.331 5.255-16.894 11.733-16.894 6.47 0 11.73 7.56 11.73 16.89z"/>
    <circle id="nose" cx="188.5" cy="148.56" r="4.401"/>
    <path id="mouth" d="m178.23 159.69c-.26-.738.128-1.545.861-1.805.737-.26 1.546.128 1.805.861 1.134 3.198 4.167 5.346 7.551 5.346s6.417-2.147 7.551-5.346c.26-.738 1.067-1.121 1.805-.861s1.121 1.067.862 1.805c-1.529 4.324-5.639 7.229-10.218 7.229s-8.68-2.89-10.21-7.22z"/>
    <path id="octo" d="m80.641 179.82 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m8.5 4.72 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m5.193 6.14 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m4.72 7.08 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m5.188 6.61 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m7.09 5.66 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m9.91 3.78 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m9.87 0 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m10.01 -1.64 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z"/>
    <path id="drop" d="m69.369 186.12l-3.066 10.683s-.8 3.861 2.84 4.546c3.8-.074 3.486-3.627 3.223-4.781z"/>
  </svg>
</div>

Вы можете прослушать событие клика. Это даст вам ссылку на путь SVG, по которому щелкнули, и вы можете использовать эту ссылку для программной установки цвета заливки.

Например, используя jQuery, вы можете сделать:

var _currentFill = "style:#f00"; // red
$("#octocat").click(function (event) { $(event.target).attr('style', _currentFill); })

Тогда все, что вам нужно сделать, это изменить значение _colorFill всякий раз, когда пользователь выбирает новый образец цвета.

Я предоставил интерактивную демонстрацию в виде Gist: http://bl.ocks.org/4545199. Протестировано на Safari, Chrome и Firefox.

Answer 3

Все это делается на стороне сервера. При нажатии на изображение выбранный цвет и координаты x и y отправляются на сервер, который возвращает изображение, отображаемое на странице. Вот соответствующий код, слегка измененный для удобства чтения:

$('#overlay').click(function(e) {
    x = e.pageX - parseInt($(this).offset().left);
    y = e.pageY - parseInt($(this).offset().top);
    var region = new Image();
    var src = imageUrl + '/pictures/single/' + pictureKeyName +'?color='+color+'&x='+x+'&y='+y;
    $(region).attr('src', src).load(function() {
        $(this).addClass('single');
        $(this).hide().insertBefore('#overlay');
        $(this).fadeIn('fast');
    });
});