обработка изображений на стороне клиента

Question

Мне нужно получить изображение с веб-сайта, зная его URL, а затем отредактировать его (обрезать и изменить размер) на стороне клиента.
Какой лучший способ сделать это с помощью JavaScript, Jquery, HTML5?Вы предоставляете некоторые ссылки или учебники, ...?
Заранее спасибо.

Answer 1

Вы можете использовать Javascript Image Processing Framework, например, MarvinJ . Пример ниже демонстрирует, как изменить размер и обрезать изображение в формате 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>

Answer 2

Существует проблема безопасности, которая отключает получение пиксельных данных из другого домена. Но чтобы выполнять только базовые преобразования, такие как поворот / изменение размера / обрезка, вы можете использовать API 2d-context для рисования изображения на холсте. См. эту статью , чтобы узнать, как использовать 2d-context api.