详解canvas绘图多张图的排序次序难题

日期:2021-02-22 类型:科技新闻 

关键词:图片模板,淘宝作图用什么软件好,在线制作白底图,设计图制作软件,抠图软件

在开发设计中,假如遇到必须应用canvas另外绘图多张照片,但由于照片尺寸的不1样,排在数字能量数组前面的照片不1定能先被load随后绘图,便可能会致使画出来的图的排序次序和料想的不1样(非常是由于跨域加了网站域名重定项的照片尤其显著),我的处理方法是:先所有画出来再排列再append到必须的连接点里去。

<div id="myContent"></div>
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的次序不1样
        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)
            })
        }
    })
})

实际上这也是1种略显无可奈何的做法,由于没法分辨载入照片的具体尺寸,小的照片会先load并绘图,假如重定项网站域名后会加大这类状况,选用了绘图完再排列的做法。假如有谁想起更好的方法,欢迎纠正指责。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。