0

此代码在画布上绘制用户本地计算机的图像，然后将其滑动到其他一些画布上以进行滑动益智游戏

function drawImage(event) {

        if (event.target.files.length <= 0) return;
        var files = event.target.files;
        var URL = window.URL || window.webkitURL;
        var img = $("#image")[0];

        img.src = URL.createObjectURL(files[0]);

        getCanvas("karajan").drawImage(img, 0, 0, img.width, img.height, 0, 0, 450, 450);

       ...........

    }

    function getCanvas(id) {
        var canvas = $("#" + id)[0];
        if (canvas.getContext) {
            return canvas.getContext("2d");
        }
        return undefined;
    }

以及从本地计算机输入图像文件的标签

<input type="file" accept="image/*" id="image_input" onchange="drawImage(event)"/>
<img id="image"/>

当用户想要更改图像时，画布将使用之前的图像进行绘制。我不知道为什么。在 drawImage 函数的第一行中，图像会随着更新的图像而变化并在画布上绘制

4

2 回答 2

1

我假设在当前脚本终止之前，图像实际上并没有“加载”。这意味着您应该监听图像的加载事件，然后才将其绘制到画布上。

我也对您的代码进行了一些重组。如果您已经有 jQuery 可用，请使用它：

$(function() {
    var URL = window.URL || window.webkitURL;
    var $image = $('#image').on('load', function() {
        // clear canvas here
        getCanvas("karajan")
            .drawImage(this, 0, 0, this.width, this.height, 0, 0, 450, 450);
        // ...
    });

    $('#image_input').on('change', function() {
        if (this.files.length === 0) return;

        $image.prop('src', URL.createObjectURL(this.files[0]));
    });
});

不过，正如 Kolink 建议的那样，您仍然应该清除画布。否则，如果加载了一个新的、较小的图像，之前的较大图像的一部分仍然可见。

于 2013-01-21T16:39:38.877 回答
1

画布不会自行清除，您必须告诉它清除。您可以使用clearRect(x,y,w,h). 在此之后，您可以绘制新图像。

于 2013-01-21T16:23:06.963 回答