html合并图片两张图片合成一张图片

最新推荐文章于 2022-09-17 15:02:44 发布

我想种大白菜

最新推荐文章于 2022-09-17 15:02:44 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

文章标签： html 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_49946357/article/details/121036103

<!DOCTYPE html>
<html>
   <head>

       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <meta http-equiv="Access-Control-Allow-Origin" content="*">
       <title>合并图片</title>
       <style>
           img {
               border: solid 1px #ddd;
           }
       </style>
   </head>

<body>

       <img id="avatar" />
       <script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
       <script>
           var canvas = document.createElement("canvas");
           canvas.width = 550;
           canvas.height = 700;
           var context = canvas.getContext("2d");
           context.rect(0, 0, canvas.width, canvas.height);
           context.fillStyle = "#fff";
           context.fill();
           var img1 = new Image();
           img1.src = "img/d.jpg"; //背景图片你自己本地的图片或者在线图片
           img1.crossOrigin = 'Anonymous';
           img1.setAttribute("crossOrigin", 'anonymous');
           var img1w = img1.width;
           var img1h = img1.height;
           var widths1 = 400 / img1w;
           var heithes1 = 300 / img1h;
           img1.onload = function() {
               if (img1w > 400 || img1h > 300) {
                   context.drawImage(img1, 50, 30, img1w * heithes1, img1h * heithes1);
               } else if (img1.width > 400) {
                   context.drawImage(img1, 50, 30, img1w * widths1, img1h * widths1);
               } else if (img1.height > 300) {
                   context.drawImage(img1, 50, 30, img1w * heithes1, img1h * heithes1);
               } else {
                   context.drawImage(img1, 50, 30, img1w, img1h);
               }
               var img2 = new Image();
               img2.src = "img/d.jpg"; //你自己本地的图片或者在线图片
               img2.crossOrigin = 'Anonymous';
               img2.setAttribute("crossOrigin", 'anonymous');
               img2.onload = function() {
                   var img2w = img2.width;
                   var img2h = img2.height;
                   var widths2 = 400 / img2w;
                   var heithes2 = 300 / img2h;;
                   if (img2w > 400 || img2h > 300) {
                       context.drawImage(img2, 50, 350, img2w * heithes2, img2h * heithes2);
                   } else if (img2.width > 400) {
                       context.drawImage(img2, 50, 350, img2w * widths2, img2h * widths2);
                   } else if (img2.height > 300) {
                       context.drawImage(img2, 50, 350, img2w * heithes2, img2h * heithes2);
                   } else {
                       context.drawImage(img2, 50, 350, img2w, img2h);
                   }
                   var base64 = canvas.toDataURL("image/png");
                   var img = document.getElementById('avatar');
                   // document.getElementById('avatar').src = base64;
                   img.setAttribute('src', base64);
               }
           }
       </script>
   </body>
</html>