1

对此可能有一个非常简单的解释，但我很难找到它。我正在尝试实现裁剪图片功能，并且在图片的右侧和底部出现了不需要的边框，如下所示：http: //imgur.com/Xjtk39K。我想我已经把它缩小到与我裁剪图片时发生的第一个图像翻译有关的事情。这是适用的代码（裁剪后的图像尺寸加倍submitPhotoUpload是由于我的代码中图片高度的一些未知减半。也欢迎对此提出建议）：

cropPhoto: function(evt){

    var formType = App.UploadPhotoView.whichForm;

    var canvas = document.getElementById("crop-canvas-preview-"+formType);
    var context = canvas.getContext("2d");
    if(this.canvasHidden){
        canvas.style.display = 'inline';
        App.UploadPhotoView.canvasHidden = false;
    }

    var x1 = App.UploadPhotoView.x1;
    var y1 = App.UploadPhotoView.y1;
    var width = App.UploadPhotoView.width;

    var previewSize = $("#upload-div-"+formType).height() * 0.25;
    var resizeX = App.UploadPhotoView.scalingFactorX;
    var resizeY = App.UploadPhotoView.scalingFactorY;
    var img = document.getElementById("preview-photo-"+formType);

    context.clearRect(0, 0, previewSize, previewSize);
    context.drawImage(img, x1*resizeX, y1*resizeY, width*resizeX,
                      width*resizeY, 0, 0, previewSize*2, previewSize);
},

submitPhotoUpload: function(){
    var formType = "pic";
    if ($('#preview-photo-'+formType).attr('src') != '#') {
        var uploadImage = new Image();
        uploadImage.src = document.getElementById('crop-canvas-preview-'+formType).toDataURL();

        var canvas = document.createElement('canvas');
        canvas.width = uploadImage.width * 3;
        canvas.height = uploadImage.height * 6;

        canvas.getContext('2d').drawImage(uploadImage, 0, 0, canvas.width, canvas.height);

        var newPhoto = App.Photo.createRecord({
            filename: canvas.toDataURL(),
            location: this.get('location'),
            description: this.get('description')
        });
        this.get('store').commit();
        resetPhotoUpload(formType);
    }else{
        this.set('submissionFailed', true);
    }
},
4

1 回答 1

2

原因是您在清除和裁剪时使用了小数值。

该clearRect调用将在子像素的基础上清除，这意味着它可以保留“一半”像素被剪裁。

但是，该剪辑无法使用子像素剪辑图像，因为图像是基于像素的，并且会截断该值以匹配整数值，因此您会在最终结果中得到一个小间隙。

幸运的是，这很容易通过简单地将值强制为整数值来解决：

在线演示在这里

context.clearRect(0, 0, previewSize|0, previewSize|0);
context.drawImage(img, (x1*resizeX)|0, (y1*resizeY)|0, (width*resizeX)|0,
                  (width*resizeY)|0, 0, 0, previewSize|0, previewSize|0);

当然，您可以考虑在函数调用之外执行此操作。如果您需要更准确的舍入，只需0.5在执行此处操作之前添加值，将 0 位（强制浮点数转换为整数）或使用Math.round()。

结果如下：

结果

左：使用分数位置清除和裁剪，右：使用整数值

于 2013-09-04T22:44:55.550 回答