Измените размер изображения с предварительным просмотром перед загрузкой, прочитайте с URL

Question

Привет, ребята, у меня есть этот HTML:

<div>
    <img src="" alt="" id="artwork-image">
</div>

Мой JS:

        var img = new Image();
        img.src = params.artworkImgUrl;
        var reader = new FileReader();
        // Set the image once loaded into file reader
        reader.onload = function(e) {

            var img = document.createElement("img");
            img.src = params.artworkImgUrl;

            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);

            var MAX_WIDTH = 400;
            var MAX_HEIGHT = 400;
            var width = img.width;
            var height = img.height;

            if (width > height) {
                if (width > MAX_WIDTH) {
                    height *= MAX_WIDTH / width;
                    width = MAX_WIDTH;
                }
            } else {
                if (height > MAX_HEIGHT) {
                    width *= MAX_HEIGHT / height;
                    height = MAX_HEIGHT;
                }
            }
            canvas.width = width;
            canvas.height = height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, width, height);

            dataurl = canvas.toDataURL(file.type);
            document.getElementById('artwork-image').src = dataurl;
        };

Идея состоит в том, чтобы получить изображение из URL, в данном случае params.artworkImgUrl и после этогоизменить размер изображения и положить изменение размера изображения в div artwork-image, у меня нет ошибок, но не работает, как ожидалось.Не могли бы вы предоставить некоторые идеи, пожалуйста?Спасибо заранее и извините за мой английский.