如何在不使用Canvas的情况下将HTML页面中的div转换为Image? [英] How to convert a div in a HTML page into Image without using Canvas?
本文介绍了如何在不使用Canvas的情况下将HTML页面中的div转换为Image?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何在不使用画布的情况下将div
元素转换为图像?
How can we convert a div
element into an image without using canvas?
组织当前使用的浏览器是IE8,而canvas与之不兼容.
The browser that organization currently uses is IE8 and canvas is not compatible with it.
我正在寻找仅使用JavaScript/jQuery的解决方案.
I'm looking for a solution using only JavaScript/jQuery.
推荐答案
是的,我们可以使用图像首页.
Yes we can convert a div element into an image by using dom-to-image.
dom-to-image是一个库,可以将任意DOM节点转换为用JavaScript编写的矢量(SVG)或光栅(PNG或JPEG)图像.
dom-to-image is a library which can turn arbitrary DOM node into a vector (SVG) or raster (PNG or JPEG) image, written in JavaScript.
var node = document.getElementById('my-node'); //assign our dom id to a variable
domtoimage.toPng(node)
.then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
document.body.appendChild(img); //append the converted image to html body
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
Here is the simple example of converting html dom to image
这篇关于如何在不使用Canvas的情况下将HTML页面中的div转换为Image?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文