HTML画布元素创建不需要的白色边框

Question

对此可能有一个真正简单的解释，但我很难找到它。我正在尝试实现一个裁剪图片功能，我在图片的右侧和底部有一个不受欢迎的边框，如下所示：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);
    }
},

Answer 1

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

clearRect调用将以子像素为基础清除，这意味着它可以将“半”像素剪切掉。

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

幸运的是，只需将值强制为整数值即可轻松解决这个问题：

<强> ONLINE DEMO HERE

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之前添加Math.round()，移位0位（强制浮点数为整数）或改为使用{{1}}。

结果如下：

^{left：使用frational位置清除并修剪，右：使用整数值}