使用h5的canvas实现两张图片的合并

时间:2023-02-10 20:08:08

思路:
1.首先等待图片加载完成
2.然后使用canvas完成图片的合并
3.显示合成图片
步骤:
1.根据第一个思路,需要image的load和error事件,大致流程:
var l_image = new Image();
l_image.src = src;
l_image.onload = function () {};
l_image.onerror = function () {};
2,根据第二个思路,需要canvas的drawImage()和toDataURL()两个方法,大致流程:
先试用for循环依次将图片写入画布,然后使用toDataURL生成新的图片(返回值可以作为图片的路径)
3.根据需要是否显示合成图片:
代码:

$(function () {
var $imgs = $('.img-boxs .merging'),
$btnMerge = $('#btn-merge'),
$mergedImage = $('.img-boxs .merged')[0],
srcs = [],
arr_img_w = [],
arr_img_h = [],
imgs_num = $imgs.length,
loaded_img = 0;
/*
* 定义一个名为loading的函数,用于加载图片以及获取一些初始值
* @param void
* @return void
* */

var loading = function () {
for (var i = 0; i < imgs_num; i++) {
try{
if (!$($imgs[i])) {
throw 'loading函数参数$imgs['+i+']不能为空';
}
srcs[i] = $($imgs[i]).attr("src");
var _image = new Image();
_image.src = srcs[i];
//保存图片的原始宽高
arr_img_w.push(_image.width);
arr_img_h.push(_image.height);
//不论图片加载完成还是失败都执行该函数
$(_image).on('load error', function () {
loadImage();
});
} catch (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();
});

/*
* 定义一个名为mergeImages的函数,用于合并两张图片
* @param void
* @return void
* */

function mergeImages () {
try {
if (loaded_img!==imgs_num && 2!==imgs_num) {
throw '图片未加载完成或图片的数目不为2';
return false;
}
var canvas = document.createElement('canvas'),
temp_w = 0,
temp_h = 0,
offset_w = Math.abs((arr_img_w[0] - arr_img_w[1]) / 2),//最后一张图片居中需要的x轴移动值
offset_h = Math.abs((arr_img_h[0] - arr_img_h[1]) / 2),//最后一张图片居中需要的y轴移动值
l_src = '',
ctx = {};
//画布的宽度和高度和最大图片的一样
canvas.width = getMaxofArray(arr_img_w);
canvas.height = getMaxofArray(arr_img_h);
ctx = canvas.getContext('2d');
for (var i = 0; i < imgs_num; i++) {
temp_w = arr_img_w[i];
temp_h = arr_img_h[i];
if (i == (imgs_num-1)) {
ctx.drawImage($imgs[i], 0, 0, temp_w, temp_h, offset_w, offset_h, temp_w, temp_h);
} else {
ctx.drawImage($imgs[i], 0, 0, temp_w, temp_h, 0, 0, temp_w, temp_h);
}
}
l_src = canvas.toDataURL('image/png');
$($mergedImage).attr('src', l_src);
} catch (err) {
printError(err);
}
}

/*
* 定义一个名为getMaxofArray的函数,用于获取数组中的最大值
* @param array elems 需要获取最大值的数组
* @return boolean maxValue 返回最大值
* */

function getMaxofArray (elems) {
try {
if (!Array.isArray(elems)) {
throw 'getMaxofArray函数的参数必须是数组';
}
} catch (err) {
printError(err);
}
return Math.max.apply(null, elems);
}

/*
* 定义一个名为getMaxofArray的函数,用于获取数组中的最大值
* @param string msg 产生的异常或错误
* @return void
* */

function printError (msg) {
console.log('error message:', msg);
}
});

使用h5的canvas实现两张图片的合并
使用h5的canvas实现两张图片的合并
注意:
1.要获取图片的原始值而不是css样式,所以你可以在var image = new Image(),后取得图片的原始值,
2.画布的宽高应和最大图片的宽高一致
3.图片不仅要写load事件,还要写error事件

错误
如何控制显示这样的错误

$imgs[i].attr is not a function
at loading (mergeImages.js:21)
at HTMLDocument.<anonymous> (mergeImages.js:43)
at mightThrow (jquery-3.2.1.js:3583)
at process (jquery-3.2.1.js:3651)

你会好奇找了一圈,你会有没什么错误啊,jquery明明有这个方法啊等等的想法
首先你要明确,你肯定有错,不然不会有错误,
其次使用console.log()打印元素会显示dom元素,恭喜你,你离真相只有一步,
给元素加上$()吧,好了,问题解决了。
在jquery使用中很容易犯这个错误,一定要牢记。