html转canvas，canvas的base64字符串上传到七牛云

的实现方法最近做了一个海报生成功能。用户上传图片后，自动生成一张海报。由于海报样式很复杂，用canvas绘制效率太低，所以想用html+css排版，然后把dom转成canvas，于是找了个插件html2canvas，这个插件有帮助我们把html转成canvas，不用我们花时间去画，所以生成的canvas可以转成base64上传到七牛。html2canvas安装//安装NPMnpminstall--savehtml2canvas//安装Yarnyarnaddhtml2canvashtml2canvasuse我们先把html写出来，给要转换的dom父元素一个id=htmlContent然后写一个html2canvas方法并添加配置，返回在.then中是生成的画布。注意这里html2canvas使用了Promise语法，更多的配置项可以自行查找。获取canvas后，需要转成base64上传到七牛，所以这里使用canvas的toDataURL方法获取base64字符串。注意这里得到的是';base64,'+字符串，所以需要对字符串进行拆分当指定图像格式为`image/jpeg或``image/webp时可选，您可以从0到1中选择图像的质量。如果超出取值范围，则使用默认值`0.92`。其他参数被忽略。ios13.4.1中的失败问题在测试中遇到了html2canvas的坑，部分手机在ios13.4.1版本中失败，去github查看，发现html2canvas@1.0.0-rc.5有问题版本包，并回滚html2canvas版本为1.0.0-rc.4，就好了。githubissue注意html2canvas不支持css伪类上传。七牛云获取base64，需要上传到七牛云。七牛文档提供了这个接口。以下内容由七牛提供。demo，注意AuthorizationUpToken的值得到的token，UpToken和tokenfunctionputb64(){varpic="fillinyourbase64string";之间有一个空格varurl="http://upload.qiniup.com/putb64/20264";//非华东空间需要根据注1修改上传域名varxhr=newXMLHttpRequest();xhr.onreadystatechange=function(){if(xhr.readyState==4){document.getElementById("myDiv").innerHTML=xhr.responseText;}}xhr.open("POST",url,true);xhr.setRequestHeader("Content-Type","application/octet-stream");xhr.setRequestHeader("Authorization","UpToken填写你从服务器获取的上传令牌");xhr.send(pic);}我在项目中使用了axios，所以我也贴出axios的使用方法，上传前请求后台接口获取token，所以这里使用async/await，然后设置headers，以及res.key'https://xxx.com/'+res.key是拼接七牛域名后的图片地址。asyncputb64(){awaitthis.getToken()letthat=thisletpic=this.dataURLleturl=this.up_host+'/putb64/-1'http.post(url,pic,{headers:{'Content-Type':'application/octet-stream','Authorization':'UpToken'+this.token}}).then(res=>{that.screenImgUrl='https://xxx.com/'+res.key+'?imageView2/0/w/1280/h/720'that.$emit('handleGetUrl',this.screenImgUrl)})},getToken(){letparams={bucket:'bucket',file_name:'test/'+newDate().getTime()+'.png'}returnnewPromise((resolve,reject)=>{http.get('/qn/sign/v3',{params:params}).then(res=>{this.token=res.tokenthis.up_host=res.up_hostresolve()})})}由于wx.chooseImage是微信h5，上传图片使用微信的jssdk---wx.chooseImagewx。chooseImage({count:1,//默认9sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认都有sourceType:['album','camera'],//可以指定来源是相册还是相机，默认都是有成功：function(res){varlocalIds=res.localIds;//返回选中照片的本地ID列表，localId可以作为img标签的src属性显示图片}});注意：res.localIds是一个数组，数组的长度等于你指定的count的值，即当count为1时，你需要使用res.localIds[0]localId来显示图片作为img标签的src属性如果想获取src，那么上传的图片只用localId显示就可以了，但是这里有一个坑，因为有些安卓手机在生成的时候报Errorloadingimageweixin://resourceid/xxx帆布。这个兼容性问题需要通过getLocalImgData找到localID图片并转成base64来解决。wx.getLocalImgData({localId:localId,success:function(res){varlocalData=res.localDataif(localData.indexOf('data:image')!==0){//判断是否有这个headerlocalData='data:image/jpeg;base64,'+localData}//第一次替换是换行符，第二次替换是图片类型，因为在IOS机器上测试的时候，图片类型是jgp，//我不知道图片是什么格式，为了兼容其他设备，转成jpeglocalData=localData.replace(/\r|\n/g,'').replace('data:image/jgp','data:image/jpeg')callback&&callback(localData)},fail:function(res){console.log(res)}})})完整代码