요구 사항: HTML5 콘텐츠를 이미지로 저장
아이디어: 캔버스 그리기를 통해 base64 이미지를 생성하고 길게 눌러 로컬에 저장
문제: Canvas는 교차 도메인을 금지하고 Android WeChat을 길게 누르면 base64 이미지를 저장할 수 없으며 서버에서 가져온 이미지는 압축됩니다.
2. 구체적인 문제질문 1: 캔버스는 교차 도메인이 금지되어 있습니다. 이미지가 다른 도메인에서 가져온 경우 toDataURL()을 호출하면 오류가 발생합니다.
해결책: <img> 태그는 crossOrigin 속성, 즉 crossOrigin=Anonymous 또는 crossOrigin=*을 도입하여 도메인 간 문제를 해결할 수 있습니다. 모바일 Q 환경에서는 'Anonymous' 설정이 지원되지 않으며 설정이 필요하다는 점에 유의하세요. crossorigin=anonymous를 사용하는 경우 익명 CORS와 동일합니다.
문제 2: crossOrigin이 설정된 <img> 태그는 도메인 간 이미지를 풀다운할 수 없으며 img.onload가 트리거될 수 없습니다.
해결 방법: 백그라운드 전달 또는 nigix 프록시의 경우 정적 리소스 서버 이미지가 도메인 간 이미지를 얻을 수 있도록 Access-Control-Allow-Origin: wx.qlogo.cn을 설정합니다. (여기 사진은 사용자 아바타 도메인 이름 wx.qlogo.cn이며 도메인 간 문제가 있습니다.)
질문 3: Android 휴대폰에서 WeChat h5를 길게 누르면 Base64 이미지를 저장할 수 없습니다.
해결 방법: 캔버스로 그린 base64 이미지를 서버에 업로드한 후 서버에서 png(jpg) 이미지를 가져옵니다. 이 접근 방식은 더 까다로우며 나중에 이를 개선할 수 있는 방법을 찾아야 합니다.
문제 4: 서버에 업로드된 이미지가 심하게 압축됨
해결책: 업로드된 사진은 서버에 다양한 압축 수준의 여러 리소스를 갖게 됩니다. 'http://img10.360buyimg.com/promotepic/' 디렉토리에서 더 선명한 픽셀의 사진을 얻을 수 있습니다.
질문 5: 그려진 QR 코드 링크(//wqs.jd.com/xxx)를 길게 누르면 해당 페이지로 바로 들어갈 수 없습니다.
해결책: 그릴 QR 코드 링크를 지정할 때 http:를 추가해야 합니다. 그렇지 않으면 QR 코드가 텍스트로 인식됩니다.
//코드의 캔버스 그리기 부분: var picurl = http://wx.qlogo.cn/mmopen/OicsrgN57fqDxImI3icnMeSXRfVUQRueHcxRRuWG0O1Ea1bNyBPKKKLeq5FiaXFWOdsltVe1R1PtJ2EtsDHYDjHgQ/0; var img = new Image, canvas = document.createElement(canvas), ctx = canvas.getContext(2d), //백그라운드 nigix 에이전트에 대해서는 질문 2를 참조하세요. src = picurl.replace(http://wx.qlogo.cn,//wq.jd.com) ; / /캔버스 도메인 간 toDataURL을 읽을 수 없는 문제를 해결하려면 질문 1을 참조하세요. img.crossOrigin = Anonymous; //이미지 리소스 미리 로드 img.onload = function() { canvas.width = img.width; canvas.height = img.height; ctx.drawImage( img, 0, 0 ); //그린 base64 이미지 localStorage.setItem(savedImageData, canvas.toDataURL(image/png) } img. src;사진 업로드 코드의 일부:
// 사진 업로드는 질문 3을 참조하세요. $.ajax({ type: 'POST', url: loadJs.addToken('http://wq.jd.com/activetmp/promotepic/promoteaddpic', j132), data: { filename : new Date().getTime()+''+Math.floor(Math.random()*10000) + '.jpg', 내용: base64pic, active: Shotpic20160901 }, dataType: 'json', xhrFields: { withCredentials: true }, Success: function(data) { if (picdata.id == 1 && picdata.msg) { //이 접두사 경로의 이미지 경로는 다음과 같습니다. 명확성을 위해 질문 4를 참조하세요. var imgPre = 'http://img10.360buyimg.com/promotepic/'; //사진 주소 접합을 위한 전체 주소 링크 var photo = imgPre + picdata.msg; $(#cardImg)[0].onload = function() { //비즈니스 로직 수행}; ,사진) } }, 오류:함수(데이터){ }});위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.