Question

我需要在另一个窗口中显示图像。我有2个HTML文件：

父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>

此结果仅显示图像的第一部分。

有什么想法可以显示全部内容吗？

我也可以更改弹出窗口的概念，我需要在主表的另一部分中显示此图片。

在弹出窗口中显示base64图像仅显示图像的一部分？

0 个答案: