Question

我正在创建一个基于网络的应用程序，允许用户上传图像，然后添加徽标和文本。

显然，如果需要更改徽标，则需要清除画布并再次添加徽标。但是，我无法弄清楚如何清除画布并重新上传他们已经添加的背景图像，以避免他们再次上传背景图像。

首先上传背景图片的代码如下：

document.getElementById('upload').addEventListener('change', doUpload);
function doUpload(e){
    var file = e.target.files[0];
    if(file){
        var reader = new FileReader();
        reader.onload = function loadBg(event){
            canvasLoadImage(event.target.result);
        }
        reader.readAsDataURL(file);
    }
}
function canvasLoadImage(imgData){  
    var img = new Image();
    img.src = imgData;
    img.onload = function drawBg(){
        context.drawImage(img, 0, 0, 1280, img.height * (1280/img.width));
    }
}

我用来清除画布的代码如下：

document.getElementById('clear').addEventListener('click', function() {
    context.clearRect(0, 0, canvas.width, canvas.height);  
  }, false);

有没有人知道如何重新添加用户已经上传的图像作为同一功能的一部分，而且他们不必再次上传它？

Answer 1

您可以将数据保存在全局变量中，并在取消画布后重复使用它。例如：

var oData = null;
...
function canvasLoadImage(imgData){  
                var img = new Image();
                img.src = imgData;
                oData = imgData;
                img.onload = function drawBg(){
                    var c = document.getElementById("myCanvas");
                    var context = c.getContext("2d");
                    context.drawImage(img, 0, 0, 1280, img.height * (1280/img.width));
                }
            }

...

document.getElementById('clear').addEventListener('click', function() {
                var c = document.getElementById("myCanvas");
                var context = c.getContext("2d");
                context.clearRect(0, 0, c.width, c.height);  
                var img = new Image();
                img.src = oData;
                context.drawImage(img, 0, 0, 1280, img.height * (1280/img.width));
              }, false);

清除HTML画布并在同一功能中重新上载元素

1 个答案: