客户端的图像处理

Question

我需要从知道它的URL的网站上获取图像,然后在客户端编辑它(裁剪和调整大小).
使用JavaScript,Jquery,HTML5最好的方法是什么？
你能提供一些链接或教程,......？
提前致谢.

Answer 1

您可以使用像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(){
	imageOut = image.clone()
	image.draw(canvas1)
	
  // Crop
  Marvin.crop(image, imageOut, 50, 50, 100, 100);
  imageOut.draw(canvas2);
  
  // Scale
  Marvin.scale(image, imageOut, 100);
	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>