为什么更改画布大小后必须重绘图像

Why do I have to redraw the image after changing the canvas size?

本文关键字：绘图 图像 布大小 为什么      更新时间：2023-09-26

我正在尝试创建一个小型模因生成器，允许用户使用他/她想要的任何URL并更改图像的大小。 一切都按应有的方式工作，但我注意到，如果画布上已经有图像并且用户决定更改画布大小，则该图像将被"擦除"。 为什么会发生这种情况，有没有办法防止它发生？

.JS 

window.onload = function(){
    var canvas = document.getElementById("main");
    var ctx = canvas.getContext("2d");
    var open_image = document.getElementById("open_in_new_window");
    var change_img_size = document.getElementById("change_img_size");
    var get_canvas_width = canvas.getAttribute("width");
    var get_canvas_height = canvas.getAttribute("height");
    var image = new Image();
    image.onload = function(){
        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
        console.log("Image drawn");
    }
    open_image.addEventListener("click", function(){
        var user_img = document.getElementById("input_url").value;
        image.src = user_img;
        console.log(user_img);
    })
    change_img_size.addEventListener("click", function(){
        var set_canvas_width = document.getElementById("change_img_width").value;
        var set_canvas_height = document.getElementById("change_img_height").value;
        console.log(set_canvas_width, set_canvas_height);
        canvas.setAttribute("width", set_canvas_width);
        canvas.setAttribute("height", set_canvas_height);
    })
}

.HTML

<canvas id="main" width="450" height="550"></canvas>
<div id="user_actions">
    <input type="text" id="input_url" placeholder="Input image location." />
    <input type="text" id="change_img_width" placeholder="Change image width." />
    <input type="text" id="change_img_height" placeholder="Change image height." />
    <button id="open_in_new_window">View Image</button>
    <button id="change_img_size">Change Image Size</button>
</div>

这是一支笔

规范的相关部分：

当用户代理要将位图尺寸设置为宽度和高度时， 它必须运行以下步骤：

  1. 将呈现上下文重置为其默认状态。

  2. 清除临时位图的命中区域列表及其挂起列表 接口操作。

  3. 将临时位图调整为新的宽度和高度，并将其清除为 全透明黑色。

  4. 如果呈现上下文具有输出位图和临时位图 是与输出位图不同的位图，然后调整输出大小 位图到新的宽度和高度，并将其清除为完全透明 黑。

您可以在调整画布大小之前尝试 getImageData((，然后在之后放置 ImageData((，但我不确定同源策略是否允许它。

如果您不需要更改画布的固有大小，则可以更改canvas.style.width和canvas.style.height，这不会擦除画布。

相关文章：