HTML Canvas - 调整大小/拖动上传的图像-Java 学习之路

我是新用户，无法对此帖发表评论：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

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/

回复于 2024-04-29T12:08:15+08:00

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

1 回答

相关问题