Question

我正在尝试使用Resizing和cropping脚本 Codrops

非常好，但是如果图像没有填满裁剪区域，则脚本会失败并且所有图像都会变黑。

我的想法是先创建一个实体图像，然后将裁剪后的图像应用到顶部。但我很挣扎。

我猜这里的某个地方：

    var crop_canvas,
    left = $('.size_guide').offset().left - $container.offset().left,
    top =  $('.size_guide').offset().top - $container.offset().top,
    width = $('.size_guide').width(),
    height = $('.size_guide').height();

crop_canvas = document.createElement('canvas');


crop_canvas.width = width;
crop_canvas.height = height;



crop_canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height);

有关如何解决此问题或尝试其他解决方案的任何想法？非常感谢

Answer 1

在示例中，他们将带有css的背景重复图像应用于具有类＆＃34;组件＆＃34;

的div

 background: url(../img/gridme.png) repeat center center;

如果您愿意，可以添加背景图片。如果你选择一个中性的白色重复图案，它应该工作吗？如果那不是最好尝试做一个小提琴，那么我们可以看到jquery问题所在。

Answer 2

是的，当drawImaging image_target时，他们错过了边界检查。

您可以像这样对它们进行边界校正：

if(left<0){left=0;}
if(top<0){top=0;}
if(width>image_target.width){width=image_target.width;}
if(height>image_target.height){height=image_target.height;}

将背景添加到裁剪的画布区域

2 个答案: