Question

我正在尝试在网站上创建一个字段，其中图像被裁剪为图像的一部分，因此您只能在旋转时看到部分图像。

图像是指向多个方向的箭头，需要它旋转。

Answer 1

这是一个简单的代码，仅适用于调整客户端大小。

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

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

此外，您可以使用已经制作的jQuery图像插件。

参考 - http://www.jqueryrain.com/demo/jquery-crop-image-plugin/

Answer 2

您可以使用CSS overflow：hidden属性将图像包装在较小的div中。看这个例子： http://jsfiddle.net/Nillervision/CBsLj/3/

#parentDiv{
    width:200px;
    height:200px;
    border:1px solid black;
    overflow:hidden;    
}
#theImage{
    margin-top:-100px;
    margin-left:-100px;
    width:400px;
    height:400px;
    display:block;
    -webkit-animation: rotAnim linear 5s infinite; 
    animation: rotAnim linear 5s infinite;
}
@-webkit-keyframes rotAnim { 
    from {
    -webkit-transform: rotate(0deg);
    }
    to {
    -webkit-transform: rotate(360deg);
    }

} 
@keyframes rotAnim { 
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }

}

裁剪图像和旋转

2 个答案: