Question

我正在尝试创建一个应用，用户可以在其中绘制图片然后保存。就像this person正在做的那样，我正在尝试使用Carrierwave添加表单进行上传。

这是我尝试上传的表单。我让文件字段对用户不可见，只能将图像添加到他们绘制的表单中。

<%= form_for(listing, html: { multipart: true } ) do |f| %>

<div class="invisible">
    <%= f.label :image %>
    <%= f.file_field :image, class: "form-control" %>
  </div>

<div class="form-group">
    <%= f.submit class: "btn btn-primary" %>
  </div>

<% end %>

我想使用我从this website获得的以下javascript函数将画布图像转换为dataurl然后转换为blob，然后在用户单击提交按钮时将图像添加到我的表单中我的表格。

function uploadimage() {
        var dataURL =  canvas.toDataURL('image/png');
           // Convert dataURL to Blob object
        function dataURLtoBlob(dataURL) {
          // Decode the dataURL    
          var binary = atob(dataURL.split(',')[1]);
          // Create 8-bit unsigned array
          var array = [];
          for(var i = 0; i < binary.length; i++) {
              array.push(binary.charCodeAt(i));
          }
          // Return our Blob object
          return new Blob([new Uint8Array(array)], {type: 'image/png'});
        }
          // Get our file
        var file= dataURLtoBlob(dataURL);
        // Create new form data
        var fd = new FormData();
        // Append our Canvas image file to the form data
        fd.append("image", image);
        // And send it
    }

我的另一个问题是，例如，我只是想将画布图像转换为网址，然后使用this site.的第一种方法中的代码将其作为base64图像上传到carrierwave。

 function uploadimage() {
        var dataURL =  canvas.toDataURL('image/png');
         }

在Rails Carrierwave Base64 image upload上，一张名为mohamed-ibrahim的海报说你可以使用carrierwave-base64 gem。有人可以告诉我如何使用carrierwave-base64 gem。我已经将mount_uploader改为mount_base64_uploader，但我对他说的其他事情感到困惑。

Answer 1

我终于能够得到这个。我是通过转到Meagon Coyle's Map Sketch Github page并查看她的javascript（javascripts / scripts.js）代码并找到此代码来完成的。

＆＃13;

document.getElementById('create-drawing').addEventListener('click', function(){
    var dataUrl = canvas.toDataURL("image/jpeg");
    var dataImg = document.createElement('img');
    dataImg.src = dataUrl;
    var drawingField = document.createElement('div');
    drawingField.innerHTML = "<input type='hidden' name='listing[image]' id='image' value='" + dataImg.src + "'>"
    document.getElementById('listing_image').value = dataUrl;
  });

＆＃13;

我能够在我的视图页面中将它与我的ruby关联在rails表单上。

＆＃13;

<%= form_for(listing, html: { multipart: true } ) do |f| %>

<%= f.hidden_field :image %>

 <%= f.submit :id => 'create-drawing' %>

＆＃13;

javascript的document.getElementById和html视图的提交表单按钮中的创建绘图是它们的链接方式。然后我使用了carrierwave-base64 gem，我唯一需要做的就是将mount_uploader安装到mount_base64_uploader。我不需要做任何其他事情。

使用Carrierwave将画布图像附加到表单并上传

1 个答案: