作物本地圖像文件

我有一個表單，允許用戶上傳圖片和裁剪我已經想通了，它作物本地圖像文件

1.用戶流量上傳圖片
2.Server過程，併發送回瀏覽器
3.用戶裁剪和發送到服務器
4.Server過程，並將其保存

是否有任何其他的方式來實現這一目標？
也許使用JavaScript來加載圖像，然後裁剪，然後發送到服務器來處理它。
有沒有辦法？

編輯我希望避免發送這些圖像到服務器來處理它。
加載可能使用的FileReader ..
我有沒有運氣文件上Google上搜尋它

來源

2012-12-24 slier

你可能想看看這個鏈接... http://whathaveyoutried.com –

http://deepliquid.com/content/Jcrop.html – elclanrs

您可以使用FileReader + Canvas來讀取本地文件，然後裁剪它而不發送到服務器。

下面是演示如何做到這一點的演示。

<form><input type="file" id=f></form> 
<canvas id=c width="600" height="600"></canvas> 
<script> 
var f = document.getElementById('f'); 
var canvas = document.getElementById('c'); 
var context = canvas.getContext('2d'); 
f.onchange = function() { 
    var file = this.files[0]; 
    var reader = new FileReader(); 
    reader.onload = function(evt) { 
     var img = new Image(); 
     img.onload = function() { 
      context.drawImage(this, 0, 0, 100, 100, 0, 0, 100, 100); 
      var pngUrl = canvas.toDataURL(); 
      //alert(pngUrl); // send this url to server to save the image 
     } 
     img.src = evt.target.result; 
    } 
    reader.readAsDataURL(file); 
} 
</script>

什麼，你仍然需要做的是使用了jQuery插件jcrop爲了讓用戶選擇裁剪區域，因爲在這個演示中，我只是硬編碼頂部的作物留下100×100像素。

看起來你需要使用jcrops onSelect事件獲得剪切區域的原點+寬+高，喂這些值轉換成context.drawImage

希望你可以處理剩下的，運氣好

來源

2012-12-25 06:32:38 goat

這是我想要的，thx你這麼多，當然不probem先生，我會upvote它 – slier

爲此，I'd use jCrop。確保您可以訪問系統上的ImageMagick和/或GD - 您很可能需要進行處理。

來源

2012-12-24 21:28:47 jbnunn

所以基本上我需要發送到服務器先處理它，然後發回瀏覽器和使用jcrop允許用戶裁剪它的權利？..即時通訊看起來是，有沒有一種方法來加載圖像使用JavaScript本身，然後裁剪 – slier

好吧，噸服務器部分將在您做出作物選擇後開始發揮作用。我會看看這裏的例子http://deepliquid.com/projects/Jcrop/demos.php – jbnunn

是的，這是我想要的，用戶先裁剪後，然後發送到服務器，而不是發送上傳的圖像，而不先裁剪它。 .still，thx爲你的建議 – slier

作物本地圖像文件

回答

相關問題