下載帆布面料甚至調整

第一步），我畫的1920×1080的圖像與調用drawImage（圖像，0,0）到canvas1後;

setp2）現在我將另一個徽標圖像繪製到另一個名爲canvas2的畫布上，並帶有drawImage（徽標，0,0）;

我用fabricjs爲標誌拖動能力和可重新定義的功能。

第3步然後，我將canvas1 & canvas2繪製到另一個名爲canvas3的畫布並下載它。

在這種情況下一切都很好，除了圖像顯示大（1920 * 1080）。爲了用戶體驗，我使用了圖像調整大小的方法來減少圖像並以900 * 500的畫布顯示。但是當我倒下時，我應該得到帶有標誌的1920 * 1080的原始畫布。但我得到900 * 500的標誌。

在這方面的任何一個幫助，可以將不勝感激

調整尺寸代碼

這裏真正的寬度&真正高度的背景圖像寬度&高度

function ImageResize(){ 
    var d_canvas = document.getElementById('canvas'); 
    var context = d_canvas.getContext('2d'); 
    var background = document.getElementById('background'); 
    var wrh = realWidth/realHeight; 
    newWidth = d_canvas.width; 
    newHeight = newWidth/wrh; 
    if (newHeight > d_canvas.height) { 
     newHeight = d_canvas.height; 
     newWidth = newHeight * wrh; 
    } 
    context.drawImage(background,0,0, newWidth , newHeight); 
}

來源

2016-07-27 Bikshu s

如何實施下載步驟？ – Arnauld

link.href = document.getElementById（canvasId）.toDataURL（）;這裏的canvasId是帶有徽標的圖像的畫布編號 –

如何調整大小？ – Kaiido

使用擴展drawImage的形式來縮放和重新放置原始背景圖片上的徽標：

創建一個尺寸爲1920x1080的第3個html5畫布，並將第1個圖像繪製到第3個畫布。

重新計算標誌座標由FabricJS提供從900x500到1920×1080 &尺寸：

// pseudo-code 
// Given FabricJS's position & size of the logo on a 950x500 stage 
// Calc the logo's relative position & size vs a larger background 
logoX *= 1920/900; 
logoY *= 1080/500; 
logoWidth *= 1920/900; 
logoHeight *= 1080/500;

使用重新計算的位置&大小

thirdContext.drawImage(
    logoImage, 
    0,0,logoImage.width,logoImage.height, 
    logoX,logoY,logoWidth,logoHeight 
);

導出第三畫布繪製標誌到第三畫布

來源

2016-07-27 18:45:06 markE

請通過此網址：http://cricmovie.com/bbb-imagecrop/和getstart>桌面壁紙> 1920 * 1080>下一步>繼續添加徽標>保存>下載..請通過上面提到的步驟我能夠下載圖像，但它採取900 * 500作爲圖像和作爲空白的擴充這是我的問題完全一樣明智我必須編寫其餘所有設備的代碼，請建議在這方面謝謝 –

或你能否提供任何實時示例，使用相同的概念 –

@Bikshus。時間不允許訪問cricmove.com。步驟＃2和＃3是答案的90％。你應該能夠從這裏完成代碼。 :-) – markE

下載帆布面料甚至調整

回答

相關問題