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

测试代码如下

<!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{if (!$($imgs[i])) {throw 'loading函数参数$imgs['+i+']不能为空';}srcs[i] = $($imgs[i]).attr("src");let _image = new Image();_image.onload = function(){arr_img_w[i] = (_image.width);arr_img_h[i] = (_image.height);};_image.src = srcs[i];//保存图片的原始宽高//不论图片加载完成还是失败都执行该函数$(_image).on('load error', function () {loadImage();});} catch (err) {alert("err");printError(err);}}function loadImage () {if (imgs_num === loaded_img) {return false;}loaded_img = Math.min(imgs_num, ++loaded_img);}};loading();$btnMerge.on('click', function () {mergeImages();});$("#save").on('click', function () {if(l_src){var dlLink = document.createElement('a');dlLink.download = "文件名.png";dlLink.href = l_src;dlLink.click();}else{alert("请先生成文件")}});function mergeImages () {try {if (loaded_img!==imgs_num && 2!==imgs_num) {throw '图片未加载完成或图片的数目不为2';return false;}var canvas = document.querySelector("#canvas"),temp_w = 0,temp_h = 0,ctx = {};canvas.width = getMaxofArray(arr_img_w);canvas.height = getMaxofArray(arr_img_h);console.log("width",arr_img_w,arr_img_h,canvas.width,canvas.height);ctx = canvas.getContext('2d');for (let i = 0; i < imgs_num; i++) {temp_w = arr_img_w[i];temp_h = arr_img_h[i];if (i == (imgs_num-1)) {console.log("...",canvas.width,temp_w);ctx.drawImage($imgs[i], 0, 0, temp_w, temp_h, canvas.width-temp_w, canvas.height-temp_h, temp_w, temp_h);} else {ctx.drawImage($imgs[i], 0,0,canvas.width,canvas.height,0,0,canvas.width,canvas.height);}}l_src = canvas.toDataURL('image/png');} catch (err) {printError(err);}}function getMaxofArray (elems) {try {if (!Array.isArray(elems)) {throw 'getMaxofArray函数的参数必须是数组';}} catch (err) {printError(err);}return Math.max.apply(null, elems);}function printError (msg) {console.log('error message:', msg);}});
</script>
</html>

注意点：

crossOrigin属性必须在src之前

图片加载完成的先后顺序不一定，所以代码中没有使用push，而是

_image.onload = function(){arr_img_w[i] = (_image.width);arr_img_h[i] = (_image.height);
};

以上的代码还存在一个问题，如果需要自动生成，而不是点击的话，需要判断图片是否加载完成

完整代码如下

<!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>蜀创助贷</title><script src="./js/jquery.min.js"></script><link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="box" id="outer"><img src="./img/bg.png" id="merge" width="100%" alt=""><div class="alert none" id="centerBox"><img src="#" id="head" width="200" alt="头像"><h3>长按保存头像</h3></div>
</div>
</body>
<script>$(function () {let $_REQUEST = new Object, aParams = document.location.search.substr(1).split("&");for (let i = 0; i < aParams.length; i++) {let aParam = aParams[i].split("=");$_REQUEST[aParam[0]] = aParam[1]}let srcs=["./img/bg.png","./img/logo.png",$_REQUEST["img"]];let imgDom=[];let arr_img_w=[];let arr_img_h=[];$("#outer").on('click', function () {let canvas2 = document.createElement("canvas");let ctx = {};canvas2.width = 1000;canvas2.height = 1000;ctx = canvas2.getContext('2d');ctx.drawImage(imgDom[2], 0,0,1000,1000);ctx.drawImage(imgDom[1], 0,0,1000,1000);let l_src = canvas2.toDataURL('image/png');$("#head").attr('src', l_src);$("#centerBox").toggleClass("none")});$("#btn-merge").on('click', function () {mergeImages();});
//        var loading = function () {
//            for (let i = 0; i < srcs.length; i++) {
//                try{
//                    let _image = new Image();
//                    _image.onload = function(){
//                        arr_img_w[i] = (_image.width);
//                        arr_img_h[i] = (_image.height);
//                    };
//                    _image.crossOrigin = "Anonymous";
//                    _image.src = srcs[i];
//                    imgDom.push(_image);
//
//                } catch (err) {
//                    alert("err");
//                }
//            }
//        };
//
//        function getMaxofArray (elems) {
//            try {
//                if (!Array.isArray(elems)) {
//                    throw 'getMaxofArray函数的参数必须是数组';
//                }
//            } catch (err) {
//                alert(err)
//            }
//            return Math.max.apply(null, elems);
//        }function mergeImages () {try {let canvas = document.createElement("canvas");let temp_w = 0;let temp_h = 0;let ctx = {};canvas.width = 640;canvas.height = 1008;ctx = canvas.getContext('2d');ctx.drawImage(imgDom[0], 0,0,640,1008,0,0,640,1008);ctx.drawImage(imgDom[2], 0,0,arr_img_w[2],arr_img_w[2],185,505,290,290);ctx.drawImage(imgDom[1], 0,0,arr_img_w[1],arr_img_h[1],180,500,300,300);let l_src = canvas.toDataURL('image/png');$("#merge").attr('src', l_src);} catch (err) {alert(err)}}function loadImg(url,i, cb) {let _image = new Image();_image.onload = function(){arr_img_w[i] = (_image.width);arr_img_h[i] = (_image.height);imgDom[i] = _image;cb();};_image.crossOrigin = "Anonymous";_image.src = srcs[i];}function loadImages(urlArr, afterAllLoadedFunc) {var count = urlArr.length;var loadedCount = 0;for (var i = count - 1; i >= 0; i--) {loadImg(urlArr[i],i, function () {loadedCount ++;if (count === loadedCount) {afterAllLoadedFunc();}});}}loadImages(srcs, function () {mergeImages()});})
</script>
</html>

看效果图

拼接前的图片：加上自己的头像

js使用canvas拼接图片相关推荐

canvas拼接图片
参考地址 canvas拼接图片效果横向拼接纵向拼接代码 html <!DOCTYPE html> <html lang="en"> <head ...
html验证码图片,js+h5 canvas实现图片验证码
本文实例为大家分享了js+h5 canvas实现图片验证码的具体代码,供大家参考,具体内容如下实现效果一.使用技术原生js技术+html5 canvas画图利用Math.random()函数随 ...
js脚本替换拼接图片路径
#js脚本,拼接图片路径 ##替换拼接页面中图片路径: -$(function () { $('img').each(function () { var imgpath = $(this).attr( ...
vue canvas拼接图片(纵向)
vue 图片竖向拼接组件代码底部有demo <template><div><div><inputtype="file"id=" ...
react canvas拼接图片(纵向)
react 拼接图片代码底部有demo import React from "react"; import "./App.css";function App( ...
JS实现Canvas中图片淡出效果_艾孜尔江撰
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>实现C ...
利用js结合canvas给图片打马赛克
效果演示什么是canvas? <canvas> 元素用于图形的绘制,只是图形容器. 元素本身并没有绘制能力,您必须使用js脚本来绘制图形. getContext() 方法可返回一个对象, ...
js 利用canvas转换图片格式并下载图片
1.利用canvas转换格式思路很简单,就是在canvas上drawImage,然后再把canvas转换成想要的图片格式 convertImageToCanvas = (image) => { ...
JS利用Canvas实现图片等比例裁剪、压缩
最近在做一个政务类的移动端H5项目,用户体量达百万级别,有一个模块中有上传图片反馈的功能,由于各个手机产商拍照的像素值的都不一样,后台去浏览这个图片的时候就出现大小不一的情况,另外有些图片并不需要上传 ...

js使用canvas拼接图片

测试代码如下

完整代码如下

js使用canvas拼接图片相关推荐

最新文章

热门文章