向裁剪的画布区域添加背景

Question

我正在尝试使用调整大小和裁剪脚本 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

是的，他们在绘制 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;}

Answer 2

在示例中，他们将带有 css 的背景重复图像应用于具有“组件”类的 div

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

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