html2 캔버스는 브라우저 스크린샷을 구현합니다.

html2canvas를 사용하여 브라우저 스크린샷을 구현하는 것은 서버 환경에서 구현되어야 합니다. 이번 글에서는 주로 html2canvas를 사용하여 브라우저 스크린샷을 구현하기 위한 샘플 코드에 대한 관련 정보를 소개하고 있습니다. 편집자는 꽤 좋다고 생각하여 지금부터 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

Function

html2canvas는 순수 JS를 통해 브라우저 측에서 스크린샷을 찍을 수 있지만 스크린샷의 정확도를 높여야 하고, 일부 CSS는 인식할 수 없어 원본 그림 스타일을 캔버스에서 완벽하게 표현할 수 없습니다

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

지원되는 브라우저

1. Firefox 3.5+

2. Google Chrome

3. Opera 12+

4. IE9+

5. Safari 6+

기본 문법

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

사용 가능한 구성 항목

콘솔에 이벤트를 기록할지 여부---console.log()에 정보 출력proxystringundefineUrl은 교차 출처 이미지를 로드하는 데 사용됩니다. 비워두면 교차 출처 이미지가 로드되지 않습니다.---프록시 주소taintTestboolean true이미지를 그리기 전에 캔버스를 오염시키는 경우 각 이미지를 테스트할지 여부---렌더링 전 테스트 이미지에서timeoutnumber0이미지 로드 시간 제한을 밀리초 단위로 설정합니다. 0으로 설정하면 시간 초과가 발생하지 않습니다.---이미지 로드 지연은 0(밀리초 단위)입니다. widthnumbernull캔버스 너비를 픽셀 단위로 정의합니다. null인 경우 렌더링됩니다. 창의 전체 너비.---캔버스 너비useCORSbooleanfalse 프록시로 다시 돌아가기 전에 교차 출처 이미지를 CORS 제공으로 로드할지 여부--교차 출처 프록시이미지 형식 설정

매개변수 이름	Type	기본값	Description
allowTaint	boolean	false	원본 간 이미지 오염을 허용할지 여부 캔버스 ---교차 도메인 허용
Background	string	#fff	캔버스 배경색(DOM에 지정되지 않은 경우) 투명을 위해 정의되지 않은 설정---캔버스 배경색이 설정되지 않은 경우 기본값은 흰색이므로 backgroundColor로 변경했습니다.
height	number	null	캔버스의 높이를 픽셀 단위로 정의하면 창의 전체 높이로 렌더링됩니다.-- -캔버스 높이 설정
letterRendering	boolean	false	각 문자를 별도로 렌더링할지 여부
			1. 캔버스에서 직접 이미지 메타데이터를 추출합니다

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

2. MIME 유형을 이미지/옥텟 스트림으로 변경하여 브라우저가 직접 다운로드하도록 합니다

/**
 * 获取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. 이미지를 로컬

/**
 * 在本地进行文件保存
 * @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);

에 다운로드합니다. 관련 권장 사항:

html5 브라우저 스크린샷 예

위 내용은 html2 캔버스는 브라우저 스크린샷을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!