Question

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

原始图片

在fabric.js中

Answer 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

Answer 2

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

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

2 个答案: