在游戏中追加已保存图片的链接

时间:2018-11-09 11:04:25

标签: html5 animate-cc save-image

我使用HTML5 Canvas在Animate CC中制作了一个装扮游戏。最后,用户可以将角色另存为图像。

我的问题是如何在游戏中添加此图像。

首先,我只是创建了一个链接,该链接将出现在游戏下方(个展,该人需要向下滚动才能看到该链接;如果嵌入了链接,我不确定它如何工作,所以我尝试过的替代方法)。而且因为它可能会造成混淆,所以我还创建了一个警报框。

我现在设法使该图像在新窗口中自动打开,效果更好-但是,由于打开了空白窗口,因此在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 :(得分:0)

您可以使用以下方法随时捕获Canvas的屏幕截图:

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

然后您可以使用:-

将其添加到DOM中。
document.body.appendChild(image);