html多张图并排自动循环显示,详解canvas绘制多张图的排列顺序问题

àì夳堔傛蜴生んèń 2022-10-05 13:54 259阅读 0赞

在开发中，如果遇到需要使用canvas同时绘制多张图片，但因为图片大小的不一样，排在数组前面的图片不一定能先被load然后绘制，就可能会导致画出来的图的排列顺序和预想的不一样(特别是因为跨域加了域名重定向的图片尤为明显)，我的解决办法是：先全部画出来再排序再append到需要的节点里去。

let imgArray = \['img1.png', 'img2.png'\];

let receiveArray = new Array();

let $myContent = document.getELmentById("myContent");

let \{imgW, imgH\} = \{300, 300\};

let Canvas = document.createElement('canvas');

let ctx = Canvas.getContext("2d");

let scaleBy = 2;

Canvas.width = imgW \* scaleBy;

Canvas.height= imgH \* scaleBy;

imgArray.forEach((e, idx) => \{

let img = new Image();

img.src = e;

e.addEventListener('load', () => \{

ctx.drawImage(img, 0, 0, imgW \* scaleBy, imgH \* scaleBy);

let imgCont = new Image();

imgCont.src = Canvas.toDataURL();

imgCont.id = 'img' + idx;

receiveArray.push(imgCont); // 将绘制的img节点收集到数组里，这里的顺序可能和imgArray的顺序不一样

if (receiveArray.length === imgArray.length) \{ //所有图片load并绘制完成

let sortArr = new Array();

receiveArray.forEach(ex => \{ //将所有绘制图片按imgArray顺序排序

sortArr\[ex.id.split('img')\[1\]\] = ex;

\})

sortArr.forEach(ex2 => \{

$myContent.appendChild(ex2)

\})

\}

\})

\})

其实这也是一种略显无奈的做法，因为无法判断加载图片的实际大小，小的图片会先load并绘制，如果重定向域名后会加大这种现象，采用了绘制完再排序的做法。如果有谁想到更好的办法，欢迎指正批评。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

发表评论取消回复

表情：

评论列表（有 0 条评论，259人围观）

还没有评论，来说两句吧...

相关阅读

相关用Python绘制了多张令人赞叹的词云图

词云图是一种视觉化工具，通过将文本数据中出现频率较高的词语以视觉上的方式呈现出来，帮助我们更好地理解文本的主题和关键词。Python提供了丰富的库和工具，使我们能够轻松地创建漂

布满荆棘的人生/ 2024年03月02日 10:15/ 0 赞/ 36 阅读

相关 CSDN markdown多张图片显示并排并列显示

并列显示 <figure> <img src="http:xxx.pngpic_center"/> <img src="http

曾经终败给现在/ 2023年01月24日 02:02/ 0 赞/ 2 阅读

相关使用多张图制作gif动画图

<template> <view id="img" style="text-align: center;"> <image class=

àì夳堔傛蜴生んèń/ 2023年01月15日 11:27/ 0 赞/ 176 阅读

相关多张小图拼接为一张大图进行模糊图片切换

1：效果图如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG

太过爱你忘了你带给我的痛/ 2022年11月26日 01:57/ 0 赞/ 533 阅读

相关解决使用matplotlib绘制多张图保存为多个文件时，图表重叠的问题

今晚在使用matplotlib.pyplot（即plt）绘制饼图时，由于绘制了多张饼图，后面的图与前面的图重叠了： ![在这里插入图片描述][watermark_type_

我不是女神ヾ/ 2022年11月25日 10:19/ 0 赞/ 205 阅读

相关 html多张图并排自动循环显示,详解canvas绘制多张图的排列顺序问题

在开发中，如果遇到需要使用canvas同时绘制多张图片，但因为图片大小的不一样，排在数组前面的图片不一定能先被load然后绘制，就可能会导致画出来的图的排列顺序和预想的不一样(

àì夳堔傛蜴生んèń/ 2022年10月05日 13:54/ 0 赞/ 260 阅读

相关使用latex的subfigure并排放置多张图（亲测可用）

转载自http://blog.csdn.net/yihaizhiyan/article/details/10933771 使用宏包\\usepackage\{graphicx

向右看齐/ 2022年07月14日 13:48/ 0 赞/ 336 阅读

相关 java中pdf转图片,（多页pdf转成一张图或多张图），

1：icepdf的jar包下载地址 [http://www.icesoft.org/java/downloads/icepdf-downloads.jsf][http_www

青旅半醒/ 2022年06月10日 05:29/ 0 赞/ 443 阅读

相关 UIScrollerView当前显示3张图

> 代码地址如下： > [http://www.demodashi.com/demo/11173.html][http_www.demodashi.com_demo_111

短命女/ 2022年05月30日 01:38/ 0 赞/ 142 阅读

相关三张并排轮播图

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title

梦里梦外;/ 2022年04月03日 09:38/ 0 赞/ 164 阅读