Aleksandr Aleksandr - 1 year ago 235
Javascript Question

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

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 Source

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 : ''
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download