Question

我有以下javascript从画布生成图像并将它们上传到服务器。

var can = document.createElement('canvas');
can.width = 600;
can.height = 600;
var ctx = can.getContext('2d');
ctx.fillRect(0, 0, can.width, can.height);
ctx.fillText("Julia", can.width/2, can.height/2);
can.toBlob(uploadImage, "image/jpg", 0.9);

function uploadImage(jpeg) {
  var data = new FormData();
  data.append('image', jpeg, 'image.jpg');
  ...
}

每隔一段时间，结果如上所示，只是部分绘制。多个画布按顺序处理和上传，仅在完成ajax（在......部分）中继续进行，因此一次只能进行一次。

你看到过这种情况吗？如果是这样，我应该在这个过程中进一步调试？也许是上下文对象中的设置或其他内容？

修改

上传是一个ajax帖子，只在成功分支上解析了一个承诺。它实际上使用了有角度的$ http服务：

$http({method: 'POST', url: '...', data: data}).then(function(response) {
    // callback that processes and uploads the next image
});

Answer 1

我们面对的是与帆布相似的部分。你可以简单地调试它。

将给定blob打印到页面作为img src以确保正确创建文件。打印也是斑点大小。
打开浏览器的开发者工具 - ＆gt;网络 - ＆gt;过滤XHR并开始上传
分配完成（状态200）ajax请求并查看请求标头 - ＆gt;内容长度。如果此数字等于页面上的blob大小，则它已正确上载并在服务器端发现问题。否则请查看ajax电话。
确保服务器已将最大客户端请求大小设置为适合您的用例。例如，nginx的默认值为1M。

提示：在$ http标头中按blob.type设置Content-Type。 POST的默认值是application / json。

Answer 2

尝试稍微重新安排你的逻辑，你正在通过上传过程获得竞争条件，并且在创建图像时，它们必须在回调分类中进行回调..

// ...
ctx.fillText("Julia", can.width / 2, can.height / 2);
can.toBlob(function(blob) {
    var reader = new window.FileReader();
    reader.readAsDataURL(blob); 
    reader.onloadend = function() {
                base64data = reader.result;
        // we have image in base64 and now do the upload of base64data
        // $http || $.ajax call goes here
    }
});

如果您想提交图片数据网址，请尝试使用

 private void addNewEntry()
{
    // TODO add code to create a new entry
    // should show appropriate error if unable to create the entry
    // update the UI
    // update the data file by calling updateDataFile
    String fileExtension, program;
    String repeatExtension;

    fileExtension = txtAddExtension.getText();
    if (!fileExtension.substring(0,1).equals("."))
        fileExtension = "." + fileExtension;
     repeatExtension = fileExtension;
    program = txtAddProgram.getText();

    if(fileExtension.equalsIgnoreCase(repeatExtension))
    {
        JOptionPane.showMessageDialog(txtList, "Matching extension", "Error", JOptionPane.ERROR_MESSAGE);

    }

    else
    {
    Association assoc = new Association(fileExtension, program);

    assocList.add(assoc);
    updateDataFile();

    try {
        doc.remove(0, doc.getLength());


        doc.insertString(doc.getLength(), "Entry added\n" + assoc.toString() + "\n", null);

    } catch (BadLocationException e) {

        e.printStackTrace();
    }

    listAll();
}

}

hth，k

什么会导致HTML5画布toBlob创建一个不完整的图像？

2 个答案: