Question

好吧，我对Javascript和JQuery很陌生，但经过几个小时的研究后，我不禁自问，但问了这个问题。

我想编写一个hoverfunction来创建一个灰度版本的图像，并将这个新的黑白图像放在原始图像上方。我在spyrestudios.com上找到了一个很好的工作代码，所以我的代码看起来像这样：

HTML普通代码

<!--IMG that is only an example with fixed sizes to make the script work.  -->
            <img id="canvasSource" class="testpic" width="480" height="321" alt="" src="canvas.jpg" title="bryom">

        <!--canvas that is only a dummy to test the script, later the canvas shouldn't be fixed in the html but created by jquery dynamically -->
        <canvas id="area" width="480" height="321" style="display:none"> </canvas>

和脚本

    <!-- fill canvas with greyscale version -->
        var canvas = document.getElementById("area");
        var context = canvas.getContext("2d");
        var image = document.getElementsByClassName("testpic");

        context.drawImage(image, 0, 0);

        var imgd = context.getImageData(0, 0, 480, 321); <!--width and height are here only testnumbers because image size may change within the webpage, numbers should be replaced by variables if possible -->
        var pix = imgd.data;
        for (var i = 0, n = pix.length; i < n; i += 4) {
        var grayscale = pix[i  ] * .3 + pix[i+1] * .59 + pix[i+2] * .11;
        pix[i  ] = grayscale;   // red
        pix[i+1] = grayscale;   // green
        pix[i+2] = grayscale;   // blue
        // alpha
        }
        context.putImageData(imgd, 0, 0);
    };

<!-- Hover Image shows canvas with black and white -->  

        $(document).ready(function(){
            $("img").mouseover(function(){
            $("canvas").css("display", "block");
            });

            $("img").mouseout(function(){
            $("canvas").css("display", "none");
            });
        });

到目前为止，这么好。我找到（并理解）的所有教程和描述都有两个问题：

我正在使用wordpress，所以我无法自己将canvas容器添加到html代码中。我必须使用jquery动态创建画布，具体取决于当前页面上的图片大小以及它在容器内的位置。

2.问题是他们在正常流程中创建画布，这意味着在原始图像旁边。我希望画布直接躺在原始图像上，但我不知道如何读出原始图像的大小和位置，并使用它们来创建画布。

我想这一定非常容易，但我无法真正关注代码中必须连接的内容。我真的不知道如何从这开始，我找不到像我需要的那样简单。

除

var img = document.getElementByClassName("testpic");
var canvas = document.createElement("canvas");

所有的开始都缺失了。如何使用“testpic”类询问任何图片的图像大小？我如何获得这个职位？如何在jquery中使用它创建画布？

我会非常感谢您的帮助，因为这是我第一次通过这样的论坛寻求帮助的试用版!!非常感谢您的帮助

Answer 1

要创建画布，我建议您使用此开源库http://georgealways.github.com/gee/

获取图像分辨率有点复杂，取决于浏览器。已在此页面上讨论过：Get the real width and height of an image with JavaScript? (in Safari/Chrome)

然而，我的建议是不使用原始图像而不是在其上放置画布。这只是废话：尝试只使用一个画布，在g.mouseover上，使你的图像b / n

首先，将此代码放在html页面上以创建画布

<script type="text/javascript" src="MYAPP.js"></script> 
<script type="text/javascript" src="gee.js"></script> 

window.onload = function() {
var g = new GEE( { width: 600, height: 480 } );
document.body.appendChild( g.domElement );
MYAPP(g);
}

然后，创建MYAPP.JS文件并使其像这样

function MYAPP(g) {

// TODO:
// print out the image

g.mouseover = function() {

// TODO:
// clear screen and
// print out the b/n image

}}

每当处理MYAPP.JS文件时，不要忘记访问画布和上下文，你必须这样做

// Access the canvas (you'll probably don't need this)
g.domElement

// Access the context (you'll use this a lot)
g.ctx

在wordpress中动态创建画布并使用原始图像大小和位置

1 个答案: