JS 및 Canvas는 이미지 미리보기, 압축 및 업로드 기능을 구현합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JS 및 Canvas는 이미지 미리보기, 압축 및 업로드 기능을 구현합니다.

亚连

May 28, 2018 am 10:30 AM

canvas javascript 압축

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

충격을 진정시키기 위해 먼저 렌더링을 살펴보겠습니다

1단계: 사용자가 필요한 이미지를 선택합니다. to be upload

<input type="file" accept="image/*" type="file"" name="imageFile" onchange="upload()">

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

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

function upload() { 
  let file = document.querySelector(&#39;input[type=file]&#39;).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(&#39;image/jpeg&#39;, 0.92) // 0.92为压缩比，可根据需要设置，设置过小会影响图片质量  
                                  // dataUrl 为压缩后的图片资源，可将其上传到服务器  
      }  
    } 
 }

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

원본 이미지 크기:

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

압축률 설정은 0.52

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

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

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

라라벨 튜토리얼

1603

PHP 튜토리얼

1508

276

Related knowledge

7-zip 최대 압축률 설정, 7zip을 최소로 압축하는 방법 Jun 18, 2024 pm 06:12 PM

특정 다운로드 사이트에서 다운로드한 압축 패키지는 압축을 푼 후 원본 압축 패키지보다 용량이 더 커지는 것을 확인했습니다. 그 차이는 수십 Kb, 수십 Mb 정도입니다. 클라우드 디스크나 유료 공간에 업로드해도 상관없습니다. 파일이 작을 경우, 파일이 많을 경우 저장 비용이 크게 증가합니다. 나는 그것에 대해 약간의 조사를 했으며 필요하다면 배울 수 있습니다. 압축 수준: 9급 압축 사전 크기: 256 또는 384, 사전을 많이 압축할수록 속도가 느려집니다. 256MB 이전에는 압축률 차이가 더 크고, 384MB 이후에는 압축률 차이가 없습니다. 단어 크기: 최대 273 매개변수: f=BCJ2, 테스트 및 추가 매개변수 압축률이 높아집니다.

폴더를 압축하여 wps로 보내는 방법 Mar 20, 2024 pm 12:58 PM

직장인들은 직장에서 wps 소프트웨어를 매우 자주 사용합니다. 때로는 하루에 여러 개의 파일을 입력한 후 리더나 지정된 위치로 보냅니다. 그렇다면 wps 소프트웨어는 어떻게 폴더를 압축하고 패키지로 보내야 할까요? . 이 작업 단계. 먼저 보내려는 파일과 폴더를 동일한 폴더에 정리하세요. 파일이 많은 경우에는 보낼 때 쉽게 식별할 수 있도록 각 파일의 이름을 지정하는 것이 좋습니다. 두 번째 단계에서는 이번에는 이 큰 폴더를 클릭한 다음 마우스 오른쪽 버튼을 클릭합니다. "아카이브에 추가"를 선택하십시오. 3단계: 이제 소프트웨어가 자동으로 파일을 패키지하는 데 도움을 줍니다. "XX.zip으로 압축"을 선택한 다음 지금 압축을 클릭하세요.

캔버스 프레임워크를 배우고 일반적으로 사용되는 캔버스 프레임워크에 대해 자세히 설명합니다. Jan 17, 2024 am 11:03 AM

Canvas 프레임워크 탐색: 일반적으로 사용되는 Canvas 프레임워크가 무엇인지 이해하려면 특정 코드 예제가 필요합니다. 소개: Canvas는 풍부한 그래픽 및 애니메이션 효과를 얻을 수 있는 HTML5에서 제공되는 그리기 API입니다. 그리기의 효율성과 편의성을 향상시키기 위해 많은 개발자들이 다양한 Canvas 프레임워크를 개발했습니다. 이 기사에서는 일반적으로 사용되는 몇 가지 캔버스 프레임워크를 소개하고 독자가 이러한 프레임워크를 사용하는 방법을 더 깊이 이해하는 데 도움이 되는 특정 코드 예제를 제공합니다. 1. EaselJS 프레임워크 Ea

게임 개발에서 캔버스의 강력한 역할과 적용을 살펴보세요. Jan 17, 2024 am 11:00 AM

