Как создать миниатюру изображения в кодировке base64 в приложении angularjs

0

У меня есть приложение, в котором идут образы, имеет строку с кодировкой base64, где я ее декодирую и показываю на карте google, но для нескольких изображений отображается только часть изображения, поэтому я могу создать эскиз изображения и сделать его видимым больше должным образом

Изображение 174551

образец ввода данных изображения:

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

и я декодирую

 var iconResize = new google.maps.MarkerImage(
          "data:image/png;base64,"+data.Photo, //url
          new google.maps.Size(70, 70)//size
        );

скажите, как идти

Теги:
base64
google-maps
photo

2 ответа

1

Чтобы масштабировать изображение, свойство scaledSize объекта google.maps.MarkerImage должно быть указано явно, например:

 var icon = new google.maps.MarkerImage();
 icon.size = new google.maps.Size(128, 128);
 icon.scaledSize = new google.maps.Size(128, 128);
 icon.url = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/...";

Рабочий пример

Поделиться
  • 0
    Я исправил с тем же решением некоторое время спасибо за ваше время
0 
  var iconScaling = function (base64) {
        return {
            url: base64,
            scaledSize: new google.maps.Size(50, 50),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(0, 0)
        };
    };

    var createMarker = function (info) {

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(info.Lat, info.Lon),
            map: $scope.map,
            animation: google.maps.Animation.NONE
        });

        marker.setIcon(iconScaling(info.icon_name));

/////----//////
 createMarker({ Lat: value.LocationDetails.Lat, Lon: value.LocationDetails.Lon, icon_name: 'data:image/jpeg;base64,' + value.CustomerInfo.Photo, CustomerID: key });
Поделиться
  • 0
    пожалуйста, добавьте описание, чтобы объяснить ответ.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню