将图片上传到画布答案

【问题标题】：Upload picture to canvas将图片上传到画布
【发布时间】：2017-11-10 11:19:25
【问题描述】：

我已经完成了一次图片上传并将图片放到画布上，这里是DEMO。现在，问题是当我上传一张图片然后我想上传另一张图片时，之前的图片仍然保留在下面。

这是我的代码：

JS：

var canvas = document.getElementById('main');
var ctx = canvas.getContext('2d');

var fileInput = document.getElementById('fileInputTest');
fileInput.addEventListener('change', imageLoader, false);

function imageLoader() {
    var reader = new FileReader();
    reader.onload = function(event) {
        img = new Image();
        img.onload = function() {

            var MAX_WIDTH = 150;
            var MAX_HEIGHT = 150;
            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;
                }
            }

            ctx.drawImage(img, 0, 0, width, height);
        }
        img.src = reader.result;
    }
    reader.readAsDataURL(fileInput.files[0]);
}

HTML：

<input type="file" id="fileInputTest" />
<canvas id="main" width="150" height="150"></canvas>

CSS：

#main {
  border: 2px dotted black;
  border-radius: 5px position: absolute;
}

JSFIDDLE DEMO

【问题讨论】：

clear 你的画布......但我不明白你为什么在这里使用画布，而且你也绝对不需要 FileReader......
我用它来定制一件 T 恤。当我将图片上传到画布时，它应该出现在 T 恤的中心。它不适用于 clearRect...
它确实有效jsfiddle.net/wvnmxj0q/1，因为我心情很好，这里没有不必要的 FileReader：jsfiddle.net/wvnmxj0q/2
哦，这太完美了。非常感谢。另外，你知道如何将图片上传到画布的中心吗？
jsfiddle.net/wvnmxj0q/3

标签： javascript jquery html css canvas

【解决方案1】：

在上下文中绘制图像之前添加它。

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, width, height);

您只需在绘制图像之前清除画布区域。

【讨论】：