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

编写代码来处理全局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/

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

1 个答案: