Сохранить холст с фоновым изображением

Question

У меня есть фоновое изображение для холста, и я добавил несколько основных элементов к холсту.Теперь я хочу сохранить холст (в формате .png) с фоновым изображением стиля холста.

Попытка:

var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");

Но это не похоже на сохранение фонового изображения.холста.Есть ли выход?

Answer 1

Если вы хотите сохранить фон Canvas + как изображение, вам нужно выполнить последовательность событий:

1. Создайте холст в памяти, такой же большой, как ваш обычный холст. Позвонить можно 2
2. ctx2.drawImage(can1, 0, 0) // нарисовать первый холст на новом холсте
3. ctx.clearRect(0, 0, width, height) // очистить первый холст
4. ctx.drawImage(background, 0, 0) // нарисовать изображение на первом холсте
5. ctx.drawImage(can2, 0, 0) // отрисовать (сохраненный) первый холст обратно в себя

Answer 2

Чтобы сохранить местоположение изображения, я считаю, что вы ищете:

window.location = canvas.canvas.toDataURL('image/png');

Первый вызов canvas - это ваша переменная, второй - объект canvas. Возможно, вам следует переименовать вашу переменную в нечто уникальное.

Чтобы установить изображение на холсте и сделать фон более трудным:

var myCanvas = document.querySelector('myCanvas'),     
    img = document.createElement('img'),    
    ctx = myCanvas.getContext ? myCanvas.getContext('2d') : null;

    myCanvas.width = window.innerWidth;
    myCanvas.height = window.innerHeight;
    img.onload = function () {  
        ctx.drawImage(img, 0, 0, myCanvas.width, myCanvas.height);
    };
img.src = 'image.png';

обновлено для перерисовки изображения.