How can I add the base64 decoded image to openlayer map?

Question

This is my version. But it is not working. Canvas is displayed, but does not respond to the tug and zoom.

               var layer = new ol.layer.Image({
                source: new ol.source.ImageCanvas({
                    canvasFunction: function(){
                        var canvas = document.createElement('canvas');
                        var context = canvas.getContext('2d');
                        var image = new Image();

                        canvas.setAttribute('width', attachment.width);
                        canvas.setAttribute('height', attachment.height);

                        image.onload = function(){
                            context.drawImage(image, 0, 0);
                        };

                        image.src = attachment.src;

                        return canvas;
                    },
                    projection: view.getProjection()
                })
            });

Answer 1

I find answer! Just use ol.source.ImageStatic and imageLoadFunction :

            var layer = new ol.layer.Image({
            source : new ol.source.ImageStatic({
                imageExtent : view.getProjection().getExtent(),
                size : [attachment.width, attachment.height],
                imageLoadFunction : function(image){
                    image.getImage().src = attachment.src;
                },
                projection : view.getProjection(),
                url : ''
            })
        });

Answer 2

This works (real code):

    var projection = ol.proj.get('EPSG:3857');     
    var bing = new ol.layer.Tile({
                source: new ol.source.BingMaps({
                  imagerySet: 'Aerial',
                  key: 'yourBingKey'
                })
            });

    var minLon = -40.145761184967;
    var minLat = -12.838585358413;
    var maxLon = -40.13793299178;
    var maxLat = -12.830532582642;
    var extent = new ol.extent.applyTransform([minLon, minLat, maxLon, maxLat], ol.proj.getTransform("EPSG:4326","EPSG:3857"));

    var src = "data:image/png;base64,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";
    var pngImageBase64Layer = new ol.layer.Image({
        source: new ol.source.ImageStatic({
            imageExtent: extent,
                    imageLoadFunction : function(image){
                            image.getImage().src = src;
                    }
        })
            });

    var map = new ol.Map({
        layers: [bing, pngImageBase64Layer],
        target: document.getElementById('map'),
        view: new ol.View({
          center: ol.proj.fromLonLat([-40.135,-12.83]),
          projection: projection,
          zoom: 14 
        })
    });