HTML Canvas - 调整大小/拖动上传的图像

Question

我是新用户，无法评论此帖子：dragging and resizing an image on html5 canvas 关于使用锚点拖放/调整图像大小...

有人可以澄清如何将调整大小/拖动/锚点应用于上传的图像而不是预加载的图像吗？

我试过了，但它杀了我..

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]);
}

fiddle

Answer 1

您的代码是为处理全局变量 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/