scratch-gui stage 渲染 生成图片

[weijiahui1]

const canvasBox = document.getElementById('canvasbox'); const imgSrc = canvasBox.toDataURL('image/png');

我用这个方式 获取到canvas 然后生成base64的图片地址，可是截图大部分都是黑屏，想问问这个截取舞台区域的canvas生成图片您怎么做的？有没有好的方法？ 谢谢

[Micircle]

在scratch-vm启动后，scratch-vm通过setInterval方法来调用scratch-render的draw方法更新舞台渲染。 draw方法会先清空canvas然后绘制新的内容，在这种情况下toDataURL并不能保证拿到的是绘制好的内容。可能由于浏览器异步的原因拿到的大部分是清空后的状态。 解决思路就是先确保舞台完成渲染，再获取dataUrl。

解决方法1：

// renderer指的是scratch-render的实例
const canvasBox = document.getElementById('canvasbox');
renderer.draw();
const imgSrc = canvasBox.toDataURL('image/png');

解决方法2：

// renderer指的是scratch-render的实例
let imgSrc = '';
renderer.requestSnapshot(dataUrl => imgSrc = dataUrl);

[weijiahui1]

是的整体的思路是这样的 我这样写了 handleGetCanvasImg () { const canvasBox = document.getElementById('canvasbox'); const renderer = new Renderer(canvasBox); renderer.draw(); const imgSrc = canvasBox.toDataURL('image/png'); return imgSrc; } 可是拿到的是白色的图，我想应该是时机不对。可是不知道那个方法能知道渲染完毕了。

[Micircle]

const renderer = new Renderer(canvasBox); 这个renderer是你新new的实例，而不是当前舞台的正在使用的renderer实例，你可以从container/stage.jsx中拿到当前舞台的renderer

[weijiahui1]

对，我成功拿到了，万分感谢！！！