Fabric.js canvas jquery and image load from a different web page
I have two web pages 1.) localhost/index.html 2.) localhost/let/A.php
The first page is a fabric.js canvas and the second one holds 5 images.
Until now i have the 5 images into index.html. Using jquery when i click an image it goes into canvas. Ok so far but the problem is that my gallery will be about 7000 images. Too many for a single web page. So i will split them into 28 categories using a tag.Every a tag will be open in a new window ex(A.php, B.php, C.php and so on...). Is there a way to add the image i click from A.php into the index.html canvas.
This is the code from index.html:
<html>
<head>
<link href="stl/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="divcan">
<canvas id="canvas" width="1020" height="600"></canvas>
</div>
<div id="divContainer">
<div class="boxsbhi1">
<img width="40" height="40" class="lazyload" data-src="../Hieroglyphs/Hisea/Amen/A1.png" alt="A1"><h6 class="kodikoi">A1</h6>
</div>
<div class="boxsbhi1">
<img width="40" height="40" class="lazyload" data-src="../Hieroglyphs/Hisea/Amen/A1A.png" alt="A1A"><h6 class="kodikoi">A1A</h6>
</div>
<div class="boxsbhi1">
<img width="40" height="40" class="lazyload" data-src="../Hieroglyphs/Hisea/Amen/A1B.png" alt="A1B"><h6 class="kodikoi">A1B</h6>
</div>
<div class="boxsbhi1">
<img width="40" height="40" class="lazyload" data-src="../Hieroglyphs/Hisea/Amen/A1C.png" alt="A1C"><h6 class="kodikoi">A1C</h6>
</div>
<div class="boxsbhi1">
<img width="40" height="40" class="lazyload" data-src="../Hieroglyphs/Hisea/Amen/A2.png" alt="A2"><h6 class="kodikoi">A2</h6>
</div>
</div>
<a href="let/a.php"onclick="window.open(this.href,'Snopzer','left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" >A</a>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/fabric.min.js"></script>
<script type="text/javascript" src="js/lazysizes.min.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
</body>
</html>
This is the code from A.php:
<?php include('includes/header.php')?>
<h2 id="titlos">A-men</h2>
<div class="boxsbhi1">
<img width="40" height="40" class="lazyload" data-src="../../Hieroglyphs/Hisea/Amen/A1.png" alt="A1"><h6 class="kodikoi">A1</h6>
</div>
<div class="boxsbhi1">
<img width="40" height="40" class="lazyload" data-src="../../Hieroglyphs/Hisea/Amen/A1A.png" alt="A1A"><h6 class="kodikoi">A1A</h6>
</div>
<div class="boxsbhi1">
<img width="40" height="40" class="lazyload" data-src="../../Hieroglyphs/Hisea/Amen/A1B.png" alt="A1B"><h6 class="kodikoi">A1B</h6>
</div>
<div class="boxsbhi1">
<img width="40" height="40" class="lazyload" data-src="../../Hieroglyphs/Hisea/Amen/A1C.png" alt="A1C"><h6 class="kodikoi">A1C</h6>
</div>
<div class="boxsbhi1">
<img width="40" height="40" class="lazyload" data-src="../../Hieroglyphs/Hisea/Amen/A2.png" alt="A2"><h6 class="kodikoi">A2</h6>
</div>
<?php include('includes/footer.php');?>
And this is the function i ve made for impotring images into canvas.
$('#divContainer img.lazyload').on({
click:function(event){
var imageUrl = $(this).data('src');
event.preventDefault();
event.stopPropagation();
fabric.Image.fromURL(imageUrl, function (imageUrl){
var boImg = imageUrl.set({left: 100, top: 100, width: 60, height: 60,borderColor: 'coral',cornerColor: 'darkcyan',rotatingPointOffset :20 ,cornerSize: 7, angle: 0}).scale(1);
canvas.add(boImg).renderAll();
canvas.setActiveObject(boImg);
canvas.deactivateAll().renderAll.bind(canvas);
});
}
});
I am new to php and jquery so this function might not be that good. I will appreciate every help you can give me.
Aucun commentaire:
Enregistrer un commentaire