มีวิธีในการแสดง html เป็นภาพเช่น PNG หรือไม่? ฉันรู้ว่ามันเป็นไปได้กับผืนผ้าใบ แต่ฉันต้องการที่จะแสดงองค์ประกอบ html มาตรฐานเช่น div เช่น
มีวิธีในการแสดง html เป็นภาพเช่น PNG หรือไม่? ฉันรู้ว่ามันเป็นไปได้กับผืนผ้าใบ แต่ฉันต้องการที่จะแสดงองค์ประกอบ html มาตรฐานเช่น div เช่น
คำตอบ:
ฉันรู้ว่านี่เป็นคำถามเก่าที่มีคำตอบมากมายอยู่แล้ว แต่ฉันยังใช้เวลาหลายชั่วโมงในการพยายามทำสิ่งที่ฉันต้องการ:
การใช้หัวขาดของ Chrome (รุ่น 74.0.3729.157 เป็นการตอบสนองนี้) มันง่ายจริง ๆ :
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless --screenshot --window-size=256,256 --default-background-color=0 button.html
คำอธิบายของคำสั่ง:
--headless
เรียกใช้ Chrome โดยไม่เปิดและออกหลังจากคำสั่งเสร็จสิ้น--screenshot
จะจับภาพหน้าจอ (โปรดทราบว่าจะสร้างไฟล์ที่เรียกว่าscreenshot.png
ในโฟลเดอร์ที่รันคำสั่ง)--window-size
อนุญาตให้จับเฉพาะบางส่วนของหน้าจอ (รูปแบบคือ--window-size=width,height
)--default-background-color=0
เป็นเคล็ดลับมายากลที่บอกให้ Chrome ใช้พื้นหลังโปร่งใสไม่ใช่สีขาวเริ่มต้น--screenshot='absolute\path\of\screenshot.png'
ทำงานให้ฉัน
ใช่. HTML2Canvasมีอยู่เพื่อแสดง HTML บน<canvas>
(ซึ่งคุณสามารถใช้เป็นรูปภาพได้)
หมายเหตุ: มีปัญหาที่ทราบอยู่ว่าจะไม่ทำงานกับ SVG
ฉันขอแนะนำห้องสมุดdom-to-imageที่เขียน แต่เพียงผู้เดียวเพื่อแก้ไขปัญหานี้ (ฉันเป็นผู้ดูแล)
นี่คือวิธีการใช้งานของคุณ (เพิ่มเติมที่นี่ ):
var node = document.getElementById('my-node');
domtoimage.toPng(node)
.then (function (dataUrl) {
var img = new Image();
img.src = dataUrl;
document.appendChild(img);
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
domtoimage.toSvg
) จากนั้นแสดงภาพของคุณเองบนผ้าใบและลองเล่นด้วยความละเอียดของผ้าใบนั้น อาจเป็นไปได้ที่จะใช้คุณสมบัติเช่นตัวเลือกการแสดงผลบางอย่างใน lib เองดังนั้นคุณสามารถส่งผ่านขนาดภาพเป็นพิกเซล หากคุณต้องการฉันขอขอบคุณที่คุณสร้างปัญหาใน GitHub
มีตัวเลือกมากมายและพวกเขาล้วนมีข้อดีและข้อเสีย
ข้อดี
จุดด้อย
ข้อดี
จุดด้อย
ข้อดี
จุดด้อย
ข้อดี
จุดด้อย
การเปิดเผยข้อมูล: ฉันเป็นผู้ก่อตั้ง ApiFlash ผมทำดีที่สุดของฉันที่จะให้คำตอบที่ซื่อสัตย์และมีประโยชน์
ทุกคำตอบที่นี่ใช้ห้องสมุดของบุคคลที่สามในขณะที่การแสดงผล HTML เพื่อภาพที่ได้ค่อนข้างง่ายใน Javascript บริสุทธิ์ มีเป็นได้แม้บทความเกี่ยวกับเรื่องนี้ในส่วนผ้าใบบน MDN
เคล็ดลับคือ:
drawImage
ลงบนผืนผ้าใบconst {body} = document
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
canvas.width = canvas.height = 100
const tempImg = document.createElement('img')
tempImg.addEventListener('load', onTempImageLoad)
tempImg.src = 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml"><style>em{color:red;}</style><em>I</em> lick <span>cheese</span></div></foreignObject></svg>')
const targetImg = document.createElement('img')
body.appendChild(targetImg)
function onTempImageLoad(e){
ctx.drawImage(e.target, 0, 0)
targetImg.src = canvas.toDataURL()
}
บางสิ่งที่ควรทราบ
Document
กลายเป็น raster (เช่น a Canvas
), แต่เนื่องจากไม่มีใครใส่ใจที่จะทำให้มันเป็นมาตรฐานเราจึงต้องใช้ความวิกลจริตเหมือนภาพประกอบด้านบน รหัส).
คุณสามารถใช้PhantomJSซึ่งเป็น webkit ที่ไม่มีหัว (โปรแกรมเรนเดอร์ในซาฟารีและโครเมียม (จนถึงล่าสุด)) คุณสามารถเรียนรู้วิธีการทำจับภาพหน้าจอของหน้าเว็บที่นี่ หวังว่าจะช่วย!
คุณสามารถใช้เครื่องมือ HTML เป็น PDF เช่น wkhtmltopdf จากนั้นคุณสามารถใช้เครื่องมือ PDF เพื่อรูปภาพเช่น imagemagick เป็นที่ยอมรับว่าเป็นฝั่งเซิร์ฟเวอร์และเป็นกระบวนการที่ซับซ้อนมาก ...
Node.js
ห้องสมุดนี้สำหรับ ส่วนหน้าง่าย ๆ ?
ห้องสมุดเดียวที่ฉันต้องทำงานกับ Chrome, Firefox และ MS Edge คือrasterizeHTML rasterizeHTMLมันให้คุณภาพที่ดีกว่า HTML2Canvas และยังคงรองรับ HTML2Canvas
รับองค์ประกอบและดาวน์โหลดเป็น PNG
var node= document.getElementById("elementId");
var canvas = document.createElement("canvas");
canvas.height = node.offsetHeight;
canvas.width = node.offsetWidth;
var name = "test.png"
rasterizeHTML.drawHTML(node.outerHTML, canvas)
.then(function (renderResult) {
if (navigator.msSaveBlob) {
window.navigator.msSaveBlob(canvas.msToBlob(), name);
} else {
const a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = canvas.toDataURL();
a.download = name;
a.click();
document.body.removeChild(a);
}
});
rasterizeHTML.drawHTML(node.innerHTML, canvas)
โปรดทราบว่าฉันกำลังเรียก innerHTML บนโหนด
ใช้html2canvasเพียงแค่รวมปลั๊กอินและวิธีการโทรเพื่อแปลง HTML เป็น Canvas จากนั้นดาวน์โหลดเป็นรูปภาพ PNG
html2canvas(document.getElementById("image-wrap")).then(function(canvas) {
var link = document.createElement("a");
document.body.appendChild(link);
link.download = "manpower_efficiency.jpg";
link.href = canvas.toDataURL();
link.target = '_blank';
link.click();
});
ที่มา : http://www.freakyjolly.com/convert-html-document-into-image-jpg-png-from-canvas/
ฉันไม่คาดหวังว่าสิ่งนี้จะเป็นคำตอบที่ดีที่สุด แต่มันก็น่าสนใจพอที่จะโพสต์
เขียนแอปที่เปิดเบราว์เซอร์ที่คุณชื่นชอบไปยังเอกสาร HTML ที่ต้องการปรับขนาดหน้าต่างให้เหมาะสมและถ่ายหน้าจอ จากนั้นเอาเส้นขอบของภาพ
ใช้รหัสนี้มันจะทำงานอย่างแน่นอน:
<script type="text/javascript">
$(document).ready(function () {
setTimeout(function(){
downloadImage();
},1000)
});
function downloadImage(){
html2canvas(document.querySelector("#dvContainer")).then(canvas => {
a = document.createElement('a');
document.body.appendChild(a);
a.download = "test.png";
a.href = canvas.toDataURL();
a.click();
});
}
</script>
อย่าลืมรวมไฟล์ Html2CanvasJS ในโปรแกรมของคุณด้วย https://html2canvas.hertzen.com/dist/html2canvas.js
คุณไม่สามารถทำสิ่งนี้ได้อย่างแม่นยำ 100% โดยใช้ JavaScript เพียงอย่างเดียว
มี Qt Webkit เป็นเครื่องมือออกมีและรุ่นหลาม หากคุณต้องการทำด้วยตัวเองฉันประสบความสำเร็จกับ Cocoa:
[self startTraverse:pagesArray performBlock:^(int collectionIndex, int pageIndex) {
NSString *locale = [self selectedLocale];
NSRect offscreenRect = NSMakeRect(0.0, 0.0, webView.frame.size.width, webView.frame.size.height);
NSBitmapImageRep* offscreenRep = nil;
offscreenRep = [[NSBitmapImageRep alloc] initWithBitmapDataPlanes:nil
pixelsWide:offscreenRect.size.width
pixelsHigh:offscreenRect.size.height
bitsPerSample:8
samplesPerPixel:4
hasAlpha:YES
isPlanar:NO
colorSpaceName:NSCalibratedRGBColorSpace
bitmapFormat:0
bytesPerRow:(4 * offscreenRect.size.width)
bitsPerPixel:32];
[NSGraphicsContext saveGraphicsState];
NSGraphicsContext *bitmapContext = [NSGraphicsContext graphicsContextWithBitmapImageRep:offscreenRep];
[NSGraphicsContext setCurrentContext:bitmapContext];
[webView displayRectIgnoringOpacity:offscreenRect inContext:bitmapContext];
[NSGraphicsContext restoreGraphicsState];
// Create a small + large thumbs
NSImage *smallThumbImage = [[NSImage alloc] initWithSize:thumbSizeSmall];
NSImage *largeThumbImage = [[NSImage alloc] initWithSize:thumbSizeLarge];
[smallThumbImage lockFocus];
[[NSGraphicsContext currentContext] setImageInterpolation:NSImageInterpolationHigh];
[offscreenRep drawInRect:CGRectMake(0, 0, thumbSizeSmall.width, thumbSizeSmall.height)];
NSBitmapImageRep *smallThumbOutput = [[NSBitmapImageRep alloc] initWithFocusedViewRect:CGRectMake(0, 0, thumbSizeSmall.width, thumbSizeSmall.height)];
[smallThumbImage unlockFocus];
[largeThumbImage lockFocus];
[[NSGraphicsContext currentContext] setImageInterpolation:NSImageInterpolationHigh];
[offscreenRep drawInRect:CGRectMake(0, 0, thumbSizeLarge.width, thumbSizeLarge.height)];
NSBitmapImageRep *largeThumbOutput = [[NSBitmapImageRep alloc] initWithFocusedViewRect:CGRectMake(0, 0, thumbSizeLarge.width, thumbSizeLarge.height)];
[largeThumbImage unlockFocus];
// Write out small
NSString *writePathSmall = [issueProvider.imageDestinationPath stringByAppendingPathComponent:[NSString stringWithFormat:@"/%@-collection-%03d-page-%03d_small.png", locale, collectionIndex, pageIndex]];
NSData *dataSmall = [smallThumbOutput representationUsingType:NSPNGFileType properties: nil];
[dataSmall writeToFile:writePathSmall atomically: NO];
// Write out lage
NSString *writePathLarge = [issueProvider.imageDestinationPath stringByAppendingPathComponent:[NSString stringWithFormat:@"/%@-collection-%03d-page-%03d_large.png", locale, collectionIndex, pageIndex]];
NSData *dataLarge = [largeThumbOutput representationUsingType:NSPNGFileType properties: nil];
[dataLarge writeToFile:writePathLarge atomically: NO];
}];
หวังว่านี่จะช่วยได้!
ติดตั้ง phantomjs
$ npm install phantomjs
สร้างไฟล์ github.js ด้วยรหัสต่อไปนี้
var page = require('webpage').create();
//viewportSize being the actual size of the headless browser
page.viewportSize = { width: 1024, height: 768 };
page.open('http://github.com/', function() {
page.render('github.png');
phantom.exit();
});
ส่งไฟล์เป็นอาร์กิวเมนต์ไปยัง phantomjs
$ phantomjs github.js
HtmlToImage.jar จะเป็นวิธีที่ง่ายที่สุดในการแปลง html ให้เป็นรูปภาพ
คุณสามารถเพิ่ม HtmlRenderer อ้างอิงให้กับโครงการของคุณและทำดังต่อไปนี้
string htmlCode ="<p>This is a sample html.</p>";
Image image = HtmlRender.RenderToImage(htmlCode ,new Size(500,300));