Ruby on rails 如何使用rails'；来自a<；画布/>；以rails的形式？

正如标题中所述，我正试图从嵌套在rails表单中的元素向S3 bucket上传一个带有rails活动存储的图像。 到目前为止，我已经能够使用

上载带有活动存储的图像。

用户

类

附加了一个签名

。当我使用file_字段时，图像上传正确，所以这不是问题的一部分

到目前为止，我的

simple\u表单

有：

  <div class="signature_pad text-center form-group">
    <div class="signature_pad_heading">
      Enter your Signature:
    </div>
    <div class="signature_pad_body">
      <canvas id="signature_pad_input" height="145px" width="370px" style="height: 145px; width: 370px;" class="border" />
    </div>
    <div class="signature_pad_footer">
      <button type="button" class="btn btn-default" onclick="signaturePad.clear()">Clear</button>
    </div>
  </div>

  <%= f.input :signature, type: file_field(:user, :signature), value: "", as: :hidden %>

  <%= f.submit "Save", class:'btn-primary btn-lg btn-md-wide',  id: "signature_pad_save"  %>

请输入您的签名：
清楚的

我的javascript是：

<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
<script>
const canvas = document.querySelector("canvas");
const signaturePad = new SignaturePad(canvas);

$('#signature_pad_save').click(function(event) {
    if (signaturePad.isEmpty()){
        alert('Please enter your signature.');
        event.preventDefault();
    } else {
        $('#user_signature').val(
            JSON.parse(
                signaturePad.toDataURL()  
        );
    }});
</script>

const canvas=document.querySelector（“canvas”）；
const signaturePad=新的signaturePad（画布）；
$（“#签名_pad_save”）。单击（函数（事件）{
if（signaturePad.isEmpty（））{
警报（'请输入您的签名'）；
event.preventDefault（）；
}否则{
$（“#用户签名”）.val(
JSON.parse(
signaturePad.toDataURL（）
);
}});

使用.toDataURL，我能够获得映像的base64，我读到的所有内容似乎都指出，这就是我需要通过活动存储发送到S3的全部内容

最后：

使用.file\u字段时发送的内容

“签名”=>“}

在表单提交之前尝试插入值时发送的内容

“签名”=>“#”}

我以前也做过类似的事情。我通过

rmagick

gem通过

imagemagick

将base64字符串转换回图像文件

有关代码，请参见此问题的第三个答案：

然后，您必须将其添加到控制器的

创建

和

更新

方法中，并使用

@user.signature.attach

方法，如前所述。

是的，这是可能的

直接上传由

DirectUpload

类（或

ActiveStorage.DirectUpload

处理，具体取决于您访问内容的方式）通常，

DirectUpload

希望a从中读取图像，但非常方便，

文件

是a，因此您几乎可以使用

Blob

来代替。活动存储只需要从其“文件”中读取一些内容几乎所有这些东西都存在于

Blob

中，唯一缺少的是

名称

属性，您可以自己添加它

因此，现在我们需要从画布中获取一个

Blob

。这实际上非常简单，因为画布有：

htmlcanvaseElement.toBlob（）

方法创建一个表示画布中包含的图像的

Blob

对象；该文件可以缓存在磁盘上，也可以由用户代理存储在内存中

首先设置。然后为整个表单添加您自己的提交处理程序，大致如下所示：

const form   = your_form_element;
const canvas = your_canvas_element;
const input  = your_file_input;

canvas.toBlob(blob => {
  // Fake out DirectUpload by manually adding a name.
  blob.name = input.files[0].name;

  const uploader = new DirectUpload(blob, input.dataset.directUploadUrl);
  uploader.create((error, blob) => {
    if(error) {
      // Handle the error.
    }
    else {
      // Add the <input type="hidden"> with the signature.
      const hiddenField = document.createElement('input')
      hiddenField.setAttribute('type', 'hidden');
      hiddenField.setAttribute('value', blob.signed_id);
      form.appendChild(hiddenField);

      // And submit away...
      form.submit();
    }
  });
}, 'image/jpeg', 0.95);

const form=您的表单元素；
const canvas=您的\u canvas\u元素；
常量输入=您的文件输入；
canvas.toBlob（blob=>{
//通过手动添加名称来伪造DirectUpload。
blob.name=input.files[0]。名称；
const uploader=new DirectUpload（blob，input.dataset.directUploadUrl）；
uploader.create（（错误，blob）=>{
如果（错误）{
//处理错误。
}
否则{
//添加带有签名的。
const hiddenField=document.createElement（'输入'）
setAttribute（'type'，'hiddenField'）；
setAttribute（'value'，blob.signed_id）；
表格.appendChild（hiddenField）；
//然后投降。。。
表单提交（）；
}
});
}“图像/jpeg”，0.95）；

---

假设你想要一个JPEG，你可以使用其他的内容类型，如果你想要的话，或者你可以将它与原始内容进行匹配。我还省略了一些常用的提交处理程序样板。如果你已经设置了常用的全局直接上传处理程序，那么它们将在这里用于进度条等等；如果你没有这些，那么你就必须处理它您自己，上面链接的指南中有关于所有这些的指针。

看起来ActiveStorage本机不支持这些。

"signature"=>"#<ActiveStorage::Attached::One:0x007f7a01c8b4f0>"}

const form   = your_form_element;
const canvas = your_canvas_element;
const input  = your_file_input;

canvas.toBlob(blob => {
  // Fake out DirectUpload by manually adding a name.
  blob.name = input.files[0].name;

  const uploader = new DirectUpload(blob, input.dataset.directUploadUrl);
  uploader.create((error, blob) => {
    if(error) {
      // Handle the error.
    }
    else {
      // Add the <input type="hidden"> with the signature.
      const hiddenField = document.createElement('input')
      hiddenField.setAttribute('type', 'hidden');
      hiddenField.setAttribute('value', blob.signed_id);
      form.appendChild(hiddenField);

      // And submit away...
      form.submit();
    }
  });
}, 'image/jpeg', 0.95);