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

Posted 2023-02-25

【中文标题】向裁剪的画布区域添加背景

【英文标题】：Adding a background to a cropped canvas area

【发布时间】：2014-12-01 15:40:00

【问题描述】：

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

关于如何解决这个问题或尝试不同的解决方案有什么想法吗？ 非常感谢

【参考方案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;

【参考方案2】：

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

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

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

【讨论】：

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