【JS】如何剪取畫面，並存成SVG或PNG

js canvas svg

greenriver 2023-04-20 16:14:50 ‧ 1135 瀏覽

分享至

大家好，
想請問，因為我想利用html、css來限制x軸名稱的長度，
所以將x軸的名稱與svg分開來畫。如下。

<body>
    <main>
        <div>
            <svg></svg>
        </div>
        <div>
            //svg的x軸
        </div>
    </main>
</body>

因為我想要將資料的圖片截圖下來，存成png或svg或pdf或影印。
我要怎麼做才能將整個main的內容截成一張img或svg呢?
感謝。

窮嘶發發發 iT邦高手 1 級 ‧ 2023-04-20 16:19:25 檢舉

網路上的範例
https://mnya.tw/cc/word/1573.html
更多的方法
https://www.google.com/search?q=JS+將目前頁面+變成圖片
如果不要JS，你看你喜歡哪一種語言，把那個JS換掉，例如 JQUERY AJAX 之類的或是其他
JS 就是用 html2canvas 這個來轉換

greenriver iT邦研究生 5 級 ‧ 2023-04-21 16:58:17 檢舉

謝謝你

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

rain_yu

iT邦新手 1 級 ‧ 2023-04-21 08:26:12

最佳解答

在JavaScript中，可以使用HTML5的Canvas元素來剪取畫面並存成SVG或PNG。

首先，需要在HTML中創建一個Canvas元素

<canvas id="myCanvas"></canvas>

在JavaScript中，使用canvas.getContext('2d')方法來獲取2D繪圖環境

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

使用ctx.drawImage()方法將要剪取的圖片繪製到Canvas上

var imageObj = new Image();
imageObj.onload = function() {
  ctx.drawImage(imageObj, 0, 0);
};
imageObj.src = 'example.png';

使用canvas.toDataURL()方法將Canvas轉換成SVG或PNG格式的圖片

// 轉換為SVG
var svgData = canvas.toDataURL('image/svg+xml');
// 轉換為PNG
var pngData = canvas.toDataURL('image/png');

最後，可以將轉換後的圖片下載或顯示出來

// 下載SVG
var link = document.createElement('a');
link.download = 'image.svg';
link.href = svgData;
link.click();

// 顯示PNG
var pngImg = new Image();
pngImg.src = pngData;
document.body.appendChild(pngImg);