上傳canvas畫出來的圖片

2012-10-02 21:24:55 +0800 由 Rexable 在 Ruby on Rails 節點中發起

最後由 Rexable 於2012-10-06 10:17:13 +0800回應 , 196次閱讀

我想實現的功能是：

放一張圖當背景，然後讓使用者用黑色在上面畫個區域，

接下來把使用者畫的部分傳回後端，
（rails，用carrierwave處理檔案上傳的部分。）

讓後端存成檔案。

這部分希望可以用carrierwave去收，因為他會把圖片的路徑處理好。

找到的資料中，最接近的是這個：
http://goo.gl/27NS7

不過下面也有說，他有收到圖片的資料，但carrierwave並沒有幫他處理好

檔案也沒存起來。

所以來請教各位，是不是有確定可行的方法，或是不應該透過carrierwave來做？

更新
後來想到用carrierwave的「從remote url上傳」功能，

配合canvas的ToDataUrl來用。

不過會出現：trying to download a file which is not served over HTTP

這個錯誤。

截至 2012-10-06 10:17:13 +0800，共收到 4 條回應

Rexable 1樓, 於2012-10-03 16:10:19 +0800回應

讓使用者畫圖的方案我用的是這個：http://blog.darkthread.net/post-2011-10-30-html5-canvas-sktechpad.aspx

而PTT ruby版上的godfat給了我這個連結：http://stackoverflow.com/questions/1590965 裡面回答的人建議用getImageData()把圖的資料抓出來再用AJAX post回server。

所以我就照做了, 只是方法似乎太硬幹了點，還是不行。

$.post("/ads/1/questions/",
  {
    question: "yoyoyo, a new question here",
    ans_image: ctx.getImageData(0, 0, 300, 300 )
  },
 function(){
   alert("it's done");
  }
);

Rexable 2樓, 於2012-10-04 22:04:34 +0800回應

接原文的更新：

後來我就想到，是什麼原因導致這個error呢？
所以我看了carrierwave的文件：http://rubydoc.info/gems/carrierwave/frames

發現引起這個error的是這一行

raise CarrierWave::DownloadError, "trying to download a file which is not served over HTTP" unless file.http?

在這之中有個關鍵的判斷RemoteFile::http?

def http?
  @uri.scheme =~ /^https?$/
end

所以我就把它在我自己的uploader裡改了（遮臉

class CarrierWave::Uploader::Download::RemoteFile 
  def http? 
     true 
  end 
end

結果還是不行……因為檔名太長……orz
Errno::ENAMETOOLONG in QuestionsController#create
File name too long - data:image/png;base64,
........

Rexable 3樓, 於2012-10-05 17:01:11 +0800回應

#1樓 @Rexable
剛剛發現這裡傳的值似乎不太正確，應該是

question: {
  content: "yoyoyo, a new question here",
  ans_image: ctx.getImageData(0, 0, 300, 300 )
}

不過還是不行，還是會出現ERROR RangeError: exceeded available parameter key space的錯誤。

Rexable 4樓, 於2012-10-06 10:17:13 +0800回應

想到一個方法，先用canvas.todataurl轉成字串傳回去後，用ruby的base64方法轉回檔案，再傳給model裡的檔案欄位。
http://github.com/jnicklas/carrierwave 其實寫得很清楚了，太鑽牛角尖。

不過作業用機器不在身邊，暫時沒辦法試。

需要登入後方可回應，如果你還沒有帳號按這裡註冊。

Ruby Taiwan Group

Ruby on Rails

上傳canvas畫出來的圖片