保存大於實際屏幕的畫布繪圖

我正在通過畫布動態繪製平面佈局圖，您可以向上/向下滾動左/右，但是我想將整個佈局圖的圖像保存爲其他用途。我知道我可以縮放平面圖並捕捉圖像，但我需要它的分辨率高於我捕捉的實際屏幕。保存大於實際屏幕的畫布繪圖

我目前使用FileSaver.js將畫布保存爲位圖，因爲它非常容易。

A little illustration of what I'm thinking

這可能嗎？

來源

2013-07-30 Franci

你試過canvas.toDataURL？如果是這樣，你能說清楚爲什麼這是不合適的嗎？ – enhzflep

下面是如何將畫布導出爲圖像的說明http://stackoverflow.com/a/3514404/2633952 – yonathaniel

如果沒有更多信息很難分辨，但您可以創建一個更大的畫布（需要它的大小）並隱藏它。然後，當您想要捕捉時，您將所有內容重新繪製到該畫布中，然後從中保存您的照片而不是顯示的照片。

來源

2013-07-30 11:30:43 Virus721

謝謝！我最初在CSS中設置了較大的尺寸，這只是扭曲了整個圖像。我現在設置了通過JavaScript的畫布大小，它的工作原理，所以謝謝你指出我正確的方向。 – Franci

所以你不需要保存畫布，但圖像。
我不知道你的FileSaver.js，但如果它不能直接保存圖像，把圖像的新畫布裏面很簡單：

function getCanvasFromImage(img) { 
    var cv = document.createElement('canvas'); 
    cv.width = img.width; cv.height = img.height; 
    cv.getContext('2d').putImage(img, 0, 0); 
    return cv; 
}

來源

2013-07-30 12:07:39 GameAlchemist

保存大於實際屏幕的畫布繪圖

回答

相關問題