添加背景裁剪畫布區域

這是非常好的一個帶有調整大小和種植腳本工作然而如果圖像沒有填滿種植面積腳本失敗，所有的圖像圈黑色。

我的想法是先創建一個實體圖像，然後在上面應用裁剪後的圖像。但我很掙扎。

我猜的地方在這裏：

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

添加背景裁剪畫布區域

回答

相關問題