xử lý ảnh ở phía máy khách

Question

Tôi cần lấy một hình ảnh từ một trang web biết URL của nó và sau đó chỉnh sửa nó (cắt xén và thay đổi kích thước) ở phía máy khách.
Cách tốt nhất để thực hiện điều này bằng JavaScript, Jquery, HTML5 là gì?
bạn có thể cung cấp một số liên kết hoặc hướng dẫn, ...?
Cảm ơn bạn trước.

Answer 1

Bạn có thể sử dụng Khung xử lý hình ảnh Javascript như MarvinJ. Ví dụ dưới đây minh họa cách thay đổi kích thước và cắt hình ảnh theo js ở phía máy khách.

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>

Answer 2

Có sự cố bảo mật vô hiệu hóa nhận pixeldata từ một tên miền khác. Nhưng chỉ thực hiện các phép biến đổi cơ bản như xoay/thay đổi kích cỡ/cắt xén, bạn có thể sử dụng api 2d-context để vẽ hình ảnh trong canvas. Xem this article để biết cách sử dụng api 2d ngữ cảnh.