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

我正在尝试从中调整脚本大小和裁剪脚本

这是非常好的，但是如果图像没有填充裁剪区域，脚本失败，所有图像变黑

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

我猜在这附近的某个地方：

    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);

关于如何进行这项工作或尝试不同的解决方案，有什么想法吗？

---

非常感谢

在本例中，他们使用css将背景重复图像应用于类为“component”的div

---

如果需要，可以添加背景图像。如果你选择一个中性的白色重复图案，它应该会工作吗？如果这还不行，那么最好试着做一个小动作，这样我们就可以看到jquery的问题所在。

是的，他们在对图像目标成像时错过了边界检查

您可以按如下方式对其进行边界校正：

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;}

if（leftimage\u target.height）{height=image\u target.height；}

不幸的是，这似乎没有什么区别，如果您尝试他们的演示（使图像小于“cropbox”），它仍然会失败，并且不会返回裁剪过的图像。

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;}