1

Как можно сделать так, чтобы в canvas загружалась картинка либо из мануально указанного url, либо из выпадающего списка? фрагмент кода html:

<select id="image-select">
                <option value=""></option>
                <option value="http://www.captionite.com/templates/good_guy_greg.jpg">Good guy Greg</option>
                <option value="http://www.captionite.com/templates/scumbag_steve.jpg">Scumbag Steve</option>
                <option value="http://www.captionite.com/templates/high_expectations_asian_father.jpg">High Expectations Asian Father</option>
            </select>

js начала изучать совсем недавно и многое еще непонятно. вот сырой фрагмент кода js:

var canvas = document.getElementById("myCanvas");
var context = document.getContext("2d");

var getImage = function(){
  var selectList = document.getElementById("image-select");
  var source = selectList.options[selectList.selectedIndex].value;
  var img = new Image ();
  img.src = source;
};

img.onload = function() {
// Work out where to center it
x = canvas.width/2 - img.width/2;
y = canvas.height/2 - img.height/2;

// Draw it
context.drawImage(img, x, y);
};

getImage();
img.onload();

1 ответ 1

3

Ошибка 1: контекст канваса должен задаваться самому канвасу, а не документу, то есть вместо

var context = document.getContext("2d")

должно быть

var context = canvas.getContext("2d")

Ошибка 2: определение img происходит внутри функции getImage, хотя по коду img используется при загрузке страницы, но его нет, вследствие чего возникает ошибка.

Ошибка 3: при загрузке страницы изначально выбранная опция select - пустая, картинку загружать неоткуда. Вместе с тем, в коде нет отлавливания изменений выбранной опции, а значит при выборе другой картинки она не может загрузиться.

Вот пример с использованием jQuery: http://jsfiddle.net/bz4wgyqq/

На чистом javascript-е: http://jsfiddle.net/0n6bz4cx/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.