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

Posted 2023-02-24

【中文标题】HTML Canvas - 调整大小/拖动上传的图像

【英文标题】：HTML Canvas - resize/drag uploaded image

【发布时间】：2014-05-29 19:38:03

【问题描述】：

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

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

【讨论】：

超级...感谢您的帮助（并迅速回复！）：D

不客气！请接受答案，因为它似乎没问题。

输入文本在图像加载和鼠标按下时被清除，我知道它对于不同的帖子是一个不同的问题，但也许它是一个简单的修复？也将不胜感激..

jsfiddle.net/LAS8L/109 我已将文本绘制放在一个函数中，该函数在文本更改和新绘制时调用。

天才！.. 加载更多错误供我修复，例如加载没有图像开始和其他文本效果，但我不会通过偏离原始主题来滥用论坛...非常感谢您输入@GameAlchemist :D