добавить ссылку в игре сохраненного изображения - PullRequest
0 голосов
/ 09 ноября 2018

Я сделал игру на одевание в Animate CC, используя HTML5 Canvas. И, наконец, пользователь может сохранить символ в виде изображения.

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

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

Теперь мне удалось заставить это изображение автоматически открываться в новом окне, что лучше - однако, это не работает в Chrome, так как оно открывает пустое окно.

Так что мне интересно, есть ли другой / лучший способ сделать это ..?

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

Это текущий код:

    var hiddenCanvas = document.createElement('canvas');
hiddenCanvas.width = canvas.width * 0.388;
hiddenCanvas.height = canvas.height;
var canvasContext = hiddenCanvas.getContext('2d');
canvasContext.drawImage(
    canvas,
    0,
    0, 
    canvas.width * 0.388,
    canvas.height,
    0,
    0, 
    canvas.width * 0.388,
    canvas.height);

var aTag = document.createElement('a');
aTag.setAttribute('href', hiddenCanvas.toDataURL("image/png"));

aTag.innerHTML = "Criámos uma imagem do teu Doutor. Salva-a aqui! :O)";

aTag.download = "ONV_oTeuDoutor.png";

window.open(aTag);

1 Ответ

0 голосов
/ 11 ноября 2018

Вы можете сделать снимок экрана вашего Canvas в любое время, используя следующие параметры:

var src = canvas.toDataURL();
var image = document.createElement('img');
image.src = src;

Затем вы можете добавить его в DOM, используя: -

document.body.appendChild(image);
...