透明像素在 fabric.js 中呈现为黑色答案

【问题标题】：Transparent pixels rendering as black in fabric.js透明像素在 fabric.js 中呈现为黑色
【发布时间】：2019-03-18 23:47:54
【问题描述】：

我正在尝试将带有一些完全透明像素的 .png 图像加载到 fabric.js 画布中，并且它们在浏览器中加载为黑色像素。如何使它们仅呈现为透明像素

原图

在 fabric.js 中

【问题讨论】：

如果没有一些示例代码或小提琴就不太确定这个问题，但你不能设置canvas.backgroundColor = "transparent"吗？

标签： three.js png webgl fabricjs

【解决方案1】：

<html>

<head>
    <script src="fabric.min.js"></script>
</head>

<body>
    <canvas id="canvas_input" width="800" height="800" style="border:1px solid #000000;"></canvas>
    <script>
        var canvas_input = new fabric.Canvas('canvas_input');
        fabric.Image.fromURL("./trans2.png", function(img){
            canvas_input.add(img);
            canvas_input.renderAll();
        });
    </script>
</body>

</html>

这应该可以正常工作。确保您提供静态文件。你可以使用 python -m simpleHTTPServer

【讨论】：

给出你的答案的某种描述。

【解决方案2】：

我实际上是在加载到画布之前缩小图像，这在透明背景中产生了这种黑色。当我将缩放限制增加到原始图像尺寸时，它工作正常。

【讨论】：