Konvajs - 如何在不透明的情况下截取屏幕截图答案

【问题标题】：Konvajs - how to take a screenshot without transparencyKonvajs - 如何在不透明的情况下截取屏幕截图
【发布时间】：2019-12-06 22:57:27
【问题描述】：

我只是想让我的用户使用 toDataUrl() 函数截屏。

但是，如果没有背景矩形，所有像素都是透明的，并且显示为黑色。

所以解决方法是动态添加一个矩形，生成图片，销毁矩形

           saveImage(){

               const stage=this.$parent.$refs.stage.getStage()
               var stageRect =  new Konva.Rect({
                   x:0,
                   y:0,
                   width: stage.attrs.width,
                   height: stage.attrs.height,
                   fill: 'green',
               })
              console.log(stage)
               const backg=new Konva.Layer();
               backg.add(stageRect)
               stage.add(backg)
               backg.setZIndex(0)
               const dataURL = stage.toDataURL({ pixelRatio: 1, mimeType:"image/png" });
               backg.destroy();
               this.downloadURI(dataURL, 'stage.png');

           },

它可以工作（矩形是在所有其他图层之前创建的）但是...我无法获得舞台的大小，我的意思是视口，因为用户可以缩放/缩小舞台...。有什么想法吗？

【问题讨论】：

标签： konvajs todataurl

【解决方案1】：

只需使用比例来计算背景属性：

var stageRect =  new Konva.Rect({({
  x: -stage.x()/ stage.scaleX(),
  y: -stage.y()/ stage.scaleY(),
  width: stage.width() / stage.scaleX(),
  height: stage.height() / stage.scaleY(),
  fill: 'green',
});

演示：https://jsbin.com/lehasitaje/2/edit?html,js,output

【讨论】：