캔버스의 toDataURL() 메서드는 이미지를 dataURL(base64)로 변환합니다.

이 글에서는 캔버스에서 toDataURL()을 사용하여 이미지를 dataURL(base64)로 변환하는 방법에 대한 관련 정보를 주로 소개합니다. 이 글은 모든 사람의 학습이나 작업에 대한 특정 참고 학습 가치를 제공합니다. 친구 여러분, 편집자를 따라가서 함께 배워 보세요. 모두에게 도움이 되기를 바랍니다.

이미지를 base64로 변환할 때의 이점

이미지를 Base64 인코딩으로 변환하면 파일을 업로드하지 않고도 이미지를 다른 웹페이지와 편집기에 쉽게 삽입할 수 있습니다. 이는 사진을 저장할 장소를 찾을 필요가 없기 때문에 일부 작은 사진의 경우 매우 편리합니다.

이미지를 웹의 작은 이미지에 일반적으로 사용되는 base64 인코딩으로 변환하면 이미지 요청 수(js 및 CSS 코드로 수집됨)를 줄일 수 있을 뿐만 아니라 일부 상대 경로 및 오류로 인해 발생하는 이미지 404 오류도 방지할 수 있습니다. 다른 문제.

소개

적용 시나리오를 가정해 보겠습니다. 특별한 이유로 인해 서버에서 이미지 경로를 요청하고 이 경로를 통해 해당 이미지의 base64 데이터 URL을 가져와야 합니다. 이 시나리오에서는 먼저 이미지 경로에 액세스할 수 있다고 추론하고 이미지를 dataURL로 변환하는 방법도 필요합니다.

어떻게 달성할 수 있나요?

dataURL

먼저, 변환된 내용이 올바른지 확인하는 데 도움이 되는 정통 dataURL의 구문을 간략하게 검토해 보겠습니다. 완전한 dataURI는 다음과 같습니다.

data:[<mediatype>][;base64],<data>

미디어 유형은 "image/png", "text/plain"과 같은 MIME 규칙에 따라 파일 유형을 선언하며, 여기서는 base64만 다룹니다. 파일의 인코딩된 콘텐츠입니다. 우리는 HTML에서 다음과 같이 작성된 img 태그의 src를 자주 볼 수 있습니다.

src="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7"

이 img는 base64로 인코딩된 dataURL을 참조합니다. 브라우저가 지원하는 한 gif 이미지로 디코딩되어 렌더링될 수 있습니다.

.toDataURL()

FileReader 객체에도 .readAsDataURL()과 같은 유사한 메서드가 있지만 파일 또는 blob 유형만 허용하며 이 두 유형은 일반적으로 요소 파일 속성을 가져오거나 Blob() 생성자를 사용하여 새 개체를 수동으로 만듭니다. 당황스러운 점은 현재 브라우저의 보안 정책이 적용되는 이미지 경로만 있다는 것입니다. 의 파일 속성은 읽기 전용이며 Blob() 생성자는 파일만 허용합니다. 두 가지 방법 모두 이미지 경로를 통해 직접 얻을 수는 없습니다. 위에서 가정한 애플리케이션 시나리오에서는 먼저 경로를 통해 이미지 콘텐츠를 얻는 방법을 고려해야 합니다. 는 괜찮고 에 그릴 수 있으며 에는 .toDataURL() 메서드가 있습니다.

모든 것이 준비되었습니다. 로 얻은 이미지를 에 넣은 다음 .toDataURL() 메서드를 통해 변환하여 base64로 인코딩된 dataURL을 얻으면 됩니다. 이 메소드의 구문을 살펴보겠습니다.

canvas.toDataURL([type, encoderOptions]);

canvas는 DOM 요소 매개변수 유형이 이미지 유형을 지정하는 경우 기본값인 image/png로 대체됩니다. ; 인코더 옵션은 이미지/jpeg 또는 이미지/webp 유형 사진일 수 있으며 화질을 설정합니다. 값은 0-1이며, 값을 초과하면 기본값 0.92로 대체됩니다.

dataURL로 변환하기 전에 먼저 이미지가 성공적으로 로드되었는지 확인해야 하므로 의 onload 비동기 이벤트에 .toDataURL() 메서드를 작성해야 합니다. 이제 기능적 기능을 구현해 보겠습니다.

 function getBase64(url){
  //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染
  var Img = new Image(),
   dataURL='';
  Img.src=url;
  Img.onload=function(){ //要先确保图片完整获取到，这是个异步事件
   var canvas = document.createElement("canvas"), //创建canvas元素
    width=Img.width, //确保canvas的尺寸和图片一样
    height=Img.height;
   canvas.width=width;
   canvas.height=height;
   canvas.getContext("2d").drawImage(Img,0,0,width,height); //将图片绘制到canvas中
   dataURL=canvas.toDataURL('image/jpeg'); //转换图片为dataURL
  };
 }

언제든지 호출할 수 있는 변환 기능이 완료되었습니다. 이미지가 로드된 후 전체 dataURL 문자열을 반환합니다.

Improvement

onload 이벤트는 로드 후에 변환 작업이 실행되도록 보장하지만 이는 새로운 문제를 가져옵니다. 즉, 이미지가 로드된 후에만 dataURL이 반환되며 이미지가 로드된 시기를 확인할 수 없습니다. dataURL을 나중에 처리해야 하는 경우(예: 다른 서버로 전달) 콜백을 추가해야 합니다. 이렇게 하면 dataURL을 성공적으로 얻은 후 후속 처리 작업이 실행되도록 할 수 있습니다. :

 function getBase64(url,callback){ //添加一个回调参数
  ...
  Img.onload=function(){
   ...
   canvas.getContext("2d").drawImage(Img,0,0,width,height);
   dataURL=canvas.toDataURL('image/jpeg');
   callback?callback(dataURL):null; //调用回调函数
  };
 }

실행 중 콜백 추가:

 getBase64('//upload.jianshu.io/users/upload_avatars/555630/fdd1b798e6b0.jpg',(dataURL)=>{
  console.log(dataURL);
 });

그게 다입니다. 호환성을 고려하지 않는다면 프라미스와 제너레이터를 사용하여 구현할 수도 있고, 오류 처리를 추가하면 완벽할 것입니다.

관련 권장 사항:

html5 Canvas는 이미지 회전을 실현합니다

jquery 플러그인 canvaspercent.js는 라운드 케이크 효과 예시 공유 비율을 구현합니다

Canvas가 이미지를 처리하는 방법

위 내용은 캔버스의 toDataURL() 메서드는 이미지를 dataURL(base64)로 변환합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!