文章/答案/技术大牛

发布

社区首页 >问答首页 >javascript从php访问图像数组

问javascript从php访问图像数组
EN

Stack Overflow用户

提问于 2019-12-24 07:33:10

回答 1查看 325关注 0票数 0

我使用旋转in从存储在PHP数组中的SQL images.Images中翻转图像。我希望访问Javascript中的图像PHP数组，并为每个图像创建bloburl。然后，bloburl将保存在options数组中。然后，我循环遍历options数组以：

<div class="container">

创建div
d.style.backgroundImage = "url(" + options['pages'][0] + ")";
将bloburl添加到div

但是，我在访问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>

turnjs

javascript

php

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-12-26 01:34:02

我尝试过utf8_encode，但我将其作为不可读的格式使用javascript。因此，我base64_encode每个图像，并存储在新的数组，$array_image_encode。我在javascript中声明该数组为array_sql_imgs，在JSON_encode之后。我循环遍历数组并为每个图像创建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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59465394

复制

相似问题

问javascript从php访问图像数组
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript从php访问图像数组EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript从php访问图像数组
EN