Javascript 将静态图像加载为openlayers贴图层

我正在尝试将一幅图像加载到我的openlayers画布中，最终目标是将地图图例的png文件加载为地图顶部的图层。我已经能够使用

div

标记在地图上方浮动图例，但是我们需要在画布中捕获图例，以便用户可以使用

canvas.toBlob（）函数将其保存到png文件中

我没有发现任何错误，但是我的图像没有出现在我的地图上

我的Javascript：

var pixelProjection = new ol.proj.Projection({
    code: 'pixel',
    units: 'pixels',
    extent: [0, 0, 800, 600]
})


var mapLayer = new ol.layer.Tile({
    source: new ol.source.OSM({
        url: 'http://184.185.140.81/osm_tiles/{z}/{x}/{y}.png'
    }),
    opacity: 0.3,
    isBaseLayer: false
});

var imageLayer = new ol.layer.Image({
    source: new ol.source.ImageStatic({
        //url: 'http://184.185.140.81/Futura_sample.PNG'
        url: 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png',
        imageSize: [800, 600],
        projection: pixelProjection,
        imageExtent: pixelProjection.getExtent()
    })
})

var map = new ol.Map({
    layers: [
        mapLayer,
        imageLayer
    ],
    controls: ol.control.defaults().extend([
        new ol.control.ScaleLine()
    ]),
    target: 'map',
    view: new ol.View({
        center: ol.proj.transform([4.666389, 50.009167], 'EPSG:4326', 'EPSG:3857'),
        zoom: 4,
        minZoom: 1,
        maxZoom: 20,
    })
});


$('#exportMap').on('click', function() {
    console.log('click');
    canvas = document.getElementsByTagName('canvas')[0];
    canvas.toBlob(function (blob) {
        window.saveAs(blob, 'map.png');
    })
});

HTML:



这段代码只是试图用维基百科的png示例测试功能，因为我还没有准备好我们的图例。注释的
url:
是我保存到
/var/www/html/Futura\u sample.PNG的另一个示例图像

我做错了什么

编辑：已解决。我需要修正图像的投影。它可以很好地渲染和投影图像，但可以说是在另一个星系的某个地方。
希望它能帮助您
map.getLayers（）.push（imageLayer）
，或者问题出在图像投影上
<div id="map"></div>

<div id="exportMapDiv">

   <input type="button" id="exportMap" value="download map">

</div>