Question

如果我在操作后上传相同的文件名，如何更改加载到canvas元素中的图像？换句话说，我需要能够清除画布以便可以加载新图像，或者在再次选择相同文件时找到重置它的方法。

我有以下内容加载图像文件，但不确定重置已选择的照片的逻辑，以便重新加载原始文件：

var fileInput = document.getElementById("file"),
    renderButton = $("#renderButton"),
    submit = $(".submit"),
    imgly = new ImglyKit({
        container: "#container",
        ratio: 1 / 1
    });
// As soon as the user selects a file...
fileInput.addEventListener("change", function (event) {

    //CHECK FILE SIZE OF INPUT
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        //get the file size and file type from file input field
        var fsize = $('#file')[0].files[0].size;
        var ftype = $('#file')[0].files[0].type;
        var fname = $('#file')[0].files[0].name;
        var isValidSize = true;
        var filesize = (fsize / (1024 * 1024 * 10)).toFixed(2);

        if (fsize > 80000000) //do something if file size more than 1 mb (1048576)
        {
            $(".file-warning").html("<div class='alert alert-danger'><p>The image: <b>" + fname + "</b> is <b>" + filesize + " MB</b> and too big. Please reduce your image size to <b>1MB</b> or less.</p></div>");
            $("#file").css("border-color", "red");
            //alert("Type :"+ ftype +" | "+ fsize +" bites\n(File: "+fname+") Too big!");
            isValidSize = false; // this variable should be created somewhere at the top. It will keep the state of file-picker.
            return; //this will stop any further actions;
        }
        //IF FILE SIZE WAS TOO BIG AND WARNING THROWN, BUT NEW CORRECT FILE SIZE LOADED, CLEAR WARNING
        else {
            if (fsize < 80000000) {
                $("#file").css("border-color", "#ccc");
                $(".file-warning").empty();
            }
        }
    } else {
        alert("Please upgrade your browser, because your current browser lacks some new features we need!");
    }
    //END FILE SIZE CHECK

    var file;

    var fileToBlob = event.target.files[0];
    var blob = new Blob([fileToBlob], {
        "type": fileToBlob.type
    });
    // do stuff with blob
    console.log(blob);
    // Find the selected file
    if (event.target.files) {
        file = event.target.files[0];
    } else {
        file = event.target.value;
    }

    // Use FileReader to turn the selected
    // file into a data url. ImglyKit needs
    // a data url or an image
    var reader = new FileReader();
    reader.onload = (function (file) {
        return function (e) {
            data = e.target.result;

            // Run ImglyKit with the selected file
            try {
                imgly.run(data);
            } catch (e) {
                if (e.name == "NoSupportError") {
                    alert("Your browser does not support canvas.");
                } else if (e.name == "InvalidError") {
                    alert("The given file is not an image");
                }
            }
        };
    })(file);
    reader.readAsDataURL(file);

Answer 1

Canvas-API有一个方法：

context.clearRect(0, 0, canvas.width, canvas.height);

这很好用而且非常简单 - 但前提是你的画布没有变换，当然如果你使用整个画布来制作你的画面。

重置选定的图像并在canvas元素中设置

1 个答案: