javascript - 使用 JavaScript 通过浏览器裁剪图像客户端

Question

是否可以通过带有 JavaScript 的浏览器在前端裁剪图像？

我能够将图像连同尺寸和坐标一起发送到后端裁剪图像的服务器。

我想要做的是通过浏览器使用 JavaScript 裁剪图像，然后如果需要，将裁剪的图像发送到服务器。

Answer 1

您可以通过将图像加载到 Canvas 元素然后操作 Canvas

基础教程在这里

http://www.w3schools.com/html/html5_canvas.asp

(plenty more available)

Answer 2

您可以将图像用作元素的背景，然后根据background-position: Zpx Ypx;需要使用图像定位。

它不会被裁剪，但看起来就像是这样。

Answer 3

你可以尝试从

http://www.codeforest.net/html5-image-upload-resize-and-crop

function resizeAndUpload(file) {
var reader = new FileReader();
    reader.onloadend = function() {

    var tempImg = new Image();
    tempImg.src = reader.result;
    tempImg.onload = function() {

        var MAX_WIDTH = 400;
        var MAX_HEIGHT = 300;
        var tempW = tempImg.width;
        var tempH = tempImg.height;
        if (tempW > tempH) {
            if (tempW > MAX_WIDTH) {
               tempH *= MAX_WIDTH / tempW;
               tempW = MAX_WIDTH;
            }
        } else {
            if (tempH > MAX_HEIGHT) {
               tempW *= MAX_HEIGHT / tempH;
               tempH = MAX_HEIGHT;
            }
        }

        var canvas = document.createElement('canvas');
        canvas.width = tempW;
        canvas.height = tempH;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0, tempW, tempH);
        var dataURL = canvas.toDataURL("image/jpeg");

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(ev){
            document.getElementById('filesInfo').innerHTML = 'Done!';
        };

        xhr.open('POST', 'uploadResized.php', true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        var data = 'image=' + dataURL;
        xhr.send(data);
      }

   }
   reader.readAsDataURL(file);
}

此代码仅用于客户端大小调整。对于裁剪，您可以使用 Jcrop 之类的东西。