Using html2canvas to implement browser screenshots must be implemented in a server environment.
effecthtml2canvas can take screenshots on the browser side through pure JS, but the accuracy of the screenshots needs to be improved, and some css cannot be recognized, so the original screen style cannot be perfectly presented in canvas.
/*It is not possible to omit multi-line overflow, it can only be hidden*/ .book_inf{ position: relative; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; - webkit-box-orient: vertical; } Supported browsers /*Parameters: * #screenshots The element id of the screenshot required, the function to be executed after taking the screenshot, * backgroundColor configuration item background color * canvas is the last canvas returned after taking the screenshot */function screenshotsImg(){ html2canvas(document.querySelector( #screenshots),{ backgroundColor: 'transparent',//Set the background to be transparent}).then(canvas => { canvasTurnImg(canvas) //Saved image format conversion method}); } Available configuration items| Parameter name | type | default value | describe |
|---|---|---|---|
| allowTaint | boolean | false | Whether to allow cross-origin images to taint the canvas---allow cross-origin |
| background | string | #fff | Canvas background color, if none is specified in DOM. Set undefined for transparent---canvas background color, if the default white is not set, this is a trap, I changed it to backgroundColor. |
| height | number | null | Define the heigt of the canvas in pixels. If null, renders with full height of the window.---canvas height setting |
| letterRendering | boolean | false | Whether to render each letter seperately. Necessary if letter-spacing is used.---Useful when letter spacing is set |
| logging | boolean | false | Whether to log events in the console.---Output information in console.log() |
| proxy | string | undefined | Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.---Proxy address |
| tainTest | boolean | true | Whether to test each image if it taints the canvas before drawing them---whether to test the image before rendering |
| timeout | number | 0 | Timeout for loading images, in milliseconds. Setting it to 0 will result in no timeout.---Image loading delay, the default delay is 0, in milliseconds |
| width | number | null | Define the width of the canvas in pixels. If null, renders with full width of the window.---canvas width |
| useCORS | boolean | false | Whether to attempt to load cross-origin images as CORS served, before reverting back to proxy--cross-origin proxy |
1. Extract image metadata directly from canvas
// Export the image to png format var type = 'png'; var imgData = canvas.toDataURL(type);
2. Change mime-type to image/octet-stream to force the browser to download directly.
/** * Get mimeType * @param {String} type the old mime-type * @return the new mime-type */var _fixType = function(type) { type = type.toLowerCase().replace(/jpg/i , 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; return 'image/' + r;}; // Process image data, replace mime typeimgData = imgData.replace(_fixType(type),'image/octet-stream');3. Download the image to local
/** * Save files locally * @param {String} data Image data to be saved locally * @param {String} filename file name */var saveFile = function(data, filename){ var save_link = document.createElementNS ('http://www.w3.org/1999/xhtml', 'a'); save_link.href = data; save_link.download = filename; var event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); save_link.dispatchEvent( event);}; // Downloaded file name var filename = 'baidufe_' + (new Date()).getTime() + '.' + type;// downloadsaveFile(imgData,filename);Case
Case
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.