思路:
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 (!$(