toDataURL генерирует одну из двух ошибок: canvas.toDataURL не является функцией ИЛИ Невозможно прочитать свойство 'toDataURL' из неопределенного

Question

Пользователи на моем сайте загружают изображение профиля, затем обрезают его, а затем отправляют на сервер. После того, как изображение обрезается, оно помещается на холст, а затем отправляется с помощью ajax. Чтобы преобразовать холст в изображение, я использую toDataURL. проблема в том, когда я использую

convertCanvasToImage (imgData [0]);

Я получаю:

Uncaught TypeError: Невозможно прочитать свойство 'toDataURL' из неопределенного

и когда я удаляю [0]

convertCanvasToImage (imgData);

Я получаю:

Uncaught TypeError: canvas.toDataURL не является функцией

Код ниже:

imgData = pCtx.getImageData(0, 0, 150, 100);

iEdit.callback(iEdit.processCan.toDataURL("image/" + iEdit.imageType, 
iEdit.imageQuality));

iEdit.close();
remove_profile_image = "False";
var image = $("#file-upload");
var data = imgData;
var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
var my_canvas = document.getElementById("myCanvas");
var ctx = my_canvas.getContext("2d");
ctx.putImageData(imgData, 150, 100);
//this is either data = convertCanvasToImage(imgData[0]); or
data = convertCanvasToImage(imgData);
$.ajax({
    url: $(image).attr("data-url"),
    "csrfmiddlewaretoken": $(image).siblings("input[name='csrfmiddlewaretoken']").val(),
    type: 'POST',
    data: {
        "csrfmiddlewaretoken": CSRF_TOKEN,
        "profile_image": data
    },
    dataType: "json",
    headers: {
        "HTTP_X_CSRF_TOKEN": csrftoken
    },
    mimeType: "multipart/form-data",
    cache: false,
    success: function(data1) {
        console.log('success');
    }
});
}

и это функция convertCanvasToImage

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

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

Answer 1

Вы отправляете ImageData в качестве параметра на convertCanvasToImage.И ImageData не имеет toDataUrl, поскольку содержит необработанные пиксели.

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