Добавить ссылку в игре сохраненного изображения

Question

Я сделал игру на одевание в 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);

Answer 1

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

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

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

document.body.appendChild(image);