画布drawImage分层

Question

使用画布呈现一组分层的图像，用户可以随后下载编译后的图像。然而，当使用image.onload时，它将图像的顺序按顺序从CDN加载最快。

我正在努力实现，以便它们在代码行进展方面是分层的。究竟是否有这个目标呢？我尝试过异步函数，但实际上无法实现任何目标。下面是我的当前代码：

import React, { useRef, useEffect } from 'react';

interface CanvasProps {
    width: number;
    height: number;
    base: string;
    eyes: string;
    hat: string;
    backpack: string;
    clothes: string;
    selected: number;
}

const Canvas = ({ width, height, base, eyes, hat, backpack, clothes, selected }: CanvasProps) => {
    const canvasRef = useRef<HTMLCanvasElement>(null);

    const renderImages = async (context) => {
        var bg_image = new Image();
        var base_image = new Image();
        var eyes_image = new Image();
        var hats_image = new Image();
        var backpacks_image = new Image();
        var clothes_image = new Image();

        bg_image.crossOrigin="*";
        base_image.crossOrigin="*";
        eyes_image.crossOrigin="*";
        hats_image.crossOrigin="*";
        clothes_image.crossOrigin="*";
        backpacks_image.crossOrigin="*";

        base_image.src = base;
        eyes_image.src = eyes;
        hats_image.src = hat;
        clothes_image.src = backpack;
        backpacks_image.src = clothes;

        base_image.onload = function(){ context.drawImage(base_image, 0, 0, 650, 650) }
        eyes_image.onload = function(){ context.drawImage(eyes_image, 0, 0, 650, 650) }
        hats_image.onload = function(){ context.drawImage(hats_image, 0, 0, 650, 650) }
        clothes_image.onload = function(){ context.drawImage(clothes_image, 0, 0, 650, 650) }
        backpacks_image.onload = function(){ context.drawImage(backpacks_image, 0, 0, 650, 650) }
    }

    useEffect(() => {
        if (canvasRef.current) {
            const canvas = canvasRef.current;
            if (canvasRef.current) {
                const context = canvas.getContext('2d');
                if (context) {
                    context.clearRect(0, 0, 650, 650);
                    renderImages(context);
                }
            }
        }       
    },[selected]);

    return <canvas id="canvas" ref={canvasRef} height={height} width={width} />;
};

Canvas.defaultProps = {
    width: window.innerWidth,
    height: window.innerHeight
};

export default Canvas;

Answer 1

您可以将您的映像创建封装在一个Promise中，该Promise一旦完成图像加载并等待每个图像加载完成，即可实现所需的同步流。

​

const getImg = (url: string) => {
  const img = new Image();
  img.crossOrigin="*";
  img.src = url;

  return new Promise((res, rej) =>  {
        img.onload = () => res(img);
        img.onerror = (err) => rej(err);
  });
}

const renderImages = async (context) => {
  const baseImg = await getImg(base);
  context.drawImage(baseImg, 0, 0, 650, 650);

  const eyesImg = await getImg(eyes);
  context.drawImage(eyesImg, 0, 0, 650, 650);

  const hatImg = await getImg(hat);
  context.drawImage(hatImg, 0, 0, 650, 650);

  const backpackImg = await getImg(backpack);
  context.drawImage(backpackImg, 0, 0, 650, 650);

  const clothesImg = await getImg(clothes);
  context.drawImage(clothesImg, 0, 0, 650, 650);
}

​

Answer 2

我将使用一个数组image_sources，而不是您使用的许多变量。

(底座、眼睛、帽子、背包、衣服)，这种方法的好处：

• --这将大大减少呈现函数代码的大小。
• 我们可以递归调用renderImages以顺序绘制所有图像。
• 您的代码可以处理用户需要的尽可能多的图像层。

这是我的粗略原型：

const renderImages = (context, index) => {
  if (index < image_sources.length) {
    let image = new Image();
    image.crossOrigin = "*";
    image.src = image_sources[index];
    image.onload = function() {
      context.drawImage(image, 0, 0, 650, 650)
      renderImages(context, index + 1)
    }
  }
}

useEffect(() => {
  if (canvasRef.current) {
    const canvas = canvasRef.current;
    if (canvasRef.current) {
      const context = canvas.getContext('2d');
      if (context) {
        context.clearRect(0, 0, 650, 650);
        renderImages(context, 0);
      }
    }
  }
}, [selected]);