Question

我网站上的用户上载了个人资料图片，然后将其发送到服务器。裁剪图像后，将其放在画布中，然后由ajax发送。要将画布转换为图像，我正在使用toDataURL。问题是当我使用

convertCanvasToImage（imgData [0]）;

我得到：

未捕获的TypeError：无法读取未定义的属性'toDataURL'

当我删除[0]

convertCanvasToImage（imgData）;

我得到：

未捕获的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不是画布，而是2d上下文，从您的问题尚不清楚如何访问画布。

toDataURL生成两个错误之一：canvas.toDataURL不是函数，或者无法读取未定义的属性“ toDataURL”

1 个答案: