添加背景裁剪画布区域

这是非常好的一个带有调整大小和种植脚本工作然而如果图像没有填满种植面积脚本失败，所有的图像圈黑色。

我的想法是先创建一个实体图像，然后在上面应用裁剪后的图像。但我很挣扎。

我猜的地方在这里：

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

任何想法上怎样去这或尝试不同的解决方案吗？非常感谢

来源

2014-12-01 Kris

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

来源

2014-12-01 21:49:58 markE

你是明星，非常感谢你。 – Kris 2014-12-02 10:34:52

在这个例子中，他们用CSS应用背景，重复图像与类“组件”在div

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

如果你愿意，你可以添加一个背景图像。如果你选择一个中性的白色重复模式，它应该工作？如果不这样做，最好尝试一下小提琴，这样我们就可以看到jquery问题所在。

来源

2014-12-01 16:36:46

不幸的是这似乎不有所作为，如果你尝试他们的演示（制作比“裁剪框”缩小图像），它还是失败并且不会返回裁剪后的图像。 – Kris 2014-12-01 17:02:05

添加背景裁剪画布区域

回答

相关问题