我正在尝试将 DIV 转换为单个图像。 div 中有 4 个图像。我找到了“htmltocanvas”的 js,但是这个 jquery 插件不会创建包含 div 中存在的所有图像的图像。
这里是div代码,里面有图像,需要转换成图像。
<div id="myJershy">
<!-- Color 3 -->
<img src="grey.gif" id="grey" style="position: fixed; top: 8px; left: 12px; width: 935px;">
<!-- Color 2 -->
<img class="orange" id="orange" src="orange.gif" style="position: fixed; left: 10px; top: 8px;">
<!-- Color 4 -->
<img src="gold.gif" id="gold" style="position: fixed; top: 12px; left: 22px;">
<!-- Color 1 -->
<img class="back" id="black" src="back.gif" style="position: fixed; left: 11px; top: 9px;">
<!-- outline -->
<img class="skel" id="skel" src="outline.gif" style="position: fixed;">
</div>
我也尝试过下面的 JavaScript 代码,但没有成功。
var htmlcontent = $("#myJershy").html();
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
htmlcontent+
"</div>" +
"</foreignObject>" +
"</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
};
document.getElementById('previewproduct').src = url;
请注意“html div”有多个图像。
最佳答案
这是我的尝试:
不用担心 html 中那些巨大的代码,它们只是经过 URL 编码的图像,如果您的图像托管在您的域中,则不必这样做。
导出为 jpg 的图像是带有红色边框的图像(在结果窗口中滚动):
var DivsToJPG = function( parent ) {
this.canvasSizeX = 0;
this.canvasSizeY = 0;
this.init = function( parent ) {
this.images = parent.find('img');
this.setSizes();
this.createCanvas();
this.drawImages();
this.exportJPG();
}
this.setSizes = function() {
for (var i = 0, l = this.images.length; i < l ; i++) {
var currentImage = this.images.eq(i);
var posX = currentImage.position().left;
var width = currentImage.width();
this.canvasSizeX = this.canvasSizeX > (posX+width) ? this.canvasSizeX : posX + width;
//console.log(this.canvasSizeX);
var posY = currentImage.position().top;
var height = currentImage.height();
this.canvasSizeY = this.canvasSizeY > (posY+height) ? this.canvasSizeY : posY + height;
}
}
this.createCanvas = function() {
this.canvas = document.createElement('canvas');
this.canvas.id = "exportCanvas";
this.canvas.width = this.canvasSizeX;
this.canvas.height = this.canvasSizeY;
this.ctx = this.canvas.getContext("2d");
document.body.appendChild(this.canvas);
}
this.drawImages = function() {
for (var i = 0, l = this.images.length; i < l ; i++) {
var currentImage = this.images[i];
var $currentImage = this.images.eq(i);
this.ctx.drawImage(currentImage, $currentImage.position().left, $currentImage.position().top, $currentImage.width(), $currentImage.height());
}
}
this.exportJPG = function() {
var dataURL = this.canvas.toDataURL();
this.img = document.createElement('img');
this.img.id = "createdImage";
this.img.src = dataURL;
document.body.appendChild(this.img);
}
this.init( parent );
}
var divsToJPG = new DivsToJPG($('#myJershy'));
PS:它有点长,但它应该处理所有事情,它使用了一些 jQuery
关于javascript - 使用javascript将具有多个图像的html div转换为单个图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21549338/