-1

サーフボードみたいな形をhtml5で作りました。コード：

    <script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(100, 5);
ctx.bezierCurveTo(50,5,-50,300,50,505);
ctx.lineTo(150,505);
ctx.bezierCurveTo(250,300,150,0,100,5);

img = new Image()
img.addEventListener('load', function(e) {
    ctx.fillStyle = ctx.createPattern(this, "repeat");
        ctx.fill();
    }, true);
    
ctx.lineWidth = 5;  
ctx.stroke();
ctx.closePath();


img.src= "<?php echo $uploadfile ?>" 

    </script>

私の質問は、データベースに複数の画像が保存されていることです（画像パスのみ）。

ここで、データベースに保存したすべての画像をこの形で表示したいと考えています。私の形はサーフボードで、複数のサーフボードを隣り合わせにしたいです。

<?php
    dbConn();

    $q_select_images = mysql_query("select * from orders");

    while($row = mysql_fetch_array($q_select_images))
    {
         print "<img src=\"/test/". $row['image'] . "\" />";
        
    }
    
    closeDbConn();
    ?>

上記のコードは、データベースに保存したすべての画像を表示するためのものです。これら 2 つのスクリプトを組み合わせるにはどうすればよいですか。

JavaScript コードを while{ } 関数に入れるだけでは機能しないためです。毎回別の画像で形を繰り返したい。

私を助けてください、私はそれを理解することはできません。

4

1 に答える 1

1

最初にすべての画像パスを取得し、それらを JavaScript 配列に入れることができます。

$images = array();
while ($row = mysql_fetch_array($q_select_images)) {
     $images[] = $row['image'];
}

次に、次の JavaScript コードを追加します。

?>
<script type="text/javascript">
var images = <?php echo json_encode($images); ?>,
body = document.getElementsByTagName('body')[0];

for (var i = 0, n = images.length; i < n; ++i) {
    myImageFn(body, images[i]);
}

function myImageFn(container, path)
{
    var c = document.createElement('canvas');
    c.style.width = '200px';
    c.style.height = '510px';

    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(100, 5);
    ctx.bezierCurveTo(50,5,-50,300,50,505);
    ctx.lineTo(150,505);
    ctx.bezierCurveTo(250,300,150,0,100,5);

    img = new Image()
    img.addEventListener('load', function(e) {
        ctx.fillStyle = ctx.createPattern(this, "repeat");
            ctx.fill();
        }, true);

    ctx.lineWidth = 5;  
    ctx.stroke();
    ctx.closePath();

    img.src = path;

    container.appendChild(c);
}

ただし、画像ごとに DOM に追加する必要があります。

于 2013-04-08T12:58:46.040 に答える