修剪透明背景的畫布用PHP或javascript繪製的畫布

我已經用HTML5在我的畫布中創建了一個圖像，並保存了它。我的代碼看起來像一個在這裏，在這個例子中： http://www.worldofwebcraft.com/page.php?id=101&t=HTML5_use_php_and_ajax_to_save_canvas_as_png_on_your_server 修剪透明背景的畫布用PHP或javascript繪製的畫布

我的問題是，當我救我的形象，整個畫布被保存，而不是隻在其上有平局的一部分。因此，我得到一張背景較大，透明背景的圖像，圖像背後的圖像不是50x50，而是100x100。

在將數據發送到php文件之前，或在PHP文件中，在保存圖像之後，有沒有辦法在JavaScript網站中修剪此透明背景？

在此先感謝

來源

2011-12-02 novellino

如果你知道你想要什麼部分的畫布。您可以創建一個新的畫布元素，並將其設置爲適合您的尺寸，然後在新畫布上繪製想要的圖像的一部分，然後執行與第二個較小畫布相同的操作。

var smallCanvas = document.createElement('canvas'); 
smallCanvas.width = somewidth 
smallCanvas.height = someheight 
var smCtx = smallCanvas.getContext('2d'); 
smCtxdrawImage(oldCanvas, sx, sy, sw, sh, dx, dy, dw, dh)

需要一個oldCanvas，夾子它於矩形（SX，SY，SW，SH），它擴展到尺寸（DW，DH），在座標（DX，DY）繪製它的smallCanvas。

編輯： 根據我的評論這裏是一個jquery插件，做我一直建議。 Here

來源

2011-12-02 15:15:02

圖像的大小並不總是相同的。我有一個可以改變的形象，讓它變得越來越小，因此每次都是不同的。但也許有一個html5函數，讓我只能得到有一些東西的畫布部分？ – novellino

您可以使用getImageData函數，它返回一組像素數據，您可以搜索並通過查找數據中的第一個像素來查找圖像的最小和最大點的位置。 –

是的，你是對的，這是我應該使用。我發現這個鏈接https://gist.github.com/784508，這正是我想要的。以防萬一有人遇到同樣的問題。謝謝 – novellino

修剪透明背景的畫布用PHP或javascript繪製的畫布

回答

相關問題