Question

Fabric.js画布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>

这是来自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');?>

这是我为将图像投入画布所做的功能。

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

我是php和jquery的新手，所以这个功能可能不太好。我将感谢您给予我的每一个帮助。

fabric.js canvas jquery和来自不同网页的图片加载

0 个答案: