HTML Canvas - изменить размер / перетащить загруженное изображение

0

Я новый пользователь и не могу комментировать этот пост: перетаскивание и изменение размера изображения на холсте html5 относительно перетаскивания/изменения размера изображения с помощью якорей...

кто-то может прояснить, как применять resize/drag/anchors к загруженному изображению, а не предварительно загруженное изображение, пожалуйста?

У меня был выход, но он меня убил..

uploader html:
<input type="file" id="imageLoader" name="imageLoader" />

uploader js:
var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
        var img = new Image();
        img.onload = function () {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, 200, 140);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);
}

играть на скрипке

Теги:
canvas
upload
drag

1 ответ

1
Лучший ответ

ваш код написан для обработки глобального var img.
Когда вы загружаете новое изображение, создается новый локальный img var, который вы используете только в контексте.
Вам нужно, чтобы новое изображение заменило старый.
Так что просто измените в своем загрузчике файл:

function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
        img = new Image();               // not 'var img=...'
        img.onload = function () {
            draw(true,true);             // just update your app
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);
}

это работает, как вы можете видеть здесь:
http://jsfiddle.net/LAS8L/108/

Поделиться
  • 0
    супер ... спасибо за помощь (и быстрый ответ !!): D
  • 0
    пожалуйста ! Примите ответ, пожалуйста, так как все в порядке.
Показать ещё 9 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню