通过canvas.toDataURL将画布保存到图像会生成黑色矩形 [英] Saving canvas to image via canvas.toDataURL results in black rectangle

问题描述

使用Pixi.js并尝试将动画的一帧保存到图像。 canvas.toDataUrl应该工作，但我得到的是一个黑色的矩形。查看活动示例此处

代码I使用提取图像数据并设置图像是：

  var canvas = $（'canvas'）[0] 
 var context = canvas.getContext（'2d'）; 
 
 $（'button'）。click（function（）{
 
 var data = renderer.view.toDataURL（image / png，1）; 
 // created var data = canvas.toDataURL（）; 
 $（'img'）。attr（'src'，data）; 
}）
  
 p> 
 
解决方案
 
 [注意] 
 
 
 
接受的一个，请阅读下面的@gman的一个，它确实包含了更好的方式。 / p> 
 
 
 
 
 
您的问题是您正在使用webGL上下文，那么您需要设置 preserveDrawingBuffer 方法调用 属性为 true  
 
 
 
或者，您可以强制pixi使用2D上下文，方法是使用  CanvasRenderer 类 
 
Im using Pixi.js and trying to save a frame of the animation to an image. canvas.toDataUrl should work, but all i get is a black rectangle. See live example here

the code I use to extract the image data and set the image is:
            var canvas = $('canvas')[0];
            var context = canvas.getContext('2d');

            $('button').click(function() {

                var data = renderer.view.toDataURL("image/png", 1);
                //tried var data = canvas.toDataURL();
                $('img').attr('src', data);
            })

解决方案
[NOTE]

While this answer is the accepted one, please do read the one by @gman just below, it does contain a way better way of doing.



Your problem is that you are using webGL context, then you need to set the preserveDrawingBuffer property of the webGL context to true in order to be able to call toDataURL() method.

Or alternatively, you can force pixi to use the 2D context, by using the CanvasRenderer Class

                        
这篇关于通过canvas.toDataURL将画布保存到图像会生成黑色矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！