html拼凑成一张图片,（代码片段）利用canvas，把多张图合并成一张图片

需求分析，根据当前网页中的几张图片，在手机上长按，保存图片到相册或者发送给好友。

drawCanvas(){

var self = this;

var imgsrcArray = [

require('@/page/agent/agentexpand/img/bg.jpg'),

'data:image/jpeg;base64,'+this.codeUrl

];

var canvas = document.createElement('canvas');

var ctx = canvas.getContext('2d');

canvas.width = 750;

canvas.height = 1333;

var imglen = imgsrcArray.length;

var drawimg = (function f(n){

if(n < imglen){

var img = new Image();

img.crossOrigin = 'Anonymous'; //解决跨域问题

img.onload = function(){

//ctx.save();

if(n == 0){

ctx.drawImage(img,0,0,750,1333);

}else{

ctx.drawImage(img,466,574,210,210);

}

f(n+1);

}

img.src = imgsrcArray[n];

}else{

self.downloadUrl = canvas.toDataURL("image/jpeg");

self.downloadUrl = self.downloadUrl.replace("data:image/jpeg;base64,", "");

}

})(0);

}

调用方式：

注：上面的调用是使用的vue语法。

可参考地址：

html拼凑成一张图片,（代码片段）利用canvas，把多张图合并成一张图片相关推荐

vue 签署文件两张图合并成一张图 h5页面转换成图片并长按保存在本地
在做让用户在页面签名并把当前页面保存为图片,附上完整代码 (直接复制代码,更改接口地址或删除接口逻辑可直接复用) **准备工作:安装 npm install vue-esign --save 全局 ...
unity编辑器拓展十一——将两张RGB图合并成一张
游戏角色shader,包含的东西比较多,还要做到动态合并,程序那边希望贴图经可能少,而我们美术用了两张图,一张图的RGB是高光.流光.自发光,另外一张图的RGB是不同区域的偏色,其实每个通道的一整张贴 ...
小程序利用canvas实现波浪动态图，原生canvas的部分限制
小程序利用canvas实现波浪动态图小程序的canvas与该动态图的问题首先上效果图片下面直接上代码小程序的canvas与该动态图的问题小程序的canvas与html的canvas实现是完全 ...
微信小程序利用canvas实现六边形蜘蛛图
微信小程序利用canvas实现六边形蜘蛛图发布时间:2018-01-24 14:30:29 1..wxml <canvas style="width: 200px; height: ...
python利用pandas合并excel表格代码_利用Python pandas对Excel进行合并的方法示例
前言在网上找了很多Python处理Excel的方法和代码,都不是很尽人意,所以自己综合网上各位大佬的方法,自己进行了优化,具体的代码如下. 博主也是新手一枚,代码肯定有很多需要优化的地方,欢迎各位大 ...
python多图合并成一张图_python使用PIL实现多张图片垂直合并
本文实例为大家分享了python实现多张图片垂直合并的具体代码,供大家参考,具体内容如下 # coding: utf-8 # image_merge.py # 图片垂直合并 # http://www. ...
canvas 在其他画好的上面继续画_详解canvas绘制多张图的排列顺序问题
您好,请教您一个html5 canvas的问题: 我在canvas您好,请教一个html5 canvas的问题: 我在canvas中画了多个图形,有图像canvas可以实现首先canvas要响应鼠标 ...
excel如何把多张表合并成一个表_如何将多个excel文件合并成一个文件-多个excel文件合并成一个excel表的方法 - 河东软件园...
Excel是我们最常用的数据处理软件,而在我们使用Excel时,常常会处理同一类的数据,例如,我们制作月度报表,那么在年末时我们共积累了1至12月的月度报表,这时我们的Excel的文档将多达12个,实 ...
sqlserver 把两个sql查询语句查询出来的两张表合并成一张表
第一个sql语句 select companyname gsmc,zb zhibiao from t_gsndzb left join t_companycode on t_gsndzb.gsbh=t ...
excel如何把多张表合并成一个表_如何将多个excel表格合并成一个_excel多表合并到一种表格的方法...
Excel是我们日常办公经常要用到的工具,有时候我们会制作非常多的Excel表格,为了方便管理,我们需要将这些表格合并到一起,那么如何将多个excel表格合并成一个呢?相信很多朋友都不太清楚,那么今天 ...

html拼凑成一张图片,（代码片段）利用canvas，把多张图合并成一张图片

html拼凑成一张图片,（代码片段）利用canvas，把多张图合并成一张图片相关推荐

最新文章

热门文章