javascript 从 php 访问图像数组

Question

我正在使用 turnjs 从存储在 PHP 数组中的 SQL images.Images 翻转图像。我想访问 Javascript 中的图像 PHP 数组并为每个图像创建 bloburl。然后，bloburl 将保存在 options 数组中。然后，我遍历 optionsarray 到：

创建div
通过 d.style.backgroundImage = "url(" + options['pages'][0] + ")";
将 div 附加到 <div class="container">

但是，我在 var array_sql_imgs = <?php echo JSON_encode($array_image) ?>; 上访问 Javascript 中的 PHP 图像数组时遇到问题。

执行console.log(array_sql_imgs);时显示空结果。当我尝试访问 $test_array=array('a','b','c'); 时。它显示正确的结果。

<?php
//get images from sql in phparray
$array_image            =GetSqlData_Assoc($query_getimg,$db);
/* 
var_dump of $array_image
 array(2) 
{
 [0]=>
  array(1) 
     {
      ["File"]=>blob
     }
 [1]=>
  array(1) 
     {
      ["File"]=>blob
     }
 }
*/
$array_image_encode =json_encode($array_image);

?>

<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta name="viewport" content="width = 1050, user-scalable = no" />
<script type="text/javascript" src="plugin/turnjs4/extras/jquery.min.1.7.js"></script>
<script type="text/javascript" src="plugin/turnjs4/extras/modernizr.2.5.3.min.js"></script>
<script>
    const b64toBlob = (b64Data, contentType='', sliceSize=512) =>
    {
        const byteCharacters = atob(b64Data);
        const byteArrays = [];

        for (let offset = 0; offset < byteCharacters.length; offset += sliceSize)
        {
            const slice = byteCharacters.slice(offset, offset + sliceSize);
            const byteNumbers = new Array(slice.length);
            for (let i = 0; i < slice.length; i++)
            {
                byteNumbers[i] = slice.charCodeAt(i);
            }
            const byteArray = new Uint8Array(byteNumbers);
            byteArrays.push(byteArray);
        }

        const blob = new Blob(byteArrays, {type: contentType});
        return blob;
    }
    $( document ).ready(function() {

        var options = {
                        pages:[]
                      };    

                var array_sql_imgs = <?php echo JSON_encode($array_image) ?>;
                console.log(array_sql_imgs);//not display anything
                for(var i=0; i<array_sql_imgs.length; i++)
                {
                    var img             =array_sql_imgs[i]['file'];
                    const contentType   ='image/jpeg';
                    const b64Data       =img;
                    const blob          =b64toBlob(b64Data, contentType);
                    const blobUrl       =URL.createObjectURL(blob);
                    options['pages'].push(blobUrl);
                }    
    })
</script>
</head>

<body>

<div class="flipbook-viewport">
    <div class="container">
        <div class="flipbook">
        </div>
    </div>
</div>


<script type="text/javascript">

function loadApp() {

    // Create the flipbook

    $('.flipbook').turn({
            // Width

            width:922,

            // Height

            height:600,

            // Elevation

            elevation: 50,

            // Enable gradients

            gradients: true,

            // Auto center this flipbook

            autoCenter: true

    });
}

// Load the HTML4 version if there's not CSS transform

yepnope({
    test : Modernizr.csstransforms,
    yep: ['plugin/turnjs4/lib/turn.js'],
    nope: ['plugin/turnjs4/lib/turn.html4.min.js'],
    both: ['plugin/turnjs4/samples/basic/css/basic.css'],
    complete: loadApp
});

</script>

</body>
</html>

Answer 1

我试过 utf8_encode，但我得到的 javascript 格式不可读。所以，我 base64_encode 每个图像并存储在新数组中，$array_image_encode。我在 JSON_encode 之后的 javascript 中将该数组声明为 array_sql_imgs。我遍历数组并为每个图像创建 bloburl 并将其放在数组中，options。我遍历此数组以创建 div 元素，使用 bloburl 添加背景图像并将该元素附加到 <div class="flipbook" id="flipbook">。它运行成功。

<?php
$array_image        =GetSqlData_Assoc($query_getimg,$db);
$array_image_encode =array();
foreach($array_image as $key=>$value)
{
    $base64_encode          =base64_encode($value['File']);
    $array_image_encode[]   =$base64_encode;        
}

?>

<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta name="viewport" content="width = 1050, user-scalable = no" />
<script type="text/javascript" src="plugin/turnjs4/extras/jquery.min.1.7.js"></script>
<script type="text/javascript" src="plugin/turnjs4/extras/modernizr.2.5.3.min.js"></script>
<script>
    const b64toBlob = (b64Data, contentType='', sliceSize=512) =>
    {
        const byteCharacters = atob(b64Data);
        const byteArrays = [];

        for (let offset = 0; offset < byteCharacters.length; offset += sliceSize)
        {
            const slice = byteCharacters.slice(offset, offset + sliceSize);
            const byteNumbers = new Array(slice.length);
            for (let i = 0; i < slice.length; i++)
            {
                byteNumbers[i] = slice.charCodeAt(i);
            }
            const byteArray = new Uint8Array(byteNumbers);
            byteArrays.push(byteArray);
        }

        const blob = new Blob(byteArrays, {type: contentType});
        return blob;
    }
    $( document ).ready(function() {

        var options = {
                        pages: []
                      };    

                var array_sql_imgs = <?php echo JSON_encode($array_image_encode); ?>;

                for(var i=0; i<array_sql_imgs.length; i++)
                {
                    var img             =array_sql_imgs[i];
                    const contentType   ='image/jpeg';
                    const b64Data       =img;
                    const blob          =b64toBlob(b64Data, contentType);
                    const blobUrl       =URL.createObjectURL(blob);
                    options['pages'].push(blobUrl);
                }
                var div_container = document.querySelector('#flipbook');
                for(j=0;j<options['pages'].length;j++)
                {
                        url                             =options['pages'][j];
                        var element                     =document.createElement("div");
                        element.style.backgroundImage   ="url(" + url + ")";
                        div_container.appendChild(element);
                }
    })
</script>
</head>
<body>

<div class="flipbook-viewport">
    <div class="container">
        <div class="flipbook" id="flipbook">

        </div>
    </div>
</div>


<script type="text/javascript">

function loadApp() {

    // Create the flipbook

    $('.flipbook').turn({
            // Width

            width:922,

            // Height

            height:600,

            // Elevation

            elevation: 50,

            // Enable gradients

            gradients: true,

            // Auto center this flipbook

            autoCenter: true

    });
}

// Load the HTML4 version if there's not CSS transform

yepnope({
    test : Modernizr.csstransforms,
    yep: ['plugin/turnjs4/lib/turn.js'],
    nope: ['plugin/turnjs4/lib/turn.html4.min.js'],
    both: ['plugin/turnjs4/samples/basic/css/basic.css'],
    complete: loadApp
});

</script>

</body>
</html>

javascript 从 php 访问图像数组

javascript access image array from php

javascript

php

turnjs