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

Question

Я рассмотрел другие вопросы, но до сих пор не могу ответить ,

Когда пользователь нажимает на кнопку «Сохранить проект», эта функция вызывается:

function common_save_project() 
{ 
    var image = common_screenshot(); 
} 

Это вызывает common_screenshot()

function common_screenshot() 
{ 
    var canvas = document.getElementById("save_image_canvas"); 
    var ctx = canvas.getContext('2d'); 
    if (typeof(moulding_canvas) === "undefined") 
    { 
    canvas.height = parseInt($("#matte_canvas").height()); 
    canvas.width = parseInt($("#matte_canvas").width()); 
    } 
    else 
    { 
    canvas.height = parseInt($("#moulding_canvas").height()); 
    canvas.width = parseInt($("#moulding_canvas").width()); 
    } 
    canvas.style.backgroundColor = "#FFFFFF"; 

    var moulding_top = 0; 
    var moulding_left = 0; 
    if (document.getElementById("moulding_canvas")) 
    { 
    moulding_top = -1 * parseInt(document.getElementById("moulding_canvas").style.top); 
    moulding_left = -1 * parseInt(document.getElementById("moulding_canvas").style.left); 
    } 

    var mattes_html = document.getElementById("mattes").innerHTML; 
    mattes_html = mattes_html.replace(/<\/?script\b.*?>/g, ""); 
    mattes_html = mattes_html.replace(/ on\w+=".*?"/g, ""); 
    console.log(mattes_html); 
    rasterizeHTML.drawHTML(mattes_html).then(function (renderResult) 
    { 
    ctx.drawImage(renderResult.image, moulding_left, moulding_top); 
    }); 

    ctx.drawImage(matte_canvas, moulding_left, moulding_top); 
    if (typeof(moulding_canvas) !== "undefined") 
    { 
    ctx.drawImage(moulding_canvas, 0, 0); 
    } 
    //var image = new Image(); 
    //image.src = canvas.toDataURL("image/jpeg"); 
    //return image; 
} 

Затем генерируется новый холст и рядом с ним тестовую кнопку. Когда это будет нажата:

function common_test() 
{ 
    var canvas = document.getElementById("save_image_canvas"); 
    var image = new Image(); 
    image.setAttribute('crossOrigin','anonymous'); 
    image.src = canvas.toDataURL("image/jpeg"); 
    $.ajax 
    (
    { 
     type: "POST", 
     processData: false, 
     url: SITE_URL + "/system/xml/import/" + app_type + "/" + session_id + "/?prjid=" + project_id, 
     data: "xml=" + common_order_xml + "&prodid=" + product_id + "&file=" + image.src 
    } 
).done(function(msg) 
    { 
     console.log("Project saved. " + msg); 
    }); 
} 

Однако при нажатии на эту кнопку, я получаю ошибку:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 

EDIT: Похоже, что ошибка происходит, когда у меня есть следующие:

rasterizeHTML.drawHTML(mattes_html).then(function (renderResult) 
{ 
    ctx.drawImage(renderResult.image, moulding_left, moulding_top); 
}); 

Есть ли другое решение, которое я могу использовать для превращения html-разметки в изображение, которое затем я смогу использовать в canvas.toURL

Answer 1

Вы загружаете файлы из локальной файловой системы вместо использования запроса localhost.

Запустите приложение через файловый сервер localhost и обязательно загрузите файлы в приложение только через http: //, а не из локальной системы. (Т.е. C:/или файл: // или/USR)

Answer 2

Просто используйте crossOrigin Атрибут

var image= new Image(); 
image.setAttribute('crossOrigin', 'anonymous'); 
image.src = url;