[英]Is there in Jquery or Dojo or plain JavaScript way to convert div to image?
Is there in Jquery or Dojo or pure JavaScript way to convert div to image?是否有 Jquery 或 Dojo 或纯 JavaScript 方式将 div 转换为图像? Extension of image is arbitrary.
图像的扩展是任意的。
You could create an empty div and create a class with the background-image property set to your image.您可以创建一个空 div 并创建一个 class 并将 background-image 属性设置为您的图像。 Then, using jQuery or Dojo, add the class to your div.
然后,使用 jQuery 或 Dojo,将 class 添加到您的 div。
.myImage {
background-image: url(image.png);
background-repeat: no-repeat;
}
<div id="myDiv"></div>
$('#myDiv').addClass('myImage');
Yes, there is, but it's tricky and maybe impossible to get it to render exactly as it appears on the page unless the div element and its appearance as possibly defined in CSS are defined in a manner than can fully stand-alone from the page.是的,有,但它很棘手,并且可能无法让它完全按照它在页面上显示的方式呈现,除非 CSS 中可能定义的 div 元素及其外观的定义方式不能完全独立于页面。
getImageData()
getImageData()
获取 canvas 数据toDataURL
)toDataURL
作为一个步骤完成) An example image format easy to work with on one's own is the Unix PNM (PBM, PGM, and PPM) formats which can be sent as ASCII data.一个易于自己使用的示例图像格式是 Unix PNM(PBM、PGM 和 PPM)格式,可以作为 ASCII 数据发送。
P2
# foo.pgm
18 7
9
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 3 3 3 3 0 0 6 6 6 6 0 0 9 9 9 9 0
0 3 0 0 0 0 0 6 0 0 6 0 0 9 0 0 9 0
0 3 3 3 0 0 0 6 0 0 6 0 0 9 0 0 9 0
0 3 0 0 0 0 0 6 0 0 6 0 0 9 0 0 9 0
0 3 0 0 0 0 0 6 6 6 6 0 0 9 9 9 9 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
(Enlarged 20x: http://www.codelib.net/html/foo.png ) (放大 20 倍: http://www.codelib.net/html/foo.png )
Stealing from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement to show you an example of using toDataURL
to output PNG image data:从https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement中窃取,向您展示使用
toDataURL
到 output PNG 图像数据的示例:
function test() {
var canvas = document.getElementById("canvas");
var url = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = url;
document.body.appendChild(newImg);
}
Another way is to build upon the work done by html2canvas:另一种方法是建立在 html2canvas 所做的工作的基础上:
create screenshot of webpage using html2canvas (unable to initialize properly) 使用 html2canvas 创建网页截图(无法正确初始化)
The accepted answer there shows how to screenshot the HTML body element, but it could easily be modified to "screenshot" the contents of a div by modifying the jQuery selector on the first line of the code.那里接受的答案显示了如何截取 HTML 正文元素,但可以通过修改代码第一行的 jQuery 选择器轻松修改为“截屏”div的内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.