Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to solve the problem of picture arrangement in html5". In daily operation, I believe many people have doubts about how to solve the problem of picture arrangement in html5. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubt of "how to solve the problem of picture arrangement in html5". Next, please follow the editor to study!

In development, if you need to use canvas to draw multiple pictures at the same time, but because of the different image sizes, the pictures in front of the array may not be drawn first by load and then drawn, which may cause the order of the drawn images to be different from what you expected (especially because the cross-domain images with domain redirection are especially obvious), my solution is to draw all of them first and then sort them all and then append them to the required nodes.

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 = 2bot 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) / / collect the drawn img nodes into an array. The order here may be different from that of imgArray. If (receiveArray.length = imgArray.length) {/ / all images load and draw let sortArr = new Array (); receiveArray.forEach (ex = > {/ / sort all drawn images in imgArray order sortArr [ex.id.split ('img') [1]] = ex }) sortArr.forEach (ex2 = > {$myContent.appendChild (ex2)})

In fact, this is also a slightly helpless practice, because it is impossible to judge the actual size of the loaded image. Small images will be load and drawn first. If you redirect the domain name, it will increase this phenomenon, using the method of sorting after drawing.

At this point, the study on "how to solve the problem of picture arrangement in html5" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.