Создать холст с фоновым изображением, динамически обновлять текст, а затем сохранить холст?

Question

Я пытаюсь создать холст с фоновым изображением и текстом, обновлять текстовое содержимое с помощью пользовательского ввода при нажатии кнопки, а затем конвертировать этот обновленный холст в изображение, чтобы сохранить его.

Вот пример того, что я делал: https://jsfiddle.net/qrzd395p/

var c = document.getElementById('canvas'); 
var context = c.getContext('2d'); 
var backgroundImage = new Image(); 

backgroundImage.onload = function() { 
    // Once the image has finished loading, draw the 
    // image and then the text. 
    DrawScreen(); 
    DrawText(); 
}; 
backgroundImage.src = "http://lorempixum.com/200/200/"; 

function DrawScreen() { 
    context.drawImage(backgroundImage, 0, 0); 
} 

function DrawText() { 
    context.fillStyle = "red"; 
    context.font = "18px sans-serif"; 
    context.textBaseline = 'top'; 
    context.fillText("This is a test", 50, 100); 
} 

Если я не назначайте фоновое изображение можно преобразовать холст к изображению, используя следующий код:

function convertCanvasToImage(canvas) { 
    var image = new Image(); 
    image.src = canvas.toDataURL("image/png"); 
    return image; 
} 

Тогда, чтобы сохранить:

function downloadCanvas(link, canvasId, filename) { 
    link.href = document.getElementById(canvasId).toDataURL(); 
    link.download = filename; 
} 

Однако, как только я обновил его динамически я не могу сотрудничать nvert изображение в png для сохранения. Я попытался переустановить фоновое изображение, но это тоже не сработает.

Отредактировано для добавления ошибки, которую я получаю: «Uncaught SecurityError: Не удалось выполнить« toDataURL »в« HTMLCanvasElement »: теневые холсты могут не экспортироваться».

Любая помощь будет оценена по достоинству.

Answer 1

С previous answer

испорченным холст происходит, когда изображения загружаются на холст из другого домена, чем текущий. После этого холст не может быть сохранен в URL-адрес данных.

Решения:

Put all page related files (.html, .jpg, .js, .css, etc) on your desktop (not in sub-folders).

Post your images to a site that supports cross-domain sharing (like dropbox.com). Be sure you put your images in dropbox's public folder and also set the cross origin flag when downloading the image (var img=new Image(); img.crossOrigin="anonymous" ...)

Install a webserver on your development computer (IIS and PHP web servers both have free editions that work nicely on a local computer).