Я использую Turnjs, чтобы сделать перевернуть изображение из изображений SQL. Изображения из SQL хранятся в массиве PHP. Я хочу получить доступ к массиву изображений PHP в Javascript и создать bloburl для каждого изображения. Затем bloburl будет сохранен в массиве options . Затем я перебираю массив options :

  • создать div

  • добавить bloburl в div с помощью d.style.backgroundImage = "url(" options['pages'][0] ")";

  • добавить div в {amp}lt;div class="container"{amp}gt;

Но у меня есть проблема в доступе к массиву изображений PHP в Javascript на var array_sql_imgs = {amp}lt;?php echo JSON_encode($array_image) ?{amp}gt;; ,

Это показывает пустой результат, когда я выполняю console.log(array_sql_imgs); , Когда я попытался получить доступ к $test_array=array('a','b','c'); , Это показывает правильный результат.

 {amp}lt;?php //get images from sql in phparray $array_image =GetSqlData_Assoc($query_getimg,$db); /* var_dump of $array_image array(2) { [0]={amp}gt; array(1) { ["File"]={amp}gt;blob } [1]={amp}gt; array(1) { ["File"]={amp}gt;blob } } */ $array_image_encode =json_encode($array_image); ?{amp}gt; {amp}lt;!doctype html{amp}gt; {amp}lt;!--[if lt IE 7 ]{amp}gt; {amp}lt;html lang="en" class="ie6"{amp}gt; {amp}lt;![endif]--{amp}gt; {amp}lt;!--[if IE 7 ]{amp}gt; {amp}lt;html lang="en" class="ie7"{amp}gt; {amp}lt;![endif]--{amp}gt; {amp}lt;!--[if IE 8 ]{amp}gt; {amp}lt;html lang="en" class="ie8"{amp}gt; {amp}lt;![endif]--{amp}gt; {amp}lt;!--[if IE 9 ]{amp}gt; {amp}lt;html lang="en" class="ie9"{amp}gt; {amp}lt;![endif]--{amp}gt; {amp}lt;!--[if !IE]{amp}gt;{amp}lt;!--{amp}gt; {amp}lt;html lang="en"{amp}gt; {amp}lt;!--{amp}lt;![endif]--{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta name="viewport" content="width = 1050, user-scalable = no" /{amp}gt; {amp}lt;script type="text/javascript" src="plugin/turnjs4/extras/jquery.min.1.7.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script type="text/javascript" src="plugin/turnjs4/extras/modernizr.2.5.3.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script{amp}gt; const b64toBlob = (b64Data, contentType='', sliceSize=512) ={amp}gt; { const byteCharacters = atob(b64Data); const byteArrays = []; for (let offset = 0; offset {amp}lt; byteCharacters.length; offset  = sliceSize) { const slice = byteCharacters.slice(offset, offset   sliceSize); const byteNumbers = new Array(slice.length); for (let i = 0; i {amp}lt; 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 = {amp}lt;?php echo JSON_encode($array_image) ?{amp}gt;; console.log(array_sql_imgs);//not display anything for(var i=0; i{amp}lt;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); } }) {amp}lt;/script{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div class="flipbook-viewport"{amp}gt; {amp}lt;div class="container"{amp}gt; {amp}lt;div class="flipbook"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;script type="text/javascript"{amp}gt; 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 }); {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

Я пробовал utf8_encode , но я получаю его в javascript как нечитаемый формат. Итак, я base64_encode каждого изображения и сохраняю в новом массиве, $array_image_encode . Я объявляю этот массив как array_sql_imgs в javascript после его JSON_encode . Я перебираю массив и создаю bloburl для каждого из изображений и помещаю его в массив options . Я перебираю этот массив, чтобы создать элемент div, добавить фоновое изображение с помощью bloburl и добавить элемент в {amp}lt;div class="flipbook" id="flipbook"{amp}gt; . Работает успешно.

 {amp}lt;?php $array_image =GetSqlData_Assoc($query_getimg,$db); $array_image_encode =array(); foreach($array_image as $key={amp}gt;$value) { $base64_encode =base64_encode($value['File']); $array_image_encode[] =$base64_encode; } ?{amp}gt; {amp}lt;!doctype html{amp}gt; {amp}lt;!--[if lt IE 7 ]{amp}gt; {amp}lt;html lang="en" class="ie6"{amp}gt; {amp}lt;![endif]--{amp}gt; {amp}lt;!--[if IE 7 ]{amp}gt; {amp}lt;html lang="en" class="ie7"{amp}gt; {amp}lt;![endif]--{amp}gt; {amp}lt;!--[if IE 8 ]{amp}gt; {amp}lt;html lang="en" class="ie8"{amp}gt; {amp}lt;![endif]--{amp}gt; {amp}lt;!--[if IE 9 ]{amp}gt; {amp}lt;html lang="en" class="ie9"{amp}gt; {amp}lt;![endif]--{amp}gt; {amp}lt;!--[if !IE]{amp}gt;{amp}lt;!--{amp}gt; {amp}lt;html lang="en"{amp}gt; {amp}lt;!--{amp}lt;![endif]--{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta name="viewport" content="width = 1050, user-scalable = no" /{amp}gt; {amp}lt;script type="text/javascript" src="plugin/turnjs4/extras/jquery.min.1.7.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script type="text/javascript" src="plugin/turnjs4/extras/modernizr.2.5.3.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script{amp}gt; const b64toBlob = (b64Data, contentType='', sliceSize=512) ={amp}gt; { const byteCharacters = atob(b64Data); const byteArrays = []; for (let offset = 0; offset {amp}lt; byteCharacters.length; offset  = sliceSize) { const slice = byteCharacters.slice(offset, offset   sliceSize); const byteNumbers = new Array(slice.length); for (let i = 0; i {amp}lt; 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 = {amp}lt;?php echo JSON_encode($array_image_encode); ?{amp}gt;; for(var i=0; i{amp}lt;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{amp}lt;options['pages'].length;j  ) { url =options['pages'][j]; var element =document.createElement("div"); element.style.backgroundImage ="url("   url   ")"; div_container.appendChild(element); } }) {amp}lt;/script{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div class="flipbook-viewport"{amp}gt; {amp}lt;div class="container"{amp}gt; {amp}lt;div class="flipbook" id="flipbook"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;script type="text/javascript"{amp}gt; 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 }); {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt;