客戶端的圖像處理

我需要從Web站點獲取圖像，瞭解它的URL，然後在客戶端對其進行編輯（裁剪和調整大小）。
使用JavaScript，Jquery，HTML5做到這一點的最佳方式是什麼？
你可以提供一些鏈接或教程，...？
在此先感謝。客戶端的圖像處理

2011-07-17 Aboelnour

[客戶端圖像處理]（http://stackoverflow.com/questions/2174504/client-side-image-processing） – Mat

@Mat的可能重複：這主要是看在Flash/.Net而不是javascript/etc。充滿熱情，但不是愚蠢。 –

您可以使用類似MarvinJ這樣的Javascript圖像處理框架。下面的例子演示瞭如何在客戶端的js中調整大小和裁剪圖像。

var canvas1 = document.getElementById("canvas1"); 
 
var canvas2 = document.getElementById("canvas2"); 
 
var canvas3 = document.getElementById("canvas3"); 
 

 
image = new MarvinImage(); 
 
image.load("https://i.imgur.com/gaW8OeL.jpg", imageLoaded); 
 

 

 
function imageLoaded(){ 
 
\t imageOut = image.clone() 
 
\t image.draw(canvas1) 
 
\t 
 
    // Crop 
 
    Marvin.crop(image, imageOut, 50, 50, 100, 100); 
 
    imageOut.draw(canvas2); 
 
    
 
    // Scale 
 
    Marvin.scale(image, imageOut, 100); 
 
\t imageOut.draw(canvas3); 
 
}

<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script> 
 
<canvas id="canvas1" width="200" height="200"></canvas> 
 
<canvas id="canvas2" width="200" height="200"></canvas><br/> 
 
<canvas id="canvas3" width="200" height="200"></canvas>

來源

2017-11-16 02:06:10

6年以上可以接受的答案：D – Aboelnour

存在一個安全問題，即禁止從另一個域獲取pixeldata。但只做旋轉/調整大小/裁剪等基本轉換，可以使用2d上下文api在畫布中繪製圖像。有關如何使用2d-context API，請參閱this article。

來源

2011-07-17 12:44:49 Rickard

客戶端的圖像處理

回答

相關問題