龙空技术网

uniapp经验-总结2

黎明吧521 206

前言:

当前你们对“uniapp html2canvasjs”大概比较着重,大家都想要剖析一些“uniapp html2canvasjs”的相关文章。那么小编同时在网摘上收集了一些关于“uniapp html2canvasjs””的相关文章,希望咱们能喜欢,同学们一起来了解一下吧!

字图标,每个页面公共css

@import "./static/font/iconfont.css";@font-face {  font-family: 'iconfont';  /* project id 1565115 */  src: url(';);  src: url(';) format('embedded-opentype'),  url(';) format('woff2'),  url(';) format('woff'),  url(';) format('truetype'),  url(';) format('svg');}.iconfont {  font-family: "iconfont";  font-size: 16px;  font-style: normal;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}.iconliwu:before {  content: "\e65a";}
本地图片转Base64
             urlTobase64(path){			    // #ifdef APP-PLUS			    return new Promise((reverse, reject) => {			     plus.io.resolveLocalFileSystemURL(path, function(entry){			      entry.file(function(file){			       var reader = new plus.io.FileReader();			       reader.onloadend = function (e) {			        reverse(e.target.result);			       };			       reader.readAsDataURL(file);			      },function(err){			       reject(err)			      })			     })			    })			    // #endif			    // #ifdef H5			       return new Promise((reverse, reject) => {			        var image = new Image();			        image.src = path;			        image.onload = function() {			         var canvas = document.createElement("canvas");			         canvas.width = image.width;			         canvas.height = image.height;			         var ctx = canvas.getContext("2d");			         ctx.drawImage(image, 0, 0, image.width, image.height);			         var ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase();			         var dataURL = canvas.toDataURL("image/" + ext);			         reverse(dataURL);			        }			       })			       // #endif            }
提取二维码链接
    <template>	<view class="content">		<image class="logo" src="/static/logo.png" @click="selectImg"></image>	</view></template><script>	export default {		methods: {			// 选择图片			selectImg() {				uni.chooseImage({					count: 1,					success: (res) => {						const path = res.tempFilePaths[0];						plus.barcode.scan(path, function(type,result) {							console.log("扫描成功:("+type+")"+result);														// 判断是否为微信名片							if((result || '').indexOf(';) != 0) {								this.msg('请上传微信名片二维码'); 								return;							}														// 上传图片							this.upImg({								path: path,							}).then(res => {								this.info.wxewm = res.data;								this.msg('上传成功!'); 							}).catch(err => {								this.msg('上传二维码失败!'); 							})																				// 扫描失败(未识别到二维码)						}, function(e){							console.log("扫描失败: "+JSON.stringify(e));						});					}				})			},					}	}</script>
上传多张图片
    chooseImage() {    var _this = this    // 上传图片    uni.chooseImage({     count: 6, //默认9     // sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有     sourceType: ['album', 'camera'], //从相册选择     success: (res) => {      uni.showLoading({       title: '加载中...',       mask:true      })      let igmFile = res.tempFilePaths;      // _this.imageList = igmFile      this.imageList = this.imageList.concat(igmFile);      let tempFilePaths = igmFile.map((value, index) => {       return {        name: "img" + index,        uri: value       }      })      uni.uploadFile({       url: _this.http + 'wode/img',       method: "POST",       header: {        'Token': _this.$http.getToken()       },       files: tempFilePaths,       name: 'mutipartRequest',       success: (res) => {        let imgUrls = JSON.parse(res.data); //微信和头条支持        if(imgUrls.code == 0){         uni.hideLoading()         console.log(JSON.parse(res.data).data.path)         this.sahngchuanimg = this.sahngchuanimg.concat(imgUrls.data.path); //微信                }else{         _this.$http.msg(videoUrls.msg)         uni.hideLoading()        }       }      })     },    });   },
识别二维码
            // #ifdef H5	        import QrCode from 'qrcode-decoder'	    // #endif         selectImg() {				uni.chooseImage({					count: 1,					success: (res) => {												uni.showLoading({							title: '二维码识别中...'						});						const path = res.tempFilePaths[0];						// 判断是否为微信名片						// #ifdef APP-PLUS						plus.barcode.scan(path, function(type, result) {							//扫描成功							if ((result || '').indexOf(';) != 0) {								that.$_tishi('请上传微信名片二维码');								return;							}							that.shangchuanImg(path)//上传图片方法						}, function(e) {							// 扫描失败(未识别到二维码)							that.$_tishi("扫描失败")						});						// #endif						// #ifdef H5						let qr = new QrCode();						qr.decodeFromImage(path).then(res => {							if ((res.data || '').indexOf(';) != 0) {								that.$_tishi('请上传微信名片二维码');								return;							}							that.shangchuanImg(path)//上传图片方法						});						// #endif												}				})	}
html2canvas网页变海报
                <view class="canvas" v-if="!imgsrc" ref="box">		<image class="canvas" src="/static/my/yaoqing/bg.png" mode="scaleToFill"></image>		</view>		<img v-if="imgsrc" @click="baocunimg" class="bg" :src="imgsrc"  crossOrigin="Anonymous"></image>			                                                import html2canvas from 'html2canvas'	                        // 将html转换为图片				setTimeout(() =>{					  html2canvas(this.$refs.box.$el, {					  	scale: 2,					  	dpi: window.devicePixelRatio * 2,					  	useCORS: true					  }).then(canvas => {					  	this.imgsrc = canvas.toDataURL()					  });				},1000);
APP协议同意弹框
    /* 5+App特有相关 */   "privacy" : {            "prompt" : "template",            "template" : {                //prompt取值为template时有效,用于配置模板提示框上显示的内容                "title" : "协议政策",                "message" : "  欢迎使用万游赚,在您使用时,需要连接数据网络或者WIFI,产生的流量请咨询当地运营商。我们非常重视您的隐私保护和个人信息保护。在使用                        App服务前,请认真阅读用户<a  href=';>《服务协议》</a>及<a href=';>《隐私政策》</a>,全部条款。你同意并接受全部条款后开始使用我们的服务<br/>",                "buttonAccept" : "同意并继续", //继续下一步,进入首页                "buttonRefuse" : "不同意" //退出下载            }     }

标签: #uniapp html2canvasjs