<style> * { margin: 0; padding: 0; } :root, html, body { height: 100vh; width: 100vw; } </style> </head> <img src='' alt='海报'> <body> </body> <script> var poster = document.getElementsByTagName('img')[0]; var canvas = document.createElement('canvas'); canvas.height = 600; canvas.width = 350; var context = canvas.getContext("2d"); var img = new Image(); // 因为图片加载的请求是异步的， 所以需要等图片加载回来后进行对应的操作 img.onload = function () { context.drawImage(img, 0, 0, 350, 600); } img.src = "./img/poster.jpg"; // 创建一个二维码的img var qrcodeImg = new Image(); qrcodeImg.onload = function(){ context.drawImage(qrcodeImg, 250, 500, 50, 50); poster.src = canvas.toDataURL("image/jpeg", 1.0); } qrcodeImg.src = "./img/qrcode.png"; </script>
