javascript - HTML Canvas 元素创建不需要的白色边框

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 调用将以子像素为基础进行清除，这意味着它可以保留“一半”像素被剪裁掉。

但是剪辑不能剪辑带有子像素的图像，因为图像是基于像素的，并且会 chop 值以匹配整数值，因此最终结果会出现小差距。

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

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 添加到值中，然后再执行此处的操作，移动 0 位(这会将 float 强制为整数)或使用 Math.round() 相反。

结果如下:

^{左:使用小数位置清除和裁剪，右:使用整数值}