对此可能有一个非常简单的解释,但我很难找到它。我正在尝试实现裁剪图片功能,并且在图片的右侧和底部出现了不需要的边框,如下所示: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);
}
},