динамически создавать холст в WordPress и использовать оригинальный размер изображения и положение

Question

Хорошо, я довольно новичок в Javascript и JQuery, но после многих часов исследований я не могу удержаться, но задаю этот вопрос.

Я хочу написать функцию наведения, которая создает версию изображения в оттенках серого и размещает это новое черно-белое изображение над оригиналом. На 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");
            });
        });

пока, так хорошо. Все учебники и описания, которые я нашел (и понял), имели две проблемы:

1. Я работаю с WordPress, поэтому я не могу добавить холст-контейнер в HTML-код самостоятельно. Мне нужно создать холст динамически с помощью jquery, в зависимости от того, насколько велика картинка на текущей странице и какая позиция у нее внутри контейнера.

2-я проблема заключается в том, что они создают холст в обычном потоке, то есть рядом с исходным изображением. Мне бы хотелось, чтобы холст лежал прямо на исходном изображении, но я не знаю, как считывать размер и положение исходного изображения и использовать их для создания холста.

Полагаю, это должно быть очень просто, но я не могу понять, как именно вещи должны быть связаны в коде. Я действительно понятия не имею, как начать с этого, и я не мог найти что-то настолько простое, сколько мне нужно.

За исключением

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

все начало отсутствует. Как узнать размер изображения любой картинки с классом «testpic»? Как мне получить должность? Как мне использовать это создание холста в jquery?

Я был бы очень благодарен за помощь, так как это моя первая попытка найти помощь на таком форуме! Большое спасибо за любую помощь

Answer 1

Для создания холста я рекомендую использовать эту библиотеку с открытым исходным кодом http://georgealways.github.com/gee/

Получение разрешения изображения немного сложнее и зависит от браузера. Обсуждались уже на этой странице: Получить реальную ширину и высоту изображения с помощью JavaScript? (в Safari / Chrome)

Однако я предлагаю не использовать исходное изображение и не наносить на него холст. Это просто чепуха: попробуйте вместо этого просто использовать один холст, который на g.mouseover делает ваше изображение б / п

Сначала поместите этот код на 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