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

已于 2023-11-17 15:02:19 修改
阅读量1.3k 收藏
点赞数
分类专栏： 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>
琪公子呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯js合并图片
zhangzhibinshuai的博客
08-28 387
可以移动合并图片的顺序(暂未实现, 选择图片的时候, 可以注意一下顺序)- 合并功能尽量简单, 通过多次合并来达到最总目的。- 点击合并后的图片可以下载, 方便用户操作。## 基础方法, 读取用户选择的图片数据。无数据上传, 可按F12查看所有源代码。- 可以先改变尺寸, 再合并。- 可以删除不需要合并的图片。- 横向和纵向两个合并功能。## 点击图片可下载图片。
完美图片蒙太奇的JS效果基于JQuery实现（多个大小不同图片拼接成图片墙）
西蒙吹牛
05-03 6351
完美图片蒙太奇的JS效果基于JQuery实现（多个大小不同图片拼接成图片墙）,比百度和Bing的图片搜索拼接效果还强,完美。
js使用Canvas将多张图片合并成一张
weixin_45337170的博客
03-30 5801
解决方案 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将两张图片合并成一张图片
最新发布
weixin_42883164的博客
04-19 532
js 两张图片合并成一张图片，并转化为base64
代码整理-js合并图片
csdn_yasin的博客
10-22 601
js将两张图片合并为一张，比如一键生成海报图（将二维码合并到海报图上）
vue 使用html2canvas实现图片合成，将两张图片合成一张,并下载海报
qq_37831545的博客
09-17 2636
使用html2canvas将两张图片合成一张,并下载海报（效果图） html2canvas屏幕截图基于 DOM，因此可能不是 100% 准确到真实表示，因为它不会制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。
js多图合成一张图
忧郁的蛋的专栏
12-18 808
先设置画布的宽高，再将每个图片整理成一个对象的数组通过某个方法传出合成后的base64。（3）、这个类应该有将配置的对象数组合成图片的方法和导出画布base64的方法。（1）、创建一个画布的类，他的属性是canvas虚拟dom和ctx。（2）、构造器初始化convas对象、ctx、convas的宽高。
js+canvas实现两张图片合并成一张图片的方法
10-16
主要介绍了js+canvas实现两张图片合并成一张图片的方法,结合实例形式分析了JavaScript结合HTML5 canvas实现图片合并的操作技巧,并附带了Java图片合并的实现方法,需要的朋友可以参考下
js+canvas实现两张图片合并成一张图片的方法.docx
01-19
JS+Canvas实现两张图片合并成一张图片的方法 在本文中，我们将介绍如何使用JavaScript和HTML5 Canvas实现两张图片合并成一张图片的方法。该方法可以应用于各种场景，例如生成分享图片、合并图片等。 首先，需要...
JS多张图片合成一张图片代码.zip
07-11
这个“JS多张图片合成一张图片代码”项目为开发人员提供了一个实用的工具，帮助他们轻松地将多张图片合并成一张。通过学习和理解这段代码，你可以掌握Canvas的基本用法，以及如何利用它进行图像处理。同时，这个过程...
js+canvas多张图片合成一张图片代码.zip
04-14
js+canvas多张图片合成一张图片代码
java实现js、css、图片合并到html文件
08-18
技术点：1、使用htmlparser解析html文件，得到html代码里的js、css、img链接 2、将相对路径的链接转变成绝对路径，并读取资源 3、将css和js合并到html 4、将图片转换成base64编码，写入标签的src
Nodejs下使用gm圆形裁剪并合成图片的示例
01-21
说到Nodejs下的图片处理可能第一想到就是gm，gm底层可以是GraphicsMagic（其实也是gm的由来），也可以是ImageMagick（其实GraphicsMagic本身也是从ImageMagic分割而来，现在独立了）。虽然这两个工具本身都不是js实现，所以需要额外安装，不过此工具非常常见，可能已经预装在linux系统下，而且安装也很方便，所以不用因为看到是“第三方”就放弃。虽然说这两个软件都只是底层，无需关心，可笔者在实践中发现必须得用GraphicsMagic，所以这里就只介绍GraphicsMagics的安装与使用。 GaphicsMagic 安装 GraphicsMagic
protobuf-merge:多个protobuf文件合并成一个
05-12
标题中的“protobuf-merge”指的是将多个protobuf（Protocol Buffers）定义文件合并成一个单一的文件。Protocol Buffers是Google开发的一种数据序列化协议，它允许开发者定义数据结构，然后生成能够在各种编程语言中...
js实现两张图片合成一张图片(canvas绘图,图片合成)
热门推荐
m0_37585097的博客
06-17 1万+
收到一个需求把一个动态生成的二维码和页面背景图合并在一起供用户保存图片并分享朋友圈是现在邀请好友功能(微信自己的分享很容易被封).把自己遇到需要注意的点,写下来记录一下. 用两张图片的base64进行操作. 绘图代码: KaTeX parse error: Expected '}', got 'EOF' at end of input: … qcodeGenert(("#url").val()...
JavaScript实现碎片合成大图
算法与编程之美
08-27 992
欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。欢迎加入团队圈子！与作者面对面！直接点击！新建文件目录在......
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、付费专栏及课程。

余额充值