게임 개발에서 캔버스의 힘과 적용 이해 개요: 인터넷 기술의 급속한 발전으로 인해 웹 게임은 플레이어들 사이에서 점점 더 인기를 얻고 있습니다. 캔버스 기술은 웹 게임 개발의 중요한 부분으로 게임 개발에 점차 등장하며 강력한 위력과 활용성을 보여주고 있습니다. 이 기사에서는 게임 개발에서 캔버스의 잠재력을 소개하고 특정 코드 예제를 통해 캔버스의 적용을 보여줍니다. 1. 캔버스 기술 소개 캔버스는 HTML5의 새로운 요소입니다.

winrar 64비트-winrar의 압축을 푸는 방법은 무엇입니까? Mar 18, 2024 pm 12:55 PM

WinRAR은 풍부한 기능과 사용하기 쉬운 인터페이스를 제공하는 강력한 압축 파일 관리 도구입니다. WinRAR 64비트 버전은 64비트 운영 체제에 특별히 최적화되어 있으며 시스템 리소스와 성능을 더 잘 활용할 수 있습니다. 다음으로, 편집자가 winrar 64비트를 소개하고 winrar 압축을 푸는 방법을 설명하겠습니다! 1. winrar 64비트 소프트웨어란 무엇입니까? WinRAR은 강력한 압축 패키지 관리자입니다. 이 소프트웨어는 데이터를 백업하고, 이메일 첨부 파일의 크기를 줄이고, RAR, ZIP 및 인터넷에서 다운로드한 기타 파일의 압축을 풀고, RAR 및 ZIP 형식의 새 파일을 만드는 데 사용할 수 있습니다. 최신 WINRAR 버전은 Wi입니다.

Linux에서 패키징과 압축의 차이점을 올바르게 이해하는 방법 Feb 20, 2024 pm 05:33 PM

패키징과 압축은 Linux에서 일반적으로 사용되는 작업이지만 많은 사용자가 두 개념을 혼동하는 경향이 있습니다. 이 기사에서는 Linux 시스템의 패키징과 압축의 차이점을 자세히 설명하고 특정 코드 예제를 사용하여 독자의 이해를 돕습니다. 먼저 패키징과 압축의 차이점을 명확히 해야 합니다. 패키징은 여러 파일이나 디렉터리를 단일 파일로 결합한 것으로, 파일을 구성, 보관 또는 전송하는 데 자주 사용됩니다. 압축은 파일 크기를 줄이고 저장 공간을 절약하거나 전송 속도를 높이기 위해 알고리즘을 통해 하나 이상의 파일을 압축하는 것입니다.

학습 효과 최적화: 캔버스 그리기 기술을 향상시키는 방법 Jan 17, 2024 am 08:28 AM

캔버스 드로잉 스킬의 학습 효과를 높이는 방법은 무엇입니까? 현대 웹 개발에서 캔버스는 매우 중요한 그리기 기술이 되었습니다. Canvas를 통해 JavaScript와 HTML5에서 제공하는 API를 사용하여 다양한 그래픽 및 애니메이션 효과를 얻을 수 있습니다. 그러나 캔버스 그리기 기술을 배우는 것은 특히 초보자에게는 쉬운 일이 아닙니다. 이 글에서는 캔버스 그리기 기술 학습의 효율성을 높이는 데 도움이 되는 몇 가지 실용적인 팁을 공유할 것입니다. 1. 기본을 이해한다

중국 교육분야 캔버스의 발전 동향과 향후 전망 Jan 17, 2024 am 10:22 AM

과학 기술의 급속한 발전과 교육 분야에서 정보 기술의 광범위한 적용으로 인해 세계 최고의 온라인 학습 관리 시스템인 Canvas가 중국 교육 산업에서 점차 떠오르고 있습니다. Canvas의 출현은 중국의 교육 및 교수법 개혁에 대한 새로운 가능성을 제공합니다. 이 기사에서는 중국 교육 부문에서 Canvas의 발전 동향과 전망을 살펴보겠습니다. 우선, 중국 교육 부문에서 Canvas의 발전 추세 중 하나는 심층적 통합입니다. 클라우드 컴퓨팅, 빅 데이터 및 인공 지능의 급속한 발전으로 Canvas는 점점 더 발전할 것입니다.

See all articles

JS 및 Canvas는 이미지 미리보기, 압축 및 업로드 기능을 구현합니다.

핫 AI 도구

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제