Even if I use getimageData, I can't read images well in the local environment.

This time, when I opened the page, I wrote a grayscale image to canvas, and when I put my mouse on it, it gradually colors.

Then, an error occurred in the following parts:

I checked and found that Chrome and Opera have similar errors in the local environment.
I heard that the solution is to start the server environment with MAMP and so on, and when I actually tried it, it was successful.

However, I would like to keep the behavior the same when I look at Chrome and Opera browsers, but is there a way?

$(window).load(function(){
    $('#gallery img').each(function(){
        createCanvas(this);
        Run a function called createCanvas for //#gallery img
    });


// Defining createCanvas

    function createCanvas (image) {
        // Generate canvas element
        varcanvas= document.createElement('canvas');
        if(canvas.getContext){
            varctx=canvas.getContext("2d");

            // Determine canvas size <canvas width="300" height="300">/canvas>
            canvas.width = image.width;
            canvas.height = image.height;
            // Draw an image at 0,0
            ctx.drawImage(image,0,0);
            // Get and insert data into imageData
            varUimageObj=newImage();
            UimageObj.crossOrigin='anonymous';
            UimageObj.src=obj_data.srcUser;

            varimageData=ctx.getImageData(0,0,0,canvas.width,canvas.height);
            // Insert image data into pixelData
            varpixelData=imageData.data;
            // Adjust the value of rgba in loop processing for all pixel data
            Count up //x and then y
            for(vary=0;y<canvas.height;y++){
                for (varx=0;x<canvas.width;x++){
                    // Identify and set the color of the i-th element.Since it is a double loop, count up from x first and set the variable below.
                    vari=(y*4*canvas.width)+(x*4);
                    Get the //rgb value

                    varred = pixelData[i];
                    vargreen=pixelData[i+1];
                    var blue = pixelData[i+2];

                    // Variables used to convert to grayscale
                    vargrayscale=(red*0.3)+(green*0.59)+(blue*0.11);
                    pixelData[i] = grayscale;
                    pixelData[i+1] = grayscale;
                    pixelData[i+2] = grayscale;
                    // pixelData[i+3] = 255;
                }
            }
            ctx.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height);
            image.parentNode.insertBefore(canvas, image);
        }

    }
});

HTML is as follows:

<!DOCTYPE html>
<html lang="ja">
<head>
    <metacharset="UTF-8">
    <title>GALLERY FOR CANVAS</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/gallery.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="./js/gallery.js"></script>

</head>
<body>
    <divid="wrap">
        <h1>GALLERY</h1>
        <ulid="gallery">
            <li><a href="#"><img src="./img/photo1.jpg" alt="1">span>2010/04/08</a>li>
            <li><a href="#"><img src="./img/photo2.jpg" alt="2">span>9/05/2011</a>li>;
            <li><a href="#"><img src="./img/photo3.jpg" alt="3">span>10/2012</a>li>;
            <li><a href="#"><img src="./img/photo4.jpg" alt="4">span>11<July 11, 2013;/a>li>
            <li><a href="#"><img src="./img/photo5.jpg" alt="5">span>12/2014</a>li>;
            <li><a href="#"><img src="./img/photo6.jpg" alt="6">span>2015/09/13</a>li>;
        </ul>
    </div>
</body>
</html>

For your information, the CSS is as follows.

@charset:"utf-8";

#wrap{
    width —1020px;
    margin:0 auto;
}

li{
    float:left;
    position:relative;
    display:inline-block;
    width —300px;
    height —300px;
    margin —10px;
    padding —10px;
    background-color:#fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.35);
}

lispan{
    width:280px;
    height:0;
    position:absolute;
    bottom —10px;
    left —10px;
    background —rgba(0,0,0,0.45);
    overflow — hidden;
    padding:010px;
    line-height: 50px;
    color:#fff;
    text-align:center;
    transition —height1s;
}

li: hoverspan {
    height —50px;
}

US>canvas{
    opacity:1;
    position:absolute;
    top —10px;
    left —10px;
    transition —1s 0.2s;
}

li —hover canvas {
    opacity: 0;
}

javascript css html5 image html5-canvas

2022-09-29 21:26

1 Answers

Basically, you can only run it on a web server.

Google Chrome and Opera consider all local files to be separate origin for locally stored page-to-page information leakage protection.–allow-file-access-from-files will behave the same as other browsers, but I don't think it's realistic to have users launch it.

2022-09-29 21:26

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656