問題描述

我已經閱讀了一些類似的問題和答案，但沒有一個能完全解決我的問題.

I have read a few similar questions and answers, but none completely address my issue.

這是我的場景:我有一個類似于 tinyMCE(雖然是自制版本)的編輯器.它允許用戶輸入一些文本和一兩個圖像等.我有代碼可以將項目放入其中并將它們實時呈現到一個較小的 div(本質上是一個縮略圖)中.

Here is My Scenario: I have what is similar to a tinyMCE (a home-brew version though) kind of editor. It lets users enter some text, and an image or two, etc. I have code that takes the items in there and renders them into a smaller div (what is essentially a thumbnail) in real time.

這是我想做的事情最終，用戶可能想在其他地方使用他們的頁面"，所以我想讓他們去一個屏幕，查看每個頁面的縮略圖，然后選擇一個.

Here is What I Want to Do Ultimately, the user may want to use their 'page' somewhere else, so I would like to let them go to a screen, view thumbnails of each page, and pick one.

問題來了顯然，我可以使用相同的縮略圖代碼來呈現每個頁面縮略圖.但是，它可能會占用大量帶寬(每個頁面可能有多個圖像，更不用說必須執行多次計算——我們說的是預覽頁面上可能有 40 到 50 個縮略圖).

Here is the Problem Obviously, I could just use the same thumbnail code to render each page thumbnail. However, it can be bandwidth intensive (each page could have several images, not to mention the calculation would have to be performed many times - we are talking perhaps 40 to 50 thumbnails on a preview page).

所以，我想嘗試獲取縮略圖 div，并在他們將頁面保存在編輯器中時以某種方式創建一個 png 或 jpg(因此頁面的代碼，還有一個縮略圖)，并將其推到我的 PHP 腳本將圖像保存到服務器.

So, I wanted to try to take the thumbnail div, and somehow create a png or jpg when they save the page in the editor (so the code for the page, and also a thumbnail image), and push it up to my PHP script to save the image to the server.

我的第一個想法是也許畫布可以做到這一點，但是首先將文本和圖像翻譯到畫布上存在問題，這可能也可能不可能.

My first thought was that maybe canvas could do that, but there is the issue of translating the text and images onto the canvas first, which may or may not be possible.

原來如此.我對任何和所有選項都感興趣，包括可以做到這一點的商業庫(如果有的話)——唯一的問題是，希望它在 javascript 中.

So there it is. I am interested in any and all options, including commercial libraries if available that will do this -- only thing is, would like it to be in javascript.

推薦答案

您可能需要查看:http://html2canvas.hertzen.com/

已經有人問過類似的問題:使用 PHP 和/或 Javascript 進行屏幕抓取?

A similar question was already asked: Screen Grab with PHP and/or Javascript?

這篇關于將 Div 內容或畫布另存為圖像的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！