为什么我必须在更改画布大小后重绘图像？ [英] Why do I have to redraw the image after changing the canvas size?

问题描述

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

I'm trying to create a small meme generator that allows the user to use any URL he/she wants and change the size of the image. Everything's working the way it should, but I noticed, if there's already an image on the canvas and the user decides to change the canvas size, the image is "erased". Why does this happen and is there a way to prevent it from happening?

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>

这是笔

推荐答案

spec ：

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

When the user agent is to set bitmap dimensions to width and height, it must run the following steps:

1. 将渲染上下文重置为默认状态。

1. Reset the rendering context to its default state.

清除临时位图的命中区域列表及其挂起的
界面操作列表。

Clear the scratch bitmap's hit region list and its list of pending interface actions.

将划痕位图的大小调整为新的宽度和高度，将清除调整为
完全透明的黑色。

Resize the scratch bitmap to the new width and height and clear it to fully transparent black.

如果渲染上下文有输出位图，并且临时位图
是与输出位图不同的位图，则调整输出
位图的大小到新的宽度和高度并将其清除为完全透明
black。

If the rendering context has an output bitmap, and the scratch bitmap is a different bitmap than the output bitmap, then resize the output bitmap to the new width and height and clear it to fully transparent black.

你可以在调整画布大小之前尝试 getImageData（），然后之后 putImageData（），但我不确定如果同源策略允许它。

You can try getImageData() before resizing the canvas, and then putImageData() after, but I'm not sure if the same-origin policy will allow it.

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

If you don't need to change the intrinsic size of the canvas, you can change canvas.style.width and canvas.style.height, this will not erase the canvas.

这篇关于为什么我必须在更改画布大小后重绘图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！