Question

我需要从知道网址的网站上获取图片，然后在客户端编辑它（裁剪和调整大小）。
使用JavaScript，Jquery，HTML5最好的方法是什么？你可以提供一些链接或教程，......？提前谢谢。

Answer 1

您可以使用MarvinJ之类的Javascript图像处理框架。下面的示例演示了如何在客户端的js中调整图像大小和裁剪图像。

＆＃13;

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); 
}

＆＃13;

<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>

＆＃13;

Answer 2

存在一个安全问题，即禁止从另一个域获取pixeldata。但是只进行旋转/调整大小/裁剪等基本变换，您可以使用2d-context api在画布中绘制图像。有关如何使用2d-context api的信息，请参阅this article。

客户端的图像处理

2 个答案: