将画布 blob 添加到表单数据答案

【问题标题】：Adding a canvas blob to a form data将画布 blob 添加到表单数据
【发布时间】：2021-03-31 13:24:03
【问题描述】：

情景。人单击文件输入按钮作为表单的一部分以（最终）上传图像。但在上传之前，它会调整大小，并以缩小的大小显示在表单上。我已经把它排序了，但是它把 blob 放到了我卡住的 formData 上。

这是调整大小的代码：

function checkFileDetails() {
var pi=_id('prodImg');
var si=_id('showImg');
var ti=_id('tmpImg');
file=pi.files[0];
fileName=pi.files[0].name;
var tmp=fileName.split(/\./);
    if(tmp[1] != ['jpg' || 'jpeg' || 'png']){
    alert('You can only upload: \n*.jpg\n*.jpeg\n*.png\n\nPlease try again');
    return false;
    }
    
ti.src=URL.createObjectURL(file); 
var ctx = document.getElementById('canvas').getContext('2d');
    var img = new Image();
    img.onload = function() {
    var w=ti.width;
    var h=ti.height;
        if (h > w){
        var y=250;
        var x=250*(w/h);
        }
        else{
        var x=250;
        var y=250*(h/w);
        }
    ctx.drawImage(img,0,0,w,h,0,0,x,y);
    si.src=canvas.toDataURL();
    };
img.src =URL.createObjectURL(file);
}

如您所见，具有三个区域。 “ProdImg”是文件输入，“tmpImg”是“粘贴”区域，（两者都在“display:none”div中）amd“showImg”是输出图像。检查它是图像格式后，它会从输入 button.files[0] 创建一个“文件”，该文件作为对象 URL 加载到 tmp.src（显示完整大小）

然后它设置画布，并获取图像的高度和宽度。然后它会计算一个比率，使最长边为 250 像素，而另一个维度则缩小以适合。然后它将图像以缩小的尺寸绘制到画布上。最后，一个 toDataURL 被发送到 "showImage" (si) src。

当他们最终完成表格时，他们会转到另一个功能：

var formData = new FormData();
var el = _id('create').elements;
    for (x=0; x<el.length; x++){
    formData.append(el[x].name,el[x].value);
    }
    
//console.log('passing ', file);
//  if (file != ''){
//console.log('into here');
//  canvas.toBlob(function(blob) {
//  var outPic=_id('dir').value+'_'+fileName;
//  formData.append('blob', blob, outPic);
//  }
//  );}

这只是包含错误捕获的函数的一部分，以及用于发送表单数据的 XHTTPRequest。该表单的 id 为“create”，因此它“拉入”该表单中的所有字段，并将它们附加到新的表单数据中。如果“文件”（输入按钮）不为空 - 即，必须包含要上传的文件 - （这是我卡住的地方）它应该将画布数据作为 blob 添加到表单中，（名为“blob” outPic 作为保存的文件名）

但是服务器没有获取到图片数据。可能是我尝试使用 toBlob + 函数的语法错误

+++ 并且根据在别处找到的提示，标记已放置在表单之外，因此不会上传原始文件。

（编辑：22 日星期二）

我忘了补充一点，我必须将画布 BACK 放入最后的标记中，因为当表单首次加载时，如果服务器上的用户帐户中没有图像，它会显示默认的“无产品” jpg图片

（编辑：12 月 24 日星期四）我想我会添加几天思考后发现的“解决方案”，以防其他人有同样的问题。我认为文件损坏的一个主要原因是因为 PERL 模块面向 UNIX 服务器......我正在 Windows 上进行测试。简而言之，当图像文件在 WINdows 上写入时，它们必须通过 BINMODE 发送。最后，我不得不将画布 dataURL 作为隐藏表单字段发送，删除第一个“块”（data:image/png;base64），解码 base64 字符串，并通过 BINMODE (!) 将其写出

关于初始画布，我的设置有误。我不应该在 HTML 中声明大小，而是应该是 javascript 中的“createElement”。而不是引用的九个元素，它应该是五个； (img,0,0,x,y)，后者设置为计算出的图像缩小后的大小。

这几天真是令人沮丧……但最终还是到了那里！

【问题讨论】：

标签： javascript canvas blob

【解决方案1】：

你能得到 blob 的最终图像 SRC 吗？如果是，请尝试避免使用 formData，因为它主要用于发送文件和多部分表单数据，在您的情况下它是一个 blob，而是创建一个简单的对象并附加您的所有字段并尝试将其传递给您的服务器。

【讨论】：

我不得不使用“多部分形式的数据”，因为有些文本字段与图像/blob 数据一起传输。但是只是再次阅读最后一部分，您建议首先将 blob 作为对象，然后将字段附加到该对象。会试一试

【解决方案2】：

正如您从重新编辑的问题中看到的那样，我最终能够通过一种有点混乱的方法来解决它！

【讨论】：