HTML5利用canvas,把多张图合并成一张图片
2018-03-08 15:32
1396 查看
需求分析,根据当前网页中的几张图片,在手机上长按,保存图片到相册或者发送给好友。
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 ; }else{ self.downloadUrl = canvas.toDataURL("image/jpeg"); self.downloadUrl = self.downloadUrl.replace("data:image/jpeg;base64,", ""); } })(0); }
调用方式:
<img :src="'data:image/jpeg;base64,' + downloadUrl"/>
注:上面的调用是使用的vue语法。
可参考地址:
相关文章推荐
- [置顶] 利用canvas,把多张图合并成一张图片
- 利用HTML5 canvas合并图片并解决Filaed to execute 'toDataURL' on 'HTMLCanvasElement'异常
- 利用HTML5中的Canvas绘制一张笑脸的教程
- android 利用canvas将来两张图片进行重合成一张大小一样的图片
- 利用HTML5中Canvas处理并存储图片
- 利用HTML5 canvas旋转图片
- HTML5利用Canvas压缩图片
- HTML5 canvas 画网页验证码(验证码一般不可能是一张图片)
- 怎样将html5中利用canvas绘制的图像在服务端保存为图片?
- 利用HTML5中Canvas处理并存储图片
- 利用html5 canvas实现纯前端上传图片的裁剪
- html5使用canvas绘制一张图片
- 在触屏设备上面利用html5裁剪图片(转)
- js+html5绘制图片到canvas的方法
- 将HTML5 Canvas的内容保存为图片
- 【图片压缩】使用canvas,html5进行图片压缩
- Wadda:基于 HTML5 Canvas 的图片放大镜
- HTML5 canvas生成图片马赛克特效插件
- 使用HTML5 canvas做地图(3)图片加载平移放大缩小
- 将多张图片合并成一张,代码(可垂直和水平方向合并)