需求分析,根据当前网页中的几张图片,在手机上长按,保存图片到相册或者发送给好友。
drawCanvas(){ var self = this; var imgsrcArray = [ require('@/page/agent/agentexpand/img/bg.jpg'),'data:image/jpeg;base64,'+.codeUrl ]; var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); canvas.width = 750; canvas.height = 1333var imglen = imgsrcArray.length; var drawimg = (function f(n){ if(n < imglen){ var img = new Image(); img.crossOrigin = 'Anonymous'; //解决跨域问题 img.onload = (){ ctx.save(); if(n == 0){ ctx.drawImage(img,0,750,1333); }else{ ctx.drawImage(img,466,574,210,210); } f(n+1); } img.src = imgsrcArray[n]; }{ self.downloadUrl = canvas.toDataURL("image/jpeg"); self.downloadUrl = self.downloadUrl.replace("data:image/jpeg;base64,",""); } })(0); }
调用方式:
<img :src="'data:image/jpeg;base64,' + downloadUrl"/>
注:上面的调用是使用的vue语法。
可参考地址:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。