JS+Canva를 사용하면 미리보기 압축 및 이미지 업로드 기능이 가능합니다.

이번에는 JS+Canva의 미리보기 압축과 업로드사진 기능을 소개합니다. JS+Canva에서 사진을 미리보고 압축하고 업로드할 때 사용할 수 있는 주의사항은 무엇인가요? .

이 글에서는 이미지 미리보기, 압축, 업로드 기능을 구현하기 위한 JS와 Canvas를 주로 소개합니다. 첫 번째 단계는 사용자가 업로드해야 하는 이미지를 선택하는 것입니다. 구체적인 구현은 코드에 대해 이 문서를 참조하세요

먼저 렌더링을 살펴보고 관점에 맞춰 보겠습니다

1단계: 사용자가 선택합니다. 업로드할 이미지

<input>

이미지가 선택되면 업로드 기능이 실행됩니다. 이 기능에서 이미지 리소스를 얻어 압축하고 캔버스에 업로드해야 합니다. 서버에서는 ajax나 다른 방법을 사용하여 업로드할 수도 있습니다.

2단계: 이미지 리소스의 압축 미리보기를 가져와 업로드합니다.

function upload() { 
  let file = document.querySelector('input[type=file]').files[0] // 获取选择的文件，这里是图片类型 
  let reader = new FileReader() 
    reader.readAsDataURL(file) //读取文件并将文件以URL的形式保存在resulr属性中 base64格式 
    reader.onload = function(e) { // 文件读取完成时触发  
      let result = e.target.result // base64格式图片地址  
      var image = new Image() image.src = result // 设置image的地址为base64的地址  
      image.onload = function(){  
        var canvas = document.querySelector("#canvas");  
        var context = canvas.getContext("2d");  
        canvas.width = image.width; // 设置canvas的画布宽度为图片宽度  
        canvas.height = image.height;  
        context.drawImage(image, 0, 0, image.width, image.height) // 在canvas上绘制图片  
        let dataUrl = canvas.toDataURL('image/jpeg', 0.92) // 0.92为压缩比，可根据需要设置，设置过小会影响图片质量  
                                  // dataUrl 为压缩后的图片资源，可将其上传到服务器  
      }  
    } 
 }

이제 이미지가 성공적으로 압축되었는지 비교해 보겠습니다.

원본 이미지 크기:

압축 비율은 0.92로 설정됩니다.

압축률 설정은 0.52

줌 비율을 0.92로 설정했을 때 이미지가 원본 이미지보다 커지는 것이 얼핏 이상하다고 생각하시나요? 실제로 이미지를 base64로 인코딩한 후에는 원본 이미지보다 크기가 커집니다. 구체적인 이유로 base64의 인코딩 원리를 확인할 수 있습니다. 이미지 압축에 성공한 것 같습니다!

참고: 캔버스는 IE9 이하에서는 지원되지 않습니다. 큰 이미지에는 base64를 사용하지 마십시오. 응답 속도에 영향을 미치기 때문입니다.

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

추천 도서:

jquery 콘텐츠 필터 사용 방법

jQuery의 복합 선택기 사용에 대한 자세한 설명

위 내용은 JS+Canva를 사용하면 미리보기 압축 및 이미지 업로드 기능이 가능합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!