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

已于 2023-11-17 15:02:19 修改
阅读量1.7k 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript
于 2023-11-17 15:02:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/benxiaohai_311/article/details/134463258
版权

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

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>BOM案例 图片放大</title>
    <script src="js/jquery-2.1.0.min.js"></script>

    <link rel="stylesheet" type="text/css" href="./viewer/viewer.css" />
    <script src="./viewer/viewer.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <img id="img1" src="img/1.jpg" width="350" height="700" />
    <img id="img2" src="img/2021.png" width="350" height="700" />
</body>

<script type="text/javascript">
    let img1Src = "";
    let img2Src = "";

    function getAjax(imageURL) {
        $.ajax({
            type: "GET",
            url: imageURL,
            beforeSend: function (xhr) {
                xhr.overrideMimeType('text/plain; charset=x-user-defined');
            },
            success: function (result, textStatus, jqXHR) {
                if (result.length < 1) {
                    alert("The thumbnail doesn't exist");
                    $("#thumbnail").attr("src", "data:image/png;base64,");
                    return
                }

                var binary = "";
                var responseText = jqXHR.responseText;
                var responseTextLen = responseText.length;

                for (i = 0; i < responseTextLen; i++) {
                    binary += String.fromCharCode(responseText.charCodeAt(i) & 255)
                }
                img1Src = "data:image/png;base64," + btoa(binary);
                // $("#thumbnail").attr("src", "data:image/png;base64," + btoa(binary));
            },
            error: function (xhr, textStatus, errorThrown) {
                alert("Error in getting document " + textStatus);
            }
        });
    }

    function getAjax2(imageURL) {
        $.ajax({
            type: "GET",
            url: imageURL,
            beforeSend: function (xhr) {
                xhr.overrideMimeType('text/plain; charset=x-user-defined');
            },
            success: function (result, textStatus, jqXHR) {
                if (result.length < 1) {
                    alert("The thumbnail doesn't exist");
                    $("#thumbnail").attr("src", "data:image/png;base64,");
                    return
                }

                var binary = "";
                var responseText = jqXHR.responseText;
                var responseTextLen = responseText.length;

                for (i = 0; i < responseTextLen; i++) {
                    binary += String.fromCharCode(responseText.charCodeAt(i) & 255)
                }
                img2Src = "data:image/png;base64," + btoa(binary);
                // $("#thumbnail").attr("src", "data:image/png;base64," + btoa(binary));
            },
            error: function (xhr, textStatus, errorThrown) {
                alert("Error in getting document " + textStatus);
            }
        });
    }

    getAjax('https://www.chinamdvr.com:9201/v1/api/mgmt/deviceSetup/attachment/2023-10-31/01_0180fb8afe5f4241a26ef98902038fd1_184410_00.jpg');
    getAjax2('https://www.chinamdvr.com:9201/v1/api/mgmt/deviceSetup/attachment/2023-10-31/01_11f3e7e9412643b39e7a88ed13bcf67b_002216_00.jpg');

    setTimeout(function () {
        drawAndShareImage("我是文字111", "我是文字222", "设备与行驶证合照");
    }, 500)

    // 将两张图片拼在一起
    function drawAndShareImage(li1, li2, title) {
        let fontPosition = 30; // 字体需要在上面，不影响图片信息

        var canvas = document.createElement("canvas");
        canvas.width = 800;
        canvas.height = 800 + fontPosition;

        var context = canvas.getContext("2d");
        context.rect(0, 0, canvas.width, canvas.height);
        context.fillStyle = "#fff";
        context.font = "28px serif";
        context.fill();

        console.log(img1Src.length)
        console.log(img2Src.length)

        if (img1Src.length == 0) {
            console.log("现在的版本没有图片")
            var myImage2 = new Image();
            // 解决跨域问题
            myImage2.setAttribute('crossOrigin', 'anonymous');
            myImage2.src = img2Src;//你自己本地的图片或者在线图片
            myImage2.crossOrigin = 'Anonymous';
            myImage2.onload = function () {

                context.drawImage(myImage2, fontPosition, fontPosition, canvas.width - fontPosition - fontPosition, canvas.height - fontPosition - fontPosition); // 第二张图片的位置  margin-left margin-top width height
                context.fillStyle = '#000';
                context.fillText(li2, canvas.width / 2.5, 25); // 第二个图片的文字信息
                context.fillText(title, canvas.width / 3, canvas.height - 5); // 第三个图片的文字信息

                var base64 = canvas.toDataURL("image/png");//"image/png"这里注意一下
                const imgDom = document.createElement('img');
                imgDom.src = base64;
                imgDom.id = "imgimg";
                imgDom.style.display = "none";
                document.body.appendChild(imgDom);

                var viewer = new Viewer(document.getElementById('imgimg'), {
                    url: 'src'
                });
                $("#imgimg").click();
            }
        } else if (img2Src.length == 0) {
            console.log("历史的版本没有图片")
            var myImage = new Image();
            // 解决跨域问题
            myImage.setAttribute('crossOrigin', 'anonymous');
            myImage.src = img1Src;//你自己本地的图片或者在线图片
            myImage.crossOrigin = 'Anonymous';
            myImage.onload = function () {

                context.drawImage(myImage, fontPosition, fontPosition, canvas.width - fontPosition - fontPosition, canvas.height - fontPosition - fontPosition); // 第二张图片的位置  margin-left margin-top width height
                context.fillStyle = '#000';
                context.fillText(li1, canvas.width / 2.5, 25); // 第二个图片的文字信息
                context.fillText(title, canvas.width / 3, canvas.height - 5); // 第三个图片的文字信息

                var base64 = canvas.toDataURL("image/png");//"image/png"这里注意一下
                const imgDom = document.createElement('img');
                imgDom.src = base64;
                imgDom.id = "imgimg";
                imgDom.style.display = "none";
                document.body.appendChild(imgDom);

                var viewer = new Viewer(document.getElementById('imgimg'), {
                    url: 'src'
                });
                $("#imgimg").click();
            }
        } else {
            console.log("都有图片")
            var myImage = new Image();
            // 解决跨域问题
            myImage.setAttribute('crossOrigin', 'anonymous');
            myImage.src = img1Src;//背景图片你自己本地的图片或者在线图片
            myImage.crossOrigin = 'Anonymous';
            // 两张图片合并成一张代码

            myImage.onload = function () {

                context.drawImage(myImage, 0, fontPosition, (canvas.width / 2) - 5, canvas.height - fontPosition - fontPosition); // 第一张图片的位置  margin-left margin-top width height
                context.fillStyle = '#000';
                context.fillText(li1, canvas.width / 5, 25); // 第一个图片的文字信息
                context.fillText(title, canvas.width / 3, canvas.height - 5); // 第三个图片的文字信息

                var myImage2 = new Image();
                // 解决跨域问题
                myImage2.setAttribute('crossOrigin', 'anonymous');
                myImage2.src = img2Src;//你自己本地的图片或者在线图片
                myImage2.crossOrigin = 'Anonymous';
                myImage2.onload = function () {

                    context.drawImage(myImage2, (canvas.width / 2) + 5, fontPosition, (canvas.width / 2) - 5, canvas.height - fontPosition - fontPosition); // 第二张图片的位置  margin-left margin-top width height
                    context.fillStyle = '#000';
                    context.fillText(li2, canvas.width - canvas.width / 3, 25); // 第二个图片的文字信息
                    context.fillText(title, canvas.width / 3, canvas.height - 5); // 第三个图片的文字信息

                    var base64 = canvas.toDataURL("image/png");//"image/png"这里注意一下
                    const imgDom = document.createElement('img');
                    imgDom.src = base64;
                    imgDom.id = "imgimg" + Math.floor(Math.random() * 60);
                    imgDom.style.display = "none";
                    document.body.appendChild(imgDom);

                    console.log(imgDom.id)

                    var viewer = new Viewer(document.getElementById(imgDom.id), {
                        url: 'src'
                    });
                    $("#" + imgDom.id).click();

                }
            }
        }
    }

    // getImage("https://www.chinamdvr.com:9201/v1/api/mgmt/deviceSetup/attachment/2023-10-31/01_0180fb8afe5f4241a26ef98902038fd1_184410_00.jpg")
    // getImage2("https://www.chinamdvr.com:9201/v1/api/mgmt/deviceSetup/attachment/2023-10-31/01_11f3e7e9412643b39e7a88ed13bcf67b_002216_00.jpg")

    // function getImage(url) {
    //     const xhr = new XMLHttpRequest()
    //     xhr.onload = function () {
    //         const url_blob = URL.createObjectURL(this.response)
    //         const image = new Image()
    //         image.src = url_blob;
    //         img1Src = url_blob;
    //     }
    //     // url 图片的地址
    //     xhr.open('GET', url, true)
    //     xhr.responseType = 'blob'
    //     xhr.send()
    // }

    // function getImage2(url) {
    //     const xhr = new XMLHttpRequest()
    //     xhr.onload = function () {
    //         const url_blob = URL.createObjectURL(this.response)
    //         const image = new Image()
    //         image.src = url_blob;
    //         img2Src = url_blob;
    //     }
    //     // url 图片的地址
    //     xhr.open('GET', url, true)
    //     xhr.responseType = 'blob'
    //     xhr.send()
    // }
    
    // function drawAndShareImage(li1, li2, title) {
    //     let fontPosition = 30; // 字体需要在上面，不影响图片信息

    //     var canvas = document.createElement("canvas");
    //     canvas.width = 800;
    //     canvas.height = 800 + fontPosition;

    //     var context = canvas.getContext("2d");
    //     context.rect(0, 0, canvas.width, canvas.height);
    //     context.fillStyle = "#fff";
    //     context.font = "28px serif";
    //     context.fill();

    //     var myImage = new Image();
    //     // 解决跨域问题
    //     myImage.setAttribute('crossOrigin', 'anonymous');
    //     myImage.src = img1Src;//背景图片你自己本地的图片或者在线图片
    //     myImage.crossOrigin = 'Anonymous';
    //     // 两张图片合并成一张代码

    //     myImage.onload = function () {

    //         context.drawImage(myImage, 0, fontPosition, canvas.width / 2, canvas.height - fontPosition - fontPosition); // 第一张图片的位置  margin-left margin-top width height
    //         context.fillStyle = '#000';
    //         context.fillText(li1, canvas.width / 5, 25); // 第一个图片的文字信息

    //         var myImage2 = new Image();
    //         // 解决跨域问题
    //         myImage2.setAttribute('crossOrigin', 'anonymous');
    //         myImage2.src = img2Src;//你自己本地的图片或者在线图片
    //         myImage2.crossOrigin = 'Anonymous';
    //         myImage2.onload = function () {

    //             context.drawImage(myImage2, (canvas.width / 2) + 1, fontPosition, (canvas.width / 2) - 1, canvas.height - fontPosition - fontPosition); // 第二张图片的位置  margin-left margin-top width height
    //             context.fillStyle = '#000';
    //             context.fillText(li2, canvas.width - canvas.width / 3, 25); // 第二个图片的文字信息
    //             context.fillText(title, canvas.width / 3, canvas.height - 5); // 第三个图片的文字信息

    //             var base64 = canvas.toDataURL("image/png");//"image/png"这里注意一下
    //             const imgDom = document.createElement('img');
    //             imgDom.src = base64;
    //             imgDom.id = "imgimg";
    //             imgDom.style.display = "none";
    //             document.body.appendChild(imgDom);

    //             var viewer = new Viewer(document.getElementById('imgimg'), {
    //                 url: 'src'
    //             });
    //             $("#imgimg").click();

    //         }
    //     }
    // }


    // function getBase64Image (src) {
    //     return new Promise(resolve => {
    //         const img = new Image()
    //         img.crossOrigin = ''
    //         img.src = src
    //         img.onload = function () {
    //             const canvas = document.createElement('canvas')
    //             canvas.width = img.width
    //             canvas.height = img.height
    //             const ctx = canvas.getContext('2d')
    //             ctx?.drawImage(img, 0, 0, img.width, img.height)
    //             const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
    //             const dataURL = canvas.toDataURL('image/' + ext)
    //             console.log(dataURL)
    //             $("#img1").attr("src", dataURL)
    //             resolve(dataURL)
    //         }
    //     })
    // }
    // getBase64Image("https://www.chinamdvr.com:9201/v1/api/mgmt/deviceSetup/attachment/2023-10-31/01_0180fb8afe5f4241a26ef98902038fd1_184410_00.jpg")

    

    // 将两张图片拼在一起
    // function drawAndShareImage(img1, img2) {

    //     var canvas = document.createElement("canvas");
    //     canvas.width = 700;
    //     canvas.height = 700;

    //     var context = canvas.getContext("2d");
    //     context.rect(0, 0, 350, 350);
    //     context.fillStyle = "#fff";
    //     context.fill();

    //     var myImage = new Image();
    //     myImage.src = img1;//背景图片你自己本地的图片或者在线图片
    //     myImage.crossOrigin = 'Anonymous';
    //     // 两张图片合并成一张代码

    //     myImage.onload = function () {

    //         context.drawImage(myImage, 0, 0, 350, 350); // 第一张图片的位置  margin-left margin-top width height
    //         context.font = "20px";
    //         context.fillText("我是文字", 150, 150); // 第一个图片的文字信息

    //         var myImage2 = new Image();
    //         myImage2.src = img2;//你自己本地的图片或者在线图片
    //         myImage2.crossOrigin = 'Anonymous';
    //         myImage2.onload = function () {

    //             context.drawImage(myImage2, 350, 0, 350, 350); // 第一张图片的位置  margin-left margin-top width height
    //             context.font = "20px";
    //             context.fillText("我是文字", 450, 150); // 第二个图片的文字信息

    //             var base64 = canvas.toDataURL("image/png");//"image/png"这里注意一下
    //             const imgDom = document.createElement('img');
    //             imgDom.src = base64;
    //             document.body.appendChild(imgDom);

    //             return base64
    //         }

    //     }

    // }
</script>

</html>
琪公子呀
关注
专栏目录
js将两张图片合并成一张图片
weixin_42883164的博客
04-19 1681
js 两张图片合并成一张图片，并转化为base64
JS多张图片合成一张图片代码.zip
07-11
JS多张图片合成一张图片代码是一款基于canvas制作多张元素图片合成一张效果代码。
前端使用canvas实现多张图片拼接成一张图片
最新发布
qq_39177417的博客
08-28 333
react前端多张图片拼接成一张图片，实现图片竖直拼接。
js多图合成一张图
忧郁的蛋的专栏
12-18 982
先设置画布的宽高，再将每个图片整理成一个对象的数组通过某个方法传出合成后的base64。（3）、这个类应该有将配置的对象数组合成图片的方法和导出画布base64的方法。（1）、创建一个画布的类，他的属性是canvas虚拟dom和ctx。（2）、构造器初始化convas对象、ctx、convas的宽高。
前端将两张图片合为一张
Lei_zhen96的博客
12-04 6890
原理是使用canvas画布。 在页面加载前 mounted方法里：   setTimeout(() =&gt; { this.changeimg(); }, 1000); changeimg( )方法： changeimg(){ var self = this; var imgsrcArray = [ ...
代码整理-js合并图片
csdn_yasin的博客
10-22 722
js将两张图片合并为一张，比如一键生成海报图（将二维码合并到海报图上）
js+canvas实现两张图片合并成一张图片的方法
10-16
【JavaScript + Canvas 实现图片合并】 在Web开发中，JavaScript结合HTML5的Canvas API可以实现丰富的图像处理功能，包括合并两张图片。以下是如何利用这两者将两张图片合成为一张图片的详细步骤： 首先，我们需要...
js+canvas实现两张图片合并成一张图片的方法.docx
01-19
JS+Canvas实现两张图片合并成一张图片的方法 在本文中，我们将介绍如何使用JavaScript和HTML5 Canvas实现两张图片合并成一张图片的方法。该方法可以应用于各种场景，例如生成分享图片、合并图片等。 首先，需要...
将多个png图片合并成一个png图片
08-31
一些桌面和手机游戏中的一些动画效果需要使用很多帧图像，通过快速轮动播放来实现，少则几帧，多则几十帧，为了方便管理图片和减少图片文件总的大小，往往需要把这些帧的图像合并到一个文件中-----即把N个大小和格式...
HTML5柱状图表将多张图表的数据合并成一张图表显示.zip
11-04
在本示例中，"HTML5柱状图表将多张图表的数据合并成一张图表显示"的主题聚焦于如何利用HTML5的Canvas元素或者SVG（Scalable Vector Graphics）元素来绘制柱状图表，并且将来自多个数据源的信息整合到同一张图表中，...
java实现js、css、图片合并到html文件
08-18
技术点：1、使用htmlparser解析html文件，得到html代码里的js、css、img链接 2、将相对路径的链接转变成绝对路径，并读取资源 3、将css和js合并到html 4、将图片转换成base64编码，写入标签的src
js+canvas多张图片合成一张图片代码.zip
04-14
js+canvas多张图片合成一张图片代码
JS多张图片合成一张图片特效代码
03-20
JS多张图片合成一张图片代码是一款基于canvas制作多张元素图片合成一张效果代码。 JS多张图片合成一张图片代码截图
js代码怎么实现合并图片
weixin_35756624的博客
12-21 1277
可以使用 JavaScript 的 canvas 元素来合并图片。下面是一个示例代码： // 获取 canvas 元素 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 加载图片1 var img1 = new Image(); img1.src = 'image1.jpg'...
【实战】1587- 使用 JS 将多张 GIF 图合成为一张 GIF 图
pingan8787
02-06 483
解析 DOM 中包含的 GIF重新生成 GIF 的每一帧解析 GIF 插件 gifuct-js解析出来每一帧的数据结构{ // The color table lookup index for each pixel pixels: [...], // the dimensions of the gif frame (see disposal method) dims: ...
js使用Canvas将多张图片合并成一张
weixin_45337170的博客
03-30 6170
解决方案 function mergeImgs(list) { const canvas = document.createElement('canvas') canvas.width = 500 canvas.height = 500 * list.length const context = canvas.getContext('2d') list.map((item, index) => { const img = new Image() img.src =
js多个对象合并成一个
05-24
可以使用 `Object.assign()` 方法将多个对象合并成一个对象。这个方法会将所有源对象的属性复制到目标对象中。 例如，我们有以下两个对象： ``` const obj1 = { a: 1, b: 2 }; const obj2 = { c: 3, d: 4 }; ``` 我们可以使用 `Object.assign()` 将它们合并成一个新的对象： ``` const mergedObj = Object.assign({}, obj1, obj2); console.log(mergedObj); // { a: 1, b: 2, c: 3, d: 4 } ``` 第一个参数是目标对象，后面的参数是源对象，多个源对象之间用逗号分隔。注意，`Object.assign()` 方法是浅拷贝，也就是说，如果源对象的属性值是一个对象，则目标对象中对应的属性值也会是同一个对象。 如果你使用的是 ES6 或以上的版本，也可以使用对象展开运算符 `...` 来实现相同的效果： ``` const mergedObj = { ...obj1, ...obj2 }; console.log(mergedObj); // { a: 1, b: 2, c: 3, d: 4 } ``` 这个语法更加简洁，但同样也是浅拷贝。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值