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 : ''
            })
        });