javascript - 使用创建的 PNG 进行传单叠加

Question

我创建了一张 png 图片并希望它显示在传单 map 上。

我按照下面的代码尝试了它，但它不起作用。

(net::ERR_FILE_NOT_FOUND)

我有什么想法可以做到这一点吗？这是代码。

    var pic = new PNGlib(200, 200, 256);      
    var background = pic.color(23, 0, 0, 50); 

    var my_png = pic.getBase64()

    var overlay = new L.ImageOverlay(  my_png   , bounds, {opacity: 0.5,});
    mymap.addLayer(overlay);

Answer 1

我认为您遇到了 URI 问题。您需要添加“data:image”才能显示图像。 MDN data URLs

您可以查看适用于我的 codesandbox 的示例.

var pic = new PNGlib(200, 200, 256);      
var background = pic.color(23, 0, 0, 50); 

var my_png = pic.getBase64()
const b64ImgUrl = `data:image/png;base64,${my_png}`;

var overlay = new L.ImageOverlay(  b64ImgUrl   , bounds, {opacity: 0.5,});
mymap.addLayer(overlay);