Почему не наносится картинка на канвас?

Question

[Igness_Music]

Есть скрипт, который лепит вотермарки на все найденные на страницы изображения. Разумеется не работает для модальных окон, в которых картинки подгружаются через аякс. Добавил в конец php файла подгружаемого аяксом скрипт, который должен сделать вотермарки для тех картинок, что подгружаются, но скрипт в 80% случаев ведет себя криво: не наносит на canvas основную картинку. Просто вешает на пустой канвас вотермарку. Как быть?

Код файла, который подгружается аяксом.

<div class="img_modal" data-id="<?= $img_id ?>" id="img_<?= $img_id ?>">
        <span class="img_alt" id="alt_img_<?=$img_id?>" data-id="<?=$img_id?>"></span>
    <?= $image ?>
    <script>
        $('#img_'+<?=$img_id?>).children('img').attr('id', 'watermark_modalsource' + <?=$img_id?>);
        var imgWidth = $('#watermark_modalsource'+<?=$img_id?>).width();
        var imgHeight = $('#watermark_modalsource'+<?=$img_id?>).height();
        $('#watermark_modalsource'+<?=$img_id?>).parent().append("<canvas class='watermarked_canvas'>");
        $('#watermark_modalsource'+<?=$img_id?>).next().next('canvas').attr('width', imgWidth);
        $('#watermark_modalsource'+<?=$img_id?>).next().next('canvas').attr('height', imgHeight);
        $('#watermark_modalsource'+<?=$img_id?>).next().next('canvas').attr('id', 'watermarkcanvas');
        var c = document.getElementById('watermarkcanvas');
        var ctx = c.getContext("2d");
        var img = document.getElementById('watermark_modalsource' + <?=$img_id?>);
        ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
        var img2 = document.getElementById("watermark");
        ctx.drawImage(img2, 0, 0, imgWidth, imgHeight);
        var canvas = document.getElementById('watermarkcanvas');
        var dataURL = canvas.toDataURL();
        $('#watermark_modalsource'+<?=$img_id?>).attr('src', dataURL);
        $('#watermarkcanvas').remove();
        $('.watermarked_canvas').remove();
    </script>
</div>

Answer 1

[Кирилл Шумилов]

Подозреваю, что в момент исполнения скрипта изображение еще не загружено.
Попробуйте повесить код на событие load у картинки:
а). либо указав прямо у элемента onload="makeWatermark()",
б). либо с помощью$('img').on('load', makeWatermark), но в таком случае SRC нужно указывать только после того как повесите обработчик события.
в). (имхо — лучший вариант) Вообще не грузите в DOM изображения, грузите только ссылку на изображение, а на стороне JS уже создавайте изображение и работайте с ним:

var img = document.createElement('img');
img.onload = makeWatermark;
img.src = "<?=$img_url;?>";

А для стабильной работы еще и неплохо бы убедиться в том, что вотермарк тоже загружен, и если нет — то загрузить его (аналогичным способом загрузить и вызвать onload с дальнейшей отрисовкой).

Надеюсь мой совет помог. Успехов! :)