캔버스를 사용하여 이미지 다운로드 기능을 구현하는 html5의 자세한 예

이 글에서는 이미지 다운로드 기능을 구현하기 위해 캔버스를 사용한 HTML5의 샘플 코드를 주로 소개합니다. 필요한 친구들이 참고할 수 있습니다.

최근 프로젝트에서는 이미지 다운로드 기능이 필요합니다. 구현됨(아래 참조)

처음에는 a 태그의 download 속성을 사용하여 다운로드하는 것을 고려했습니다.

<a href="图片src" download="下载海报">
下载海报
</a>

그러나 테스트를 통해 Safari에서는 다운로드한 파일에 확장자를 가질 수 없다는 것을 알았습니다. 그래서 마음을 바꿔 처리를 위해 캔버스를 사용해야 했습니다.

1. 이미지의 도메인 간 속성을 설정하려면 이미지에 crossOrigin='anonymous'를 추가해야 합니다.

img.crossOrigin = 'anonymous';

2 이미지를 base64 형식으로 변환하려면 toDataURL을 사용하세요. 다운로드를 실행하는 시뮬레이션된 클릭 이벤트

canvas.toDataURL("image/png")

전체 코드:

 var save_link = document.createElement('a');
     save_link.href = image;
     save_link.download ='测试.png';
                           
 var clickevent = document.createEvent('MouseEvents');
     clickevent.initEvent('click', true, false);
     save_link.dispatchEvent(clickevent);

위 내용은 캔버스를 사용하여 이미지 다운로드 기능을 구현하는 html5의 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!