2/25画像処理

1729 ワード
JavaScript TIL テキストリンク
イメージ
  • プリロード:プリロード、STATEに保存後表示
    以下のように処理します.
    •  useEffect(() => {
    const img = new Image(); // img 태그 만들기
    img.src =
      "https://codebootcamp.co.kr/images/projects/contents/project_3-2_contents_gif.webp";
    img.onload = () => {
      setImgTag(img);
    };
  }, []);
   const onClickImageLoad = () => {
    setLoaded(true);
  };
  
  return (
  	 {loaded && (
        <img src="https://codebootcamp.co.kr/images/projects/contents/project_3-2_contents_gif.webp" />
      )}
      <button onClick={onClickImageLoad}>이미지 일반로드</button>
  )

  • react-lazyload
    遅延応答:遅延ロードは、コンポーネント、イメージ、またはパフォーマンスに重要なすべてのものです.

  • react-dropzone
    これは簡単なreactフックで、ファイルにHTML 5互換のドラッグアンドドロップ領域を作成します.

  • react-avatar-editor
    Facebookはいいですね.アイコンコンポーネントです.鮮明なユーザーインタフェースを使用して、アップロード画像のサイズ、切り取り、回転を調整します.

  • react-beautiful-dnd
    美しくアクセス可能なリストのドラッグ＆ドロップ
    • Kotlin Kotlinデフォルト1
    Android「署名の競合がある同名のパケットがインストールされています」