Зачем мне перерисовывать изображение после изменения размера холста?

Я пытаюсь создать небольшой генератор мем, который позволяет пользователю использовать любой URL, который он хочет, и изменить размер изображения. Все работает так, как должно, но я заметил, что если на изображении уже есть изображение, и пользователь решает изменить размер холста, изображение «стирается». Почему это происходит, и есть ли способ предотвратить его?Зачем мне перерисовывать изображение после изменения размера холста?

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

источник

2016-02-04 Anonymous

Вот как работает холст - он автоматически стирается при изменении размера. Чаще всего вы можете просто перерисовать содержимое на холсте нового размера, но если вам нужен предыдущий контент, вы можете сохранить контент в imageObj (или другой холст) с помощью 'context.toDataURL' перед изменением размера холста, а затем' drawImage' сохраненное содержимое обратно на холст нового размера. – markE

Я предполагаю, что мне нужно будет сделать метод drawImage в конце обработчика кликов 'change_img_size'? –

Соответствующая часть spec:

Когда агент пользователя, чтобы установить растровые размеры в ширину и высоту, он должен выполнить следующие шаги:

Сбросить контекст рендеринга в состояние по умолчанию.

Очистить список регионов удаленных растровых изображений и список незавершенных действий интерфейса .

Изменение размера царапание растрового изображения на новую ширину и высоту и ясно, что к полностью прозрачным черным.

Если контекст рендеринга имеет выходной битовый массив, а царапина растрового является другой битовой картой, чем выходная битовая карта, а затем изменить размер выходного растрового изображения на новую ширину и высоту и очистить ее, чтобы полностью прозрачный черными.

Вы можете попробовать getImageData() перед изменением размера холста, а затем putImageData() после, но я не уверен, что если политика общего происхождения позволит.

Если вам не нужно менять внутренний размер холста, вы можете изменить canvas.style.width и canvas.style.height, это не приведет к стиранию холста.

источник

2016-02-04 18:12:40

Зачем мне перерисовывать изображение после изменения размера холста?

ответ

Смежные вопросы