• js 将多张图片合并成一张图片

    其实就是将两张图片地址根据canvas组合在一起，我放到项目中因为会存在跨域问题，所以将图片转化成base64，后面还会带随机值，这样可避免图片跨域错误，正常情况下可以直接将图片放到canvas里面。

    灵感来源：js 将多张图片合并成一张图片

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>BOM案例 图片放大title>
    7.     <script src="js/jquery-2.1.0.min.js">script>
    8.  
    9.     <link rel="stylesheet" type="text/css" href="./viewer/viewer.css" />
    10.     <script src="./viewer/viewer.js" type="text/javascript" charset="utf-8">script>
    11. head>
    12.  
    13. <body>
    14.     <img id="img1" src="img/1.jpg" width="350" height="700" />
    15.     <img id="img2" src="img/2021.png" width="350" height="700" />
    16. body>
    17.  
    18. <script type="text/javascript">
    19.     let img1Src = "";
    20.     let img2Src = "";
    21.  
    22.     function getAjax(imageURL) {
    23.         $.ajax({
    24.             type: "GET",
    25.             url: imageURL,
    26.             beforeSend: function (xhr) {
    27.                 xhr.overrideMimeType('text/plain; charset=x-user-defined');
    28.             },
    29.             success: function (result, textStatus, jqXHR) {
    30.                 if (result.length < 1) {
    31.                     alert("The thumbnail doesn't exist");
    32.                     $("#thumbnail").attr("src", "data:image/png;base64,");
    33.                     return
    34.                 }
    35.  
    36.                 var binary = "";
    37.                 var responseText = jqXHR.responseText;
    38.                 var responseTextLen = responseText.length;
    39.  
    40.                 for (i = 0; i < responseTextLen; i++) {
    41.                     binary += String.fromCharCode(responseText.charCodeAt(i) & 255)
    42.                 }
    43.                 img1Src = "data:image/png;base64," + btoa(binary);
    44.                 // $("#thumbnail").attr("src", "data:image/png;base64," + btoa(binary));
    45.             },
    46.             error: function (xhr, textStatus, errorThrown) {
    47.                 alert("Error in getting document " + textStatus);
    48.             }
    49.         });
    50.     }
    51.  
    52.     function getAjax2(imageURL) {
    53.         $.ajax({
    54.             type: "GET",
    55.             url: imageURL,
    56.             beforeSend: function (xhr) {
    57.                 xhr.overrideMimeType('text/plain; charset=x-user-defined');
    58.             },
    59.             success: function (result, textStatus, jqXHR) {
    60.                 if (result.length < 1) {
    61.                     alert("The thumbnail doesn't exist");
    62.                     $("#thumbnail").attr("src", "data:image/png;base64,");
    63.                     return
    64.                 }
    65.  
    66.                 var binary = "";
    67.                 var responseText = jqXHR.responseText;
    68.                 var responseTextLen = responseText.length;
    69.  
    70.                 for (i = 0; i < responseTextLen; i++) {
    71.                     binary += String.fromCharCode(responseText.charCodeAt(i) & 255)
    72.                 }
    73.                 img2Src = "data:image/png;base64," + btoa(binary);
    74.                 // $("#thumbnail").attr("src", "data:image/png;base64," + btoa(binary));
    75.             },
    76.             error: function (xhr, textStatus, errorThrown) {
    77.                 alert("Error in getting document " + textStatus);
    78.             }
    79.         });
    80.     }
    81.  
    82.     getAjax('https://www.chinamdvr.com:9201/v1/api/mgmt/deviceSetup/attachment/2023-10-31/01_0180fb8afe5f4241a26ef98902038fd1_184410_00.jpg');
    83.     getAjax2('https://www.chinamdvr.com:9201/v1/api/mgmt/deviceSetup/attachment/2023-10-31/01_11f3e7e9412643b39e7a88ed13bcf67b_002216_00.jpg');
    84.  
    85.     setTimeout(function () {
    86.         drawAndShareImage("我是文字111", "我是文字222", "设备与行驶证合照");
    87.     }, 500)
    88.  
    89.     // 将两张图片拼在一起
    90.     function drawAndShareImage(li1, li2, title) {
    91.         let fontPosition = 30; // 字体需要在上面，不影响图片信息
    92.  
    93.         var canvas = document.createElement("canvas");
    94.         canvas.width = 800;
    95.         canvas.height = 800 + fontPosition;
    96.  
    97.         var context = canvas.getContext("2d");
    98.         context.rect(0, 0, canvas.width, canvas.height);
    99.         context.fillStyle = "#fff";
    100.         context.font = "28px serif";
    101.         context.fill();
    102.  
    103.         console.log(img1Src.length)
    104.         console.log(img2Src.length)
    105.  
    106.         if (img1Src.length == 0) {
    107.             console.log("现在的版本没有图片")
    108.             var myImage2 = new Image();
    109.             // 解决跨域问题
    110.             myImage2.setAttribute('crossOrigin', 'anonymous');
    111.             myImage2.src = img2Src;//你自己本地的图片或者在线图片
    112.             myImage2.crossOrigin = 'Anonymous';
    113.             myImage2.onload = function () {
    114.  
    115.                 context.drawImage(myImage2, fontPosition, fontPosition, canvas.width - fontPosition - fontPosition, canvas.height - fontPosition - fontPosition); // 第二张图片的位置  margin-left margin-top width height
    116.                 context.fillStyle = '#000';
    117.                 context.fillText(li2, canvas.width / 2.5, 25); // 第二个图片的文字信息
    118.                 context.fillText(title, canvas.width / 3, canvas.height - 5); // 第三个图片的文字信息
    119.  
    120.                 var base64 = canvas.toDataURL("image/png");//"image/png"这里注意一下
    121.                 const imgDom = document.createElement('img');
    122.                 imgDom.src = base64;
    123.                 imgDom.id = "imgimg";
    124.                 imgDom.style.display = "none";
    125.                 document.body.appendChild(imgDom);
    126.  
    127.                 var viewer = new Viewer(document.getElementById('imgimg'), {
    128.                     url: 'src'
    129.                 });
    130.                 $("#imgimg").click();
    131.             }
    132.         } else if (img2Src.length == 0) {
    133.             console.log("历史的版本没有图片")
    134.             var myImage = new Image();
    135.             // 解决跨域问题
    136.             myImage.setAttribute('crossOrigin', 'anonymous');
    137.             myImage.src = img1Src;//你自己本地的图片或者在线图片
    138.             myImage.crossOrigin = 'Anonymous';
    139.             myImage.onload = function () {
    140.  
    141.                 context.drawImage(myImage, fontPosition, fontPosition, canvas.width - fontPosition - fontPosition, canvas.height - fontPosition - fontPosition); // 第二张图片的位置  margin-left margin-top width height
    142.                 context.fillStyle = '#000';
    143.                 context.fillText(li1, canvas.width / 2.5, 25); // 第二个图片的文字信息
    144.                 context.fillText(title, canvas.width / 3, canvas.height - 5); // 第三个图片的文字信息
    145.  
    146.                 var base64 = canvas.toDataURL("image/png");//"image/png"这里注意一下
    147.                 const imgDom = document.createElement('img');
    148.                 imgDom.src = base64;
    149.                 imgDom.id = "imgimg";
    150.                 imgDom.style.display = "none";
    151.                 document.body.appendChild(imgDom);
    152.  
    153.                 var viewer = new Viewer(document.getElementById('imgimg'), {
    154.                     url: 'src'
    155.                 });
    156.                 $("#imgimg").click();
    157.             }
    158.         } else {
    159.             console.log("都有图片")
    160.             var myImage = new Image();
    161.             // 解决跨域问题
    162.             myImage.setAttribute('crossOrigin', 'anonymous');
    163.             myImage.src = img1Src;//背景图片你自己本地的图片或者在线图片
    164.             myImage.crossOrigin = 'Anonymous';
    165.             // 两张图片合并成一张代码
    166.  
    167.             myImage.onload = function () {
    168.  
    169.                 context.drawImage(myImage, 0, fontPosition, (canvas.width / 2) - 5, canvas.height - fontPosition - fontPosition); // 第一张图片的位置  margin-left margin-top width height
    170.                 context.fillStyle = '#000';
    171.                 context.fillText(li1, canvas.width / 5, 25); // 第一个图片的文字信息
    172.                 context.fillText(title, canvas.width / 3, canvas.height - 5); // 第三个图片的文字信息
    173.  
    174.                 var myImage2 = new Image();
    175.                 // 解决跨域问题
    176.                 myImage2.setAttribute('crossOrigin', 'anonymous');
    177.                 myImage2.src = img2Src;//你自己本地的图片或者在线图片
    178.                 myImage2.crossOrigin = 'Anonymous';
    179.                 myImage2.onload = function () {
    180.  
    181.                     context.drawImage(myImage2, (canvas.width / 2) + 5, fontPosition, (canvas.width / 2) - 5, canvas.height - fontPosition - fontPosition); // 第二张图片的位置  margin-left margin-top width height
    182.                     context.fillStyle = '#000';
    183.                     context.fillText(li2, canvas.width - canvas.width / 3, 25); // 第二个图片的文字信息
    184.                     context.fillText(title, canvas.width / 3, canvas.height - 5); // 第三个图片的文字信息
    185.  
    186.                     var base64 = canvas.toDataURL("image/png");//"image/png"这里注意一下
    187.                     const imgDom = document.createElement('img');
    188.                     imgDom.src = base64;
    189.                     imgDom.id = "imgimg" + Math.floor(Math.random() * 60);
    190.                     imgDom.style.display = "none";
    191.                     document.body.appendChild(imgDom);
    192.  
    193.                     console.log(imgDom.id)
    194.  
    195.                     var viewer = new Viewer(document.getElementById(imgDom.id), {
    196.                         url: 'src'
    197.                     });
    198.                     $("#" + imgDom.id).click();
    199.  
    200.                 }
    201.             }
    202.         }
    203.     }
    204.  
    205.     // getImage("https://www.chinamdvr.com:9201/v1/api/mgmt/deviceSetup/attachment/2023-10-31/01_0180fb8afe5f4241a26ef98902038fd1_184410_00.jpg")
    206.     // getImage2("https://www.chinamdvr.com:9201/v1/api/mgmt/deviceSetup/attachment/2023-10-31/01_11f3e7e9412643b39e7a88ed13bcf67b_002216_00.jpg")
    207.  
    208.     // function getImage(url) {
    209.     //     const xhr = new XMLHttpRequest()
    210.     //     xhr.onload = function () {
    211.     //         const url_blob = URL.createObjectURL(this.response)
    212.     //         const image = new Image()
    213.     //         image.src = url_blob;
    214.     //         img1Src = url_blob;
    215.     //     }
    216.     //     // url 图片的地址
    217.     //     xhr.open('GET', url, true)
    218.     //     xhr.responseType = 'blob'
    219.     //     xhr.send()
    220.     // }
    221.  
    222.     // function getImage2(url) {
    223.     //     const xhr = new XMLHttpRequest()
    224.     //     xhr.onload = function () {
    225.     //         const url_blob = URL.createObjectURL(this.response)
    226.     //         const image = new Image()
    227.     //         image.src = url_blob;
    228.     //         img2Src = url_blob;
    229.     //     }
    230.     //     // url 图片的地址
    231.     //     xhr.open('GET', url, true)
    232.     //     xhr.responseType = 'blob'
    233.     //     xhr.send()
    234.     // }
    235.     
    236.     // function drawAndShareImage(li1, li2, title) {
    237.     //     let fontPosition = 30; // 字体需要在上面，不影响图片信息
    238.  
    239.     //     var canvas = document.createElement("canvas");
    240.     //     canvas.width = 800;
    241.     //     canvas.height = 800 + fontPosition;
    242.  
    243.     //     var context = canvas.getContext("2d");
    244.     //     context.rect(0, 0, canvas.width, canvas.height);
    245.     //     context.fillStyle = "#fff";
    246.     //     context.font = "28px serif";
    247.     //     context.fill();
    248.  
    249.     //     var myImage = new Image();
    250.     //     // 解决跨域问题
    251.     //     myImage.setAttribute('crossOrigin', 'anonymous');
    252.     //     myImage.src = img1Src;//背景图片你自己本地的图片或者在线图片
    253.     //     myImage.crossOrigin = 'Anonymous';
    254.     //     // 两张图片合并成一张代码
    255.  
    256.     //     myImage.onload = function () {
    257.  
    258.     //         context.drawImage(myImage, 0, fontPosition, canvas.width / 2, canvas.height - fontPosition - fontPosition); // 第一张图片的位置  margin-left margin-top width height
    259.     //         context.fillStyle = '#000';
    260.     //         context.fillText(li1, canvas.width / 5, 25); // 第一个图片的文字信息
    261.  
    262.     //         var myImage2 = new Image();
    263.     //         // 解决跨域问题
    264.     //         myImage2.setAttribute('crossOrigin', 'anonymous');
    265.     //         myImage2.src = img2Src;//你自己本地的图片或者在线图片
    266.     //         myImage2.crossOrigin = 'Anonymous';
    267.     //         myImage2.onload = function () {
    268.  
    269.     //             context.drawImage(myImage2, (canvas.width / 2) + 1, fontPosition, (canvas.width / 2) - 1, canvas.height - fontPosition - fontPosition); // 第二张图片的位置  margin-left margin-top width height
    270.     //             context.fillStyle = '#000';
    271.     //             context.fillText(li2, canvas.width - canvas.width / 3, 25); // 第二个图片的文字信息
    272.     //             context.fillText(title, canvas.width / 3, canvas.height - 5); // 第三个图片的文字信息
    273.  
    274.     //             var base64 = canvas.toDataURL("image/png");//"image/png"这里注意一下
    275.     //             const imgDom = document.createElement('img');
    276.     //             imgDom.src = base64;
    277.     //             imgDom.id = "imgimg";
    278.     //             imgDom.style.display = "none";
    279.     //             document.body.appendChild(imgDom);
    280.  
    281.     //             var viewer = new Viewer(document.getElementById('imgimg'), {
    282.     //                 url: 'src'
    283.     //             });
    284.     //             $("#imgimg").click();
    285.  
    286.     //         }
    287.     //     }
    288.     // }
    289.  
    290.  
    291.     // function getBase64Image (src) {
    292.     //     return new Promise(resolve => {
    293.     //         const img = new Image()
    294.     //         img.crossOrigin = ''
    295.     //         img.src = src
    296.     //         img.onload = function () {
    297.     //             const canvas = document.createElement('canvas')
    298.     //             canvas.width = img.width
    299.     //             canvas.height = img.height
    300.     //             const ctx = canvas.getContext('2d')
    301.     //             ctx?.drawImage(img, 0, 0, img.width, img.height)
    302.     //             const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
    303.     //             const dataURL = canvas.toDataURL('image/' + ext)
    304.     //             console.log(dataURL)
    305.     //             $("#img1").attr("src", dataURL)
    306.     //             resolve(dataURL)
    307.     //         }
    308.     //     })
    309.     // }
    310.     // getBase64Image("https://www.chinamdvr.com:9201/v1/api/mgmt/deviceSetup/attachment/2023-10-31/01_0180fb8afe5f4241a26ef98902038fd1_184410_00.jpg")
    311.  
    312.     
    313.  
    314.     // 将两张图片拼在一起
    315.     // function drawAndShareImage(img1, img2) {
    316.  
    317.     //     var canvas = document.createElement("canvas");
    318.     //     canvas.width = 700;
    319.     //     canvas.height = 700;
    320.  
    321.     //     var context = canvas.getContext("2d");
    322.     //     context.rect(0, 0, 350, 350);
    323.     //     context.fillStyle = "#fff";
    324.     //     context.fill();
    325.  
    326.     //     var myImage = new Image();
    327.     //     myImage.src = img1;//背景图片你自己本地的图片或者在线图片
    328.     //     myImage.crossOrigin = 'Anonymous';
    329.     //     // 两张图片合并成一张代码
    330.  
    331.     //     myImage.onload = function () {
    332.  
    333.     //         context.drawImage(myImage, 0, 0, 350, 350); // 第一张图片的位置  margin-left margin-top width height
    334.     //         context.font = "20px";
    335.     //         context.fillText("我是文字", 150, 150); // 第一个图片的文字信息
    336.  
    337.     //         var myImage2 = new Image();
    338.     //         myImage2.src = img2;//你自己本地的图片或者在线图片
    339.     //         myImage2.crossOrigin = 'Anonymous';
    340.     //         myImage2.onload = function () {
    341.  
    342.     //             context.drawImage(myImage2, 350, 0, 350, 350); // 第一张图片的位置  margin-left margin-top width height
    343.     //             context.font = "20px";
    344.     //             context.fillText("我是文字", 450, 150); // 第二个图片的文字信息
    345.  
    346.     //             var base64 = canvas.toDataURL("image/png");//"image/png"这里注意一下
    347.     //             const imgDom = document.createElement('img');
    348.     //             imgDom.src = base64;
    349.     //             document.body.appendChild(imgDom);
    350.  
    351.     //             return base64
    352.     //         }
    353.  
    354.     //     }
    355.  
    356.     // }
    357. script>
    358.  
    359. html>
  • 相关阅读:
    人体状态检测YOLOV8 NANO
    【OpenPCDet】稀疏卷积SPConv-v1.2代码解读(2)
    HttpServletResponse对象
    给定一个二进制数组，计算其中最大连续1的个数
    除了走路，40-60岁的人，还可以进行哪些运动？3种运动可供参考
    基于Jenkins实现的CI/CD方案
    软件设计原则-依赖倒置原则讲解以及代码示例
    (02)Cartographer源码无死角解析-(17) SensorBridge→里程计数据处理与TfBridge分析
    Talk Is Cheap,Show Me The Code: 三种语言个人框架压测(Java/Go/Rust)
    盘点7种JavaScript常用设计模式
  • 原文地址：https://blog.csdn.net/Benxiaohai_311/article/details/134463258