在WebArena上的第35个Ubuntu版本

2 年 ago

雅, 悟

1 minute

概要

webarenaでubuntu18.04やってみた。
apache2.4,php7.2やってみた。
imgのcorsやってみた。

サンプルコード

<?php
    header("Access-Control-Allow-Origin: *");
    header('Content-type: image/png');
    $fp = fopen("./png/test.png", "r");
    while (!feof($fp))
    {
        $line = fgets($fp);
        print($line);
    }
    fclose($fp);
?>

サンプルコード

<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
  </head>
  <body>
    <h1>Hello Plunker!</h1>
    <img src="http:///test22.php" alt="" crossOrigin="anonymous">
    <script>
$(window).load(function() {
    $("img").each(function() {
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        var img = new Image();
        img.crossOrigin = ''; 
        img.src = $(this).attr("src");
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        var pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
        for (var y = 0; y < pixels.height; y++) 
        {
            for (var x = 0; x < pixels.width; x++)
            {
                var i = (y * 4) * pixels.width + x * 4;
                var rgb = parseInt((pixels.data[i] + pixels.data[i + 1] + pixels.data[i + 2]) / 3, 10);
                pixels.data[i] = rgb;
                pixels.data[i + 1] = rgb;
                pixels.data[i + 2] = rgb;
            }
        }
        ctx.putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
        $(this).attr("src", canvas.toDataURL());
    });
});
</script>
  </body>
</html>

成果物

以上。