canvas绘制多张图的排列顺序问题

DandJ 发布于2019-08-23 14:50 / 552人阅读

摘要：将绘制的节点收集到数组里，这里的顺序可能和的顺序不一样所有图片并绘制完成将所有绘制图片按顺序排序其实这也是一种略显无奈的做法，因为无法判断加载图片的实际大小，小的图片会先并绘制，如果重定向域名后会加大这种现象，采用了绘制完再排序的做法。

在开发中，如果遇到需要使用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并绘制，如果重定向域名后会加大这种现象，采用了绘制完再排序的做法。如果有谁想到更好的办法，欢迎指正批评。

云服务器 GPU云服务器 html绘制图形排列顺序排列不同顺序排列 html排列顺序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101235.html

canvas绘制多张图其中有空白或绘制不成功的问题

摘要：一般来说绘制很多张图片中间有几张没画出来通常就是没得原因，具体如下一般来说绘制很多张图片中间有几张没画出来通常就是没load得原因，具体如下： let arr = [img1,img2,img3]; let Canvas = document.createElement(canvas); ctx = Canvas.getContext(2d); let {W, H} = {10...

DobbyKim 2019-08-23 14:46 评论0 收藏0
小程序—九宫格心形拼图

摘要：而微信小程序中也刚好有进度条这个组件。推荐和意见反馈推荐给朋友意见反馈这个两个功能就是用了，微信小程序的组件，这里需要注意的就是，在清除的默认样式时，需要把的伪元素的边框也去掉。总结这次做的这个九宫格心形拼图的小程序，第一版已经上线了。说明前几天在朋友圈看到好几次这种图片。 showImg(https://segmentfault.com/img/bVbeAoX?w=321&h=3...

myeveryheart 2019-08-23 10:33 评论0 收藏0
JavaScript中的图片处理与合成(二)

摘要：通过这套流程，我们便能添加任意的图片图层并合成图片。下篇文章，我们会继续介绍下文字的合成和几何图片的合成，敬请期待 JavaScript中的图片处理与合成(二) 引言本系列分成以下4个部分: 基础类型图片处理技术之缩放、裁剪与旋转(传送门)；基础类型图片处理技术之图片合成；基础类型图片处理技术之文字合成；算法类型图片处理技术；上篇文章，我们介绍了图片的裁剪/旋转与缩放，接...

hersion 2019-08-22 15:07 评论0 收藏0