Наложение листовки с созданным PNG

Question

Я создал изображение в формате png и хотел, чтобы оно отображалось на листовой карте.

Я пробовал, как в приведенном ниже коде, но он не работает.

(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», чтобы ваше изображение появилось. URL-адреса данных MDN

Вы можете увидеть пример, который работает с моими 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);