從畫布對象上傳到服務器

我想從我的畫布上傳裁剪圖像到服務器。在選擇文件後，我想裁剪它，然後單擊提交按鈕時使用表單來執行該帖子。我希望不必將後端從傳統的表單提交切換（因爲它已經就位並正在工作）。從畫布對象上傳到服務器

我使用fabricjs形成我的圖像處理。其他庫包括anuglarjs和restangular，但我相信這是一個fabricjs/html 5問題。

的Python/Django的在後端

我使用的擴展，織物裁剪的圖像（下面附帶）和我假設它正在工作。我不知道如何將圖像數據網址返回到表單中。 THX

表：

<form name="uploadForm" method="post" enctype="multipart/form-data" action="/main/update">{% csrf_token %} 
    <div class="control-group"> 
     <label class="control-label" for="file">Image File</label> 
     <div class="controls"> 
      <input type="file" name="file" onchange="newImage(this)" /> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="caption">Image Caption</label> 
     <div class="controls"> 
      <input type="text" name="caption" /> 
     </div> 
    </div> 
    <div class="control-group"> 
     <div class="controls"> 
      <input type="submit" value="Upload" /> 
     </div> 
    </div> 
    <div> 
     <!-- 770 x 300 --> 
     <canvas id="myCanvas" width="800" height="400" style="border:1px solid #000000;"></canvas> 
    </div> 
</form>

腳本

var newImage = function (inp) { 
    file = inp.files[0]; 
    fr = new FileReader(); 
    fr.onload = createImage; 
    fr.readAsDataURL(file); 

    function createImage() { 
     img = new Image(); 
     img.onload = imageLoaded; 
     img.src = fr.result; 

    } 

    function imageLoaded() { 
     var fabImg = new fabric.Image(img) 
     console.log(fabImg) 

     var canvas = new fabric.Canvas('myCanvas') 

     fabImg.scale(1.0).set({ 
      left: canvas.width/2, 
      top: canvas.height/2 
     }); 

     var rect = new fabric.Rect({ 
      fill: 'lightgray', 
      left: canvas.width/2, 
      top: canvas.height/2, 
      width: 770, 
      height: 300, 
      stroke: 'darkgray', 
      strokeDashArray: [5, 5], 
      selectable: false 
     }); 

     canvas.add(rect) 
     canvas.add(fabImg) 
     canvas.setActiveObject(fabImg) 

     var data = canvas.toDataURLWithCropping('png', { 
      y: rect.top, 
      x: rect.left, 
      width: 770, 
      height: 300, 
      quality: 1 
     }) 

     console.log(data) 
    } 
} 

fabric.Canvas.prototype.toDataURLWithCropping = function (format, cropping, quality) { 
    var canvasEl = this.upperCanvasEl || this.lowerCanvasEl, 
     ctx = this.contextTop || this.contextContainer, 
     tempCanvasEl = fabric.document.createElement('canvas'), 
     tempCtx, imageData; 

    if (!tempCanvasEl.getContext && typeof G_vmlCanvasManager !== 'undefined') { 
     G_vmlCanvasManager.initElement(tempCanvasEl); 
    } 

    this.renderAll(true); 

    tempCanvasEl.width = cropping.width; 
    tempCanvasEl.height = cropping.height; 

    imageData = ctx.getImageData(cropping.x, cropping.y, cropping.width, cropping.height); 

    tempCtx = tempCanvasEl.getContext('2d'); 
    tempCtx.putImageData(imageData, 0, 0); 

    var data = (fabric.StaticCanvas.supports('toDataURLWithQuality')) ? tempCanvasEl.toDataURL('image/' + format, quality) : tempCanvasEl.toDataURL('image/' + format); 

    this.contextTop && this.clearContext(this.contextTop); 
    this.renderAll(); 
    return data; 
}

來源

2013-08-28 akaphenom

你知道toDataURLWithCropping的返回將是一個字符串，你可以在任何地方傳遞，並通過你的表單提交，對吧？或者，如果您想查看返回的結果，只需將它們設置爲''元素的'src'屬性即可。 –

我得到它是一個字符串，如何讓它回到文件輸入控件，以便表單提交工作？ – akaphenom

你只需要知道如何設置（可能隱藏）元素的值？在你的表單中，你可以只有''，然後設置它的值。而不是'console.log（data）'，做一些像'document.getElementById（「theImageUrl」）。value = data'。 –

據我所知，這是不可能的。我選擇了類似於斯科特在評論中提到的解決方案。謝謝大家的考慮。

來源

2013-09-01 14:05:54 akaphenom

從畫布對象上傳到服務器

回答

相關問題