$.ajaxFileUpload 与画布一起使用答案

【问题标题】：$.ajaxFileUpload used with canvas$.ajaxFileUpload 与画布一起使用
【发布时间】：2014-10-09 10:22:43
【问题描述】：

如何使用 $.ajaxFileUpload 上传在画布中呈现的图像，使其成为 HttpContext.Current.Request.Files 的一部分？

可以正常上传文件：

$.ajaxFileUpload({
    url: "<%=AppRoot %>" + "upload",
    secureuri: false,
    fileElementId: "fld_image",
    dataType: "json",
    success: function (data, status) {
        if (typeof (data.error) != "undefined") {
            if (data.error) {
                //print error
                alert(data.error);
            }
        }
        else {
            $("#fld_image_hidden").remove();
            $(".heading").css("background-image", "url(<%= AppRoot %>" + data.Url + ")");
            var imagehidden = $("<input type=\"hidden\" id=\"fld_image_hidden\" name=\"fld_image_hidden\" value=\"" + data.Url + "|" + data.Name + "\" />");
            $("#Template_ID").after(imagehidden);
        }
        $("#fld_image").remove();
    },
    error: function (data, status, e) {
        alert(e);
    }});

但无法使用画布使其工作：

var upload = $("<input type=\"file\" id=\"fld_image\" name=\"fld_image\" />");
upload.on("change", function () {
if ($(this)[0].files[0].size > 5000000) {
    alert("The file size may not exceed 5 MB.");
    return;
}

var filesToUpload = $(this)[0].files;
var file = filesToUpload[0];

var img = document.createElement("img");
var reader = new FileReader();
reader.onload = function (e) {
    console.log(e);
    img.src = e.target.result;

    var canvas = $("#canvasImage")[0];


    var MAX_WIDTH = 500;
    var MAX_HEIGHT = 500;
    var width = img.width;
    var height = img.height;

    if (width > height) {
        if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
        }
    } else {
        if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height;
            height = MAX_HEIGHT;
        }
    }
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, width, height);

    var dataurl = canvas.toDataURL();
    console.log(dataurl);
    //Do ajaxFileUpload here
    $.ajaxFileUpload({
        url: "<%=AppRoot %>" + "upload",
        secureuri: false,
        fileElementId: "canvasImage",
        dataType: "json",
        success: function (data, status) {
        },
        error: function (data, status, e) {
            alert(e);
        }
    });
 });

画布用于在将图像上传到服务器之前使图像变小。

【问题讨论】：

画布在页面上呈现良好。我可以查看 canvas.toDataURL()...

标签： asp.net html canvas

【解决方案1】：

在这篇文章Canvas Upload的指导下，我最终选择了这条路：

var dataurl = canvas.toDataURL("image/png");
dataurl = dataurl.replace('data:image/png;base64,', '');

var ajax = new XMLHttpRequest();
ajax.open("POST", "<%=AppRoot %>" + "upload", false);
ajax.setRequestHeader("Content-Type", 'application/upload');
ajax.send(dataurl);

在服务器上：

File.WriteAllBytes

【讨论】：