Question

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

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>

这里是Pen

Answer 1

spec的相关部分：

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



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



清除临时位图的匹配区域列表及其待处理列表   界面行动。



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



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

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

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

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

1 个答案: