如何将文件字段的值添加到屏幕上的图像？答案

【问题标题】：How can I add value to filefield to an image on the screen?如何将文件字段的值添加到屏幕上的图像？
【发布时间】：2016-11-19 20:54:29
【问题描述】：

我知道以前有人问过这个问题，但我的情况不同。我不想浏览客户的计算机，我想在他正在绘制的图像上添加“发布”按钮。这是一个绘图网络应用程序。我认为这不需要我提供任何代码。非常感谢。编辑： Rails html

<%= form_for @post, html: { multipart: true } do |f| %>
<br>
 <%= f.label :image %>
 <%= f.file_field :image, id: "pictureInput", class: "pictureInput" %> <<---
 <%= f.text_area :title %>
 <%= f.label :title %>
 <br>
 <%= f.submit %>
<% end %> 
<div id="post-image-preview">
</div>

js 正在画布上绘图。

【问题讨论】：

你要上传用户绘制的图片吗？
是的，添加它来制作文件字段形式
图像是否被绘制到<canvas> 元素上？你能在问题中加入html、javascript吗？
好的，我会的。是的，它在画布上。

标签： javascript ruby-on-rails file-upload input-field

【解决方案1】：

无法设置<input type="file"> 元素的FileList 属性，因为FileList 是只读的。您可以使用 FormData()、canvas.toBlob()、XMLHttpRequest() 到 POST FormData() 包含 File 对象的对象到服务器

// if (!HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
  value: function(callback, type, quality) {

    var binStr = atob(this.toDataURL(type, quality).split(',')[1]),
      len = binStr.length,
      arr = new Uint8Array(len);

    for (var i = 0; i < len; i++) {
      arr[i] = binStr.charCodeAt(i);
    }

    callback(new Blob([arr], {
      type: type || 'image/png'
    }));
  }
});

canvas.toBlob(function(blob) {
  var data = new FormData();
  data.append("file", blob, "imageName")
  var request = new XMLHttpRequest();
  request.open("POST", "/path/to/server/");
  request.onerror = function(e) {
    console.log(e)
  }
  request.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      console.log(e.loaded, e.total);
    }
  }
  request.send(data);
});

【讨论】：