html2 canvas implements browser screenshots

Using html2canvas to implement browser screenshots must be implemented in a server environment. This article mainly introduces the relevant information about the sample code for using html2canvas to implement browser screenshots. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Function

html2canvas 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 in canvas The original screen style cannot be perfectly rendered

/*多行溢出省略就不行，只能超出隐藏了*/
     .book_inf{
            position: relative; 
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

Supported browsers

1. Firefox 3.5+

2. Google Chrome

3. ##Opera 12+

4. IE9+

5. Safari 6+

Basic syntax

##

/*参数：
* #screenshots 所需要截图的元素id，截图后要执行的函数，
* backgroundColor 配置项背景色
* canvas为截图后返回的最后一个canvas
*/
function screenshotsImg(){
       html2canvas(document.querySelector("#screenshots"),{
            backgroundColor: 'transparent',// 设置背景透明
        }).then(canvas => {
            canvasTurnImg(canvas) //保存的图片格式转换方法
        });
    }

Available configuration items

Parameter name##allowTaintbooleanfalseWhether to allow cross-origin images to taint the canvas---allow cross-originbackground#string#fffCanvas background color, if none is specified in DOM. Set undefined for transparent---canvas background color , if the default white is not set, I will change it to backgroundColor. heightnumbernull Define the heigt of the canvas in pixels. If null, renders with full height of the window.---canvas height settingletterRenderingbooleanfalseWhether to render each letter seperately. Necessary if letter-spacing is used.---Useful when character spacing is setloggingbooleanfalseWhether to log events in the console.---Output information in console.log()proxystringundefinedUrl to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.---Proxy addresstaintTestbooleantrueWhether to test each image if it taints the canvas before drawing them---whether to test images before renderingtimeoutnumber0Timeout for loading images, in milliseconds. Setting it to 0 will result in no timeout.---Image loading delay, the default delay is 0, unit millisecondswidthnumbernullDefine the width of the canvas in pixels. If null, renders with full width of the window.---canvas widthuseCORSbooleanfalseWhether to attempt to load cross-origin images as CORS served, before reverting back to proxy--Cross-domain proxySet image format

Type	Default value	Description

1. Extract image metadata directly from canvas

  // 图片导出为 png 格式
        var type = 'png';
        var imgData = canvas.toDataURL(type);

2. Change mime-type to image/octet-stream, forcing the browser to download directly

/**
 * 获取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;
};
   
// 加工image data，替换mime type
imgData = imgData.replace(_fixType(type),'image/octet-stream');

3. Download the image to the local

/**
 * 在本地进行文件保存
 * @param  {String} data     要保存到本地的图片数据
 * @param  {String} filename 文件名
 */
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);
};
   
// 下载后的文件名
var filename = 'baidufe_' + (new Date()).getTime() + '.' + type;
// download
saveFile(imgData,filename);

Related recommendations:

Sample of HTML5 browser screenshot

The above is the detailed content of html2 canvas implements browser screenshots. For more information, please follow other related articles on the PHP Chinese website!