Php fabric.js canvas jquery和图像从不同网页加载_Php_Jquery_Html_Image_Canvas

Php fabric.js canvas jquery和图像从不同网页加载

php jquery html image canvas

Php fabric.js canvas jquery和图像从不同网页加载,php,jquery,html,image,canvas,Php,Jquery,Html,Image,Canvas,Fabric.js canvas jquery和图像从不同网页加载我有两个网页 1。）localhost/index.html 2。）localhost/let/A.php 第一个页面是fabric.js画布，第二个页面包含5个图像到目前为止，我已经将这5幅图像放入index.html。使用jquery，当我单击图像时，它会进入画布。到目前为止还可以，但问题是我的图库大约有7000张图片。对于单个网页来说太多。因此，我将使用一个标记将它们分成28个类别。每个标记都将在一个新窗口中打开（a.p

Fabric.js canvas jquery和图像从不同网页加载

我有两个网页 1。）localhost/index.html 2。）localhost/let/A.php

第一个页面是fabric.js画布，第二个页面包含5个图像

到目前为止，我已经将这5幅图像放入index.html。使用jquery，当我单击图像时，它会进入画布。到目前为止还可以，但问题是我的图库大约有7000张图片。对于单个网页来说太多。因此，我将使用一个标记将它们分成28个类别。每个标记都将在一个新窗口中打开（a.php、B.php、C.php等等…）。是否有方法将我从a.php单击的图像添加到index.html画布中

这是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>

我不熟悉php和jquery，所以这个函数可能不是很好。我将感激你能给我的一切帮助

<?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');?>

$('#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);
                });
            }
        });