js使用canvas拼接图片

最新推荐文章于 2024-07-15 16:32:01 发布

smallbaoo

最新推荐文章于 2024-07-15 16:32:01 发布

阅读量1.3k

点赞数 2

分类专栏： js 小例子文章标签： canvas 拼接图片

本文链接：https://blog.csdn.net/qq_38433300/article/details/101287745

版权

这篇博客展示了如何利用canvas在JavaScript中拼接图片。文章提供了测试代码，并强调了设置crossOrigin属性的重要性，以及处理图片加载顺序的注意事项。完整的代码示例用于实现自动生成拼接后的图片，最后展示了一张拼接前的原始图片。

摘要由CSDN通过智能技术生成

人狠话不多，先看看图，是不是你需要的效果(文章最后有最终效果)，样子有点点那个啥，将就着看一下就是了(图片来自网络)：

测试代码如下

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <div class="img-boxs">
        图片一
        <img crossOrigin="Anonymous" src="http://cdn2.jianshu.io/assets/default_avatar/8-a356878e44b45ab268a3b0bbaaadeeb7.jpg" width="300"   class="merging" alt="">
        图片二
        <img crossOrigin="Anonymous" src="https://t12.baidu.com/it/u=1341260975,315835678&fm=76" width="100" class="merging" alt="">
        <p>canvas拼接</p>
        <canvas id="canvas"></canvas>
    </div>
    <button id="btn-merge">拼接</button>
    <button id="save">保存</button>
</body>
<script>
    $(function () {
        var l_src = '';
        var $imgs = $('.img-boxs .merging'),
            $btnMerge = $('#btn-merge'),
            srcs = [],
            arr_img_w = [],
            arr_img_h = [],
            imgs_num = $imgs.length,
            loaded_img = 0;
        var loading = function () {
            console.log(imgs_num);
            for (let i = 0; i < imgs_num; i++) {
                try{