Отобразить изображение base64 во всплывающем окне показывает только часть изображения? - PullRequest
0 голосов
/ 31 августа 2018

Мне нужно показать изображения в другом окне. У меня есть 2 файла HTMLs:

В родительском HTML есть кнопка в HTML, которая динамически загружает данные из объекта JSON после зацикливания на нем:

//JASON object loop to generate a button to open each picture in a table

tabCell.innerHTML + = 'value = "Открыть картинку" onclick = "OpenPopup (' + myBooks [[col [j]] + ')" />';

В скриптовой части:

// open the popup and send the picture base64 image 
var popup;
function OpenPopup(picData) {

        popup = window.open("base64popup.html?picData="+picData, "Popup", "width=300,height=100");
        SendToPopup(picData);
    };

    function SendToPopup(picData) {
        if (popup != null && !popup.closed) {
        popup.focus();
        } else {
            alert("Popup has been closed.");
        }
    }

//this is the popup html file
The popup page: 
<html>

<script type="text/javascript">
//on load it receive the request param
window.onload = function loadPic(){

        var pictureSource = getParameterByName('picData');
        var divContainer = document.getElementById("approval_report");

//it adds the data in HTML to show it with encoding 
        divContainer.innerHTML +='<img src=data:image/jpeg;base64,'"'+pictureSource+'"/>';

};
//function to get param
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
    </script>                       
    <body>
        <div id="approval_report" /> 
    </body>
</html>

Этот результат отображает только первую часть изображения.

Есть идеи, как это все показать?

Я также могу изменить представление о всплывающем окне, мне нужно показать эту картинку в другом разделе, а не в основной таблице.

...