I am using turnjs to do flip image from SQL images.Images from SQL stored in PHP array. I want to access image PHP array in Javascript and create bloburl for each image. Then, bloburl will be saved in optionsarray. Then, I loop through optionsarray to:
create div
add bloburl to div by d.style.backgroundImage = "url(" + options['pages'][0] + ")";
append div to <div class="container">
But, I have problem in accessing PHP image array in Javascript on var array_sql_imgs = <?php echo JSON_encode($array_image) ?>;.
It show empty result when I execute console.log(array_sql_imgs);. When I tried access $test_array=array('a','b','c');. It showing correct result.
<?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>
I have tried utf8_encode, but I get it in javascript as unreadable format. So, I base64_encode each of the image and store in new array,$array_image_encode. I declare that array as array_sql_imgs in javascript after JSON_encode it. I loop through the array and create bloburl for each of images and place it in a array,options. I loop through this array to create div element, add background image by using bloburl and append the element to <div class="flipbook" id="flipbook">. It works successfully.
<?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>