使用h5的canvas实现两张图片的合并
2017-12-18 18:22
1326 查看
思路:
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.根据需要是否显示合成图片:
代码:
注意:
1.要获取图片的原始值而不是css样式,所以你可以在var image = new Image(),后取得图片的原始值,
2.画布的宽高应和最大图片的宽高一致
3.图片不仅要写load事件,还要写error事件
错误
如何控制显示这样的错误
你会好奇找了一圈,你会有没什么错误啊,jquery明明有这个方法啊等等的想法
首先你要明确,你肯定有错,不然不会有错误,
其次使用console.log()打印元素会显示dom元素,恭喜你,你离真相只有一步,
给元素加上$()吧,好了,问题解决了。
在jquery使用中很容易犯这个错误,一定要牢记。
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); } });
注意:
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使用中很容易犯这个错误,一定要牢记。
相关文章推荐
- 使用canvas来实现两张图片合成一张
- [H5-Compress-Image]利用canvas实现 javascript 图片压缩处理_基于requirejs模块化的代码实现
- H5 canvas实现客户端压缩图片上传
- H5使用canvas实现星星闪烁效果
- js移动端/H5同时选择多张图片上传并使用canvas压缩图片
- 如何使用OPENCV实现两张图片的混合(PS中的图层不透明度)
- 工作积累(一)——使用canvas实现前台图片base64转码
- 使用UIGraphics实现多张图片的合并
- H5上传图片并使用canvas制作海报
- 使用canvas实现图片压缩上传
- H5上传图片并使用canvas制作海报
- 使用TransitionDrawable实现两张图片的过渡效果
- PHP合并两张图片的实现
- JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
- Android进阶篇之RoundProgress(圆形进度条)使用两张图片叠加实现
- 使用PIL实现多张图片垂直合并
- php两张图片动态合成thinkphp实现二维码及文字水印合并拼接到背景图上
- java实现把两张图片合并
- JS使用H5实现图片预览
- 工作积累(一)——使用canvas实现前台图片base64转码