在Vue中用canvas实现二维码和图片合成海报的方法 表达我所有感受

在Vue中用canvas实现二维码和图片合成海报的方法 表达我所有感受

methods:{combinedPoster(_url){letthat=this,qrcode=;//二维码地址("opendraw:",_url,qrcode)letbase64=,canvas=(canvas),ctx=("2d"),_w=*2,//图片宽度:由于手机屏幕时retina屏,都会多倍渲染,在此只设置2倍,如果直接设置等于手机屏幕,会导致生成的图片分辨率不够而模糊_h=*_w,//图片高度_qr_w=*_w,//二维码宽=比例*宽度_qr_h=*_h,//二维码高=比例*高度_qr_t=*_w,//二维码顶部距离=比例*宽度_qr_l=*_w;//二维码左侧距离=比例*宽度//设置canvas宽高=_w;=_h;(0,0,_w,_h);=#fff;//填充颜色();//迭代生成:第一层(底图)+第二层(二维码)//file:文件,size:[顶部距离,左侧距离,宽度,高度]let_list=[{file:_url,size:[0,0,_w,_h]},{file:qrcode,size:[_qr_l,_qr_t,_qr_w,_qr_h]}];//开始绘画letdrawing=(_index)={//判断当前索引=》是否已绘制完毕if(_index_){//等图片预加载后画图letimg=newImage(),timeStamp=newDate().getTime();//防止跨域(crossOrigin,anonymous)//链接加上时间戳=_list[_index].file++=function(){//画图(img,..._list[_index].size)//递归_listdrawing(_index+1)}}else{//生成图片base64=("image/png")if(base64){//赋值相应海报上this.$set(that,poster,base64)}}}drawing(0)}};mounted(){//需要合成海报的图片()}4.下载点击下载合成图片methods:{handleDownload(){if(){leta=("a");("download","海报下载-"+(newDate().getTime()));=()}else{("海报不存在,请重新生成!")}}}tips:不适用于微信浏览器,只能提示用户长按保存。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。 您可能感兴趣的文章:。