画布绘制图像分层

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中，该在图像加载完成后进行解析，并等待每个图像加载完成，以实现所需的同步流。

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而不是你正在使用的许多变量
(base、眼睛、帽子、背包、衣服)，这种方法的好处：

• 这将显著减小呈现函数代码的大小。
• 我们可以递归调用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]);