집 > 기사 > 웹 프론트엔드 > IE11에서 canvas.toDataURL을 사용하는 호환성 문제에 대한 솔루션

IE11에서 canvas.toDataURL을 사용하는 호환성 문제에 대한 솔루션

php中世界最好的语言원래의: 2018-04-14 14:12:506606검색

이번에는 IE11에서 canvas.toDataURL 사용 시 호환성 문제를 해결하기 위한 아이디어를 가져오겠습니다. IE11에서 canvas.toDataURL 사용 시 호환성 문제를 해결하기 위한 Notes는 무엇인가요? .

문제 발견

최근에는 프로젝트에서 캔버스의 toDataURL 메서드를 사용하여 이미지의 base64 형식 데이터를 얻었으며, 이를 배경에 업로드하는 데 사용할 수 있습니다. 이전에 크로스 도메인 이미지로 인해 캔버스가 오염되어 데이터를 얻을 수 없는 함정에 직면했기 때문에 처음부터 교묘하게 crossOrigin 속성 값을 추가했습니다. 코드는 대략 다음과 같습니다.

const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
context.fillStyle = "black";
context.fillRect(0, 0, canvas.width, canvas.height);
const imageElement = document.createElement("img");
imageElement.crossOrigin = "Anonymous";
imageElement.onload = () => {
 context.drawImage(
 imageElement,
 params.left,
 params.top,
 canvas.width,
 canvas.height,
 0,
 0,
 canvas.width,
 canvas.height
 );
 const dataUrl = canvas.toDataURL("image/jpeg", 1);
}
imageElement.src = 'xxx';

나는 그것이 완벽하다고 생각했고 Chrome 브라우저에서는 매우 원활하게 진행되었지만 IE11에서는 설명할 수 없는 SecurityError가 발생했습니다.

IE11에서 canvas.toDataURL을 사용하는 호환성 문제에 대한 솔루션

특별한 오류 메시지는 없고 toDataURL을 실행하는 줄만 프롬프트를 통해 찾아져 있어 정말 혼란스럽습니다.

시도해보세요

처음으로 구글링을 해보니 많은 분들이 이 문제를 접하셨으나 효과적인 해결 방법을 찾지 못하셨고, 어떤 분들은 Fabric.js를 사용해보라고 제안하셨는데 살펴보니 너무 번거롭다고 생각되더군요. Caniuse에서는 이 방법이 IE11에서 문제가 있음이 명확하게 표시되어 있습니다.

IE의 버그인 것 같아서 국가를 구할 방법을 생각했습니다. 이미지의 base64 데이터를 얻는 방법은 한 가지뿐이 아니므로 toDataURL 메서드는 잘 지원되지 않으므로 다른 방법을 사용하세요:

먼저 캔버스를 blob으로 변환하세요
그런 다음 FileReader를 사용하여 dataUrl을 읽습니다

코드는 대략 다음과 같습니다:

const reader = new FileReader();
reader.readAsDataURL(canvas.msToBlob());
reader.onloadend = () => {
 const base64data = reader.result;
};

하지만 이건 아무 소용이 없습니다....

이번에는 msToBlob 메서드가 SecurityError를 보고할 차례였습니다. 나:? ? ?

해결됨

실제로 보안상의 이유인 것 같습니다. 유일한 보안 이유는 도메인 간 이미지입니다. IE의 보안 정책이 더 엄격할 수도 있고 crossOrigin = "Anonymous" 를 설정해도 여전히 데이터를 읽을 수 없기 때문에 크로스 도메인이므로 크로스 도메인을 제거하는 방법을 생각했습니다. 계수:

ajax를 사용하여 이미지의 바이너리 데이터를 가져오도록 요청하세요
바이너리 데이터를 base64 형식으로 변환
얻은 base64 데이터를 이미지 요소의 src로 설정하고 캔버스에 그립니다
정상적으로 toDataURL을 호출하세요

코드는 대략 다음과 같습니다:

// 之前的代码
// ...
// 最后一行 imageElement.src = 'xxx' 替换：
getDataUrlBySrc('xxx').then(b64 => (imageElement.src = b64));
function getDataUrlBySrc(src: string) {
 return new Promise<string>((resolve, reject) => {
 if (Cache.localGet("isIE")) {
  const xmlHTTP = new XMLHttpRequest();
  xmlHTTP.open("GET", src, true);
  // 以 ArrayBuffer 的形式返回数据
  xmlHTTP.responseType = "arraybuffer";
  xmlHTTP.onload = function(e) {
  
  // 1. 将返回的数据存储在一个 8 位无符号整数值的类型化数组里面
  const arr = new Uint8Array(xmlHTTP.response);
  
  // 2. 转为 charCode 字符串
  const raw = Array.prototype.map
   .call(arr, charCode => String.fromCharCode(charCode))
   .join("");
   
  // 3. 将二进制字符串转为 base64 编码的字符串
  const b64 = btoa(raw);
  
  const dataURL = "data:image/jpeg;base64," + b64;
  resolve(dataURL);
  };
  xmlHTTP.onerror = function(err) {
  reject(err);
  };
  xmlHTTP.send();
 } else {
  resolve(src);
 }
 });
}</string>

시도하여 성공적으로 목표를 달성했습니다.

나중에 정보를 확인해보니 캔버스가 오염되면 toDataURL도 toBlob도 성공적으로 실행되지 않는다는 것을 알게 되었습니다.

결함

이 방법을 사용하면 목표를 달성할 수 있지만 성능이 저하됩니다. 이미지 데이터를 먼저 요청해야 할 뿐만 아니라 데이터 인코딩 변환에도 시간이 많이 걸립니다. 작은 사진은 괜찮지만, 사진이 상대적으로 큰 경우(예: 3M 이상) 전체 프로세스에 최대 1~2분이 소요될 수 있으며 이는 허용되지 않습니다.

캔버스의 toDataUrl이 이미지를 압축하나요?

캔버스의 drawImage 메서드를 사용하여 이미지 개체를 캔버스에 그리는 경우 이미지 크기가 크게 늘어나서 PNG 형식으로만 저장할 수 있습니다.

toDataUrl을 사용하여 캔버스를 base64로 변환합니다. EncoderOptions를 1로 설정하더라도 이미지는 크게 줄어들지만 여전히 원본 이미지보다 큽니다. 인코더 옵션이 기본 0.92를 사용하는 경우 최종 이미지 크기는 초기 이미지 크기와 유사합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP의 다른 관련 기사를 주목하세요. 중국사이트!