프론트 페이지 에 QR 코드 를 생 성하 고 다운로드 (IE 호 환)

프로젝트 를 하 는 과정 에서 하나의 수요 에 부 딪 혔 다. 모든 과일 나 무 를 해당 하 는 QR 코드 를 만 든 다음 에 다운 로드 를 클릭 한다.
대체적인 사고방식 은 canvas 로 QR 코드 를 그 려 서 QR 코드 를 base 64 그림 으로 변환 한 다음 에 다운 로드 를 클릭 하 는 것 이다.
1. 먼저 HTML 구 조 를 쓴다.
 
     //QR 코드 그 리 는 데.
     //다운로드 단 추 를 누 르 면 a 탭 에 href 속성 을 추가 하고 즉시 click () 호출 클릭 다운로드
     다운로드 클릭
2. 해당 하 는 js 를 쓴다.
쓰기 전에 qrcode. min. js 를 먼저 도입 하 는 것 을 기억 하 세 요.
/ / QR 코드 를 예화 합 니 다.
var qrcode = new QRCode(document.getElementById("qrcode"),{
text:'http://www........................................................................
width: 128, / / 생 성 된 QR 코드 너비
height: 128, / / 생 성 된 QR 코드 높이
colorDark: "\ # 000000", / QR 코드 의 짙 은 색 부분 생 성
colorLight: "\ # ffffff". / QR 코드 를 만 드 는 연한 색 부분
correctLevel:QRCode.CorrectLevel.H
});
/ / 브 라 우 저 종류 판단

//       
        function myBrowser(){
            var userAgent = navigator.userAgent; //      userAgent   
            var isOpera = userAgent.indexOf("Opera") > -1;
            if (isOpera) {
                return "Opera"
            }; //    Opera   
            if (userAgent.indexOf("Firefox") > -1) {
                return "FF";
            } //    Firefox   
            if (userAgent.indexOf("Chrome") > -1){
                return "Chrome";
            }
            if (userAgent.indexOf("Safari") > -1) {
                return "Safari";
            } //    Safari   
            if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
                return "IE";
            }; //    IE   
            if (userAgent.indexOf("Trident") > -1) {
                return "Edge";
            } //    Edge   
        };

 
/ / 다운로드 단 추 를 눌 렀 을 때 실행 되 는 동작
$("#save").click(function(){
var canvas = $('\ # qrcode'). find ('canvas'). get (0); / / canvas 를 가 져 옵 니 다.
var url = canvas. toDataURL ('image / jpeg'); / canvas 를 base 64 로 변환 합 니 다.
myBrowser (); / / 브 라 우 저 유형 판단
if(myBrowser()==="IE"||myBrowser()==="Edge"){
     var blob = canvas.msToBlob();
     window.navigator.msSaveBlob(blob,a+'.png');
}else{
    $('#download').attr({href:url,download:a}).get(0).click();
}
}) 
3. 페이지 에서 QR 코드 다운 로드 를 실현 하 는 방법 (IE 브 라 우 저 와 비 IE 브 라 우 저 로 나 뉜 다)
IE 브 라 우 저: blob 대상 만 들 기
                 var blob = canvas.msToBlob();
                 window. navigator. msSaveBlob (blob, 다운로드 한 파일 이름 + '. png');
비 IE 브 라 우 저: a 탭 에 href 속성 과 download 속성 을 추가 하고 다운 로드 를 직접 클릭 합 니 다.
                  그 중에서 href 속성 은 다운로드 할 그림 의 URL 을 가리 키 고 있 습 니 다. (canvas 라면 canvas 가 base 64 주소 로 변 환 됩 니 다.)
                   다운로드 속성 은 다운로드 그림 의 이름 을 설정 하 는 데 사 용 됩 니 다.
예 를 들 어 $("\ # download"). attr ({href: url, download: a}). get (0). click ();