问题描述：

今天用uniapp写小程序二维码并保存到本地，网上的完全没有用，最后自己写了一个， 1.使用weapp.qrcode生成二维码，并使用uni.canvasToTempFilePath生成临时图片文件， 2.使用canvas绘制二维码， 3.使用uni.canvasToTempFilePath生成图片文件，然后uni.saveImageToPhotosAlbum保存到本地：

@Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget(); }

原因分析：

使用别的用不了，要不就是内容太大了，要不就是不好用

解决方案：

<template><section style="height: 100%"><view>//页面内容<view class="hb" ref="imageTest" id="imageTest"><view class="hb-title">链接二维码</view><view class="hb-qc"><text class="hb-yqm">邀请新人，赚积分</text><view id="qrCode"><canvas style="width: 200px; height: 200px;" canvas-id="myQrcode"></canvas></view></view><view class="hb-basic"><h1>绘图信</h1><p>来着“立式”的分享</p></view></view><view class="close" @click="handleClose"></view>//按钮<u-buttonplain type="info"@click="setCanvas"style="  position: absolute;bottom: 5%;width: 80%;height: 50px;left: 50%;margin-left: -40%;border-radius: 45px;">保存图片</u-button><u-popup v-model="show" mode="center" ><canvas  id='canvas' class='canvas' canvas-id="firstCanvas"> </canvas></u-popup></view></section>
</template><script>//引用weapp.qrcode组件里面的weapp.qrcode.esm.js
import drawQrcode from "../../utils/weapp.qrcode.esm.js"
export default {data() {return {show:false,//标题粘贴顶部fixedTrue:Boolean(true),qrcodePath:'',//二维码地址}},
components:{},methods:{// handleClose () {//       console.log('关闭')//       this.$router.go(-1)//     },//        生成二维码        bindQRCode (shareUrl) {drawQrcode({width: 200,height: 200,canvasId: 'myQrcode',text: shareUrl,})this.saveQrcode()},//保存二维码临时地址saveQrcode(){var qrcodePath=''uni.canvasToTempFilePath({x: 0,y: 0,width: 0,height: 0,destWidth: 150,destHeight: 150,canvasId: 'myQrcode',fileType:'jpg',success: function(res) {// 在H5平台下，tempFilePath 为 base64console.log("canvasToTempFilePath",res)qrcodePath=res.tempFilePathreturn qrcodePath} })setTimeout(()=>{console.log("qrcodePath",qrcodePath)this.qrcodePath=qrcodePathconsole.log("this.qrcodePath",this.qrcodePath)},1000)},//绘制海报setCanvas(){console.log("qrcodePath",this.qrcodePath)// this.$refs.popup.open('center')this.show=truesetTimeout(()=>{this.drawPoster()},1000)},drawPoster(){uni.showLoading({title:"加载中...",mask:true,})var ctx=uni.createCanvasContext('firstCanvas')//二维码地址var drawImageqrcodePath=this.qrcodePath//获取画布的宽度和高度uni.createSelectorQuery().select('#imageTest').boundingClientRect(function(rect){let canvasWidth = rect.width;let canvasHeight = rect.height;// 清除画布ctx.clearRect(0, 0, canvasWidth, canvasHeight)// 绘制背景ctx.beginPath()const grd = ctx.createLinearGradient(canvasWidth, 0,canvasWidth , canvasHeight)grd.addColorStop(0, '#4091FF')grd.addColorStop(1, '#57AEFF')ctx.rect(0, 0, canvasWidth, canvasHeight);ctx.setFillStyle("#57AEFF");ctx.stroke();ctx.fill();//绘制链接椭圆框ctx.beginPath()ctx.setLineDash([400, 400], 5);ctx.setLineWidth(1)ctx.moveTo(40, 30)ctx.lineTo(260, 30)ctx.moveTo(40, 70)ctx.lineTo(260, 70)ctx.moveTo(40, 30)ctx.setFillStyle('#57AEFF');ctx.quadraticCurveTo(15, 50, 40, 70)ctx.setStrokeStyle('#FFFFFF')ctx.moveTo(260, 30)ctx.quadraticCurveTo(280, 50, 260, 70)ctx.setStrokeStyle('#FFFFFF')ctx.stroke()ctx.fill();//绘制文字ctx.beginPath()ctx.setFillStyle('#FFFFFF');ctx.setTextAlign('center')ctx.setFontSize(15)ctx.fillText('链接二维码', 150, 55)ctx.fill();//二维码背景色ctx.beginPath()ctx.fillRect(30, 120, 240, 350)ctx.setFillStyle('#FFFFFF')ctx.fill();//邀请新人，赚积分ctx.beginPath()ctx.setFillStyle('#000000');ctx.setTextAlign('center')ctx.setFontSize(20)ctx.font='i bold 20px  sans-serif'ctx.fillText('邀请新人，赚积分', 150, 160)console.log("drawImageqrcodePath",drawImageqrcodePath)ctx.drawImage(drawImageqrcodePath ,80,200);ctx.fill();//绘制虚线ctx.beginPath()ctx.setStrokeStyle('#999999')ctx.setLineDash([10, 15], 20);ctx.moveTo(30,400);ctx.lineTo(265, 400);ctx.stroke();ctx.fill();//绘制绘图ctx.beginPath()ctx.setFillStyle('#41485D');ctx.setFontSize(20)ctx.font='i bold 20px  sans-serif'ctx.fillText('绘图', 80, 450)ctx.fill();//绘制绘图ctx.beginPath()ctx.setFillStyle('#858B9C');ctx.setFontSize(10)ctx.fillText('来着“李四”的分享',210, 450)ctx.fill();//绘制结束ctx.draw(false,()=>{setTimeout(()=>{uni.hideLoading()},1000)//保存绘图图片，产生临时文件uni.canvasToTempFilePath({canvasId:'firstCanvas',quality:1,complete(reset) {//保存图片uni.saveImageToPhotosAlbum({filePath:reset.tempFilePath,success(resSave) {setTimeout((resSave)=>{uni.showToast({title:'保存成功',icon:'success'})},2000)    },fail(err) {console.log("err",err)//是否授权相册if(err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {uni.showModal({title:'提示',content:'未授权相册，请重新授权！',showCancel:false,success:modalSuccess => {//获取权限uni.openSetting({success(settingdata) {if (settingdata.authSetting['scope.writePhotosAlbum']) {console.log('获取权限成功，给出再次点击图片保存到相册的提示。')}else {console.log('获取权限失败，给出不给权限就无法正常使用的提示')}}})}})}}})}})})}).exec();setTimeout(()=>{//关闭弹出框// this.$refs.popup.close()this.show=false},3000)},},
onShow(){uni.showLoading({title:'加载中...'})console.log(this.$route)// const shareUrl=this.$route.paramsconst shareUrl="https://www.baidu.com/"this.shareUrl=shareUrlconsole.log(shareUrl)setTimeout(() => {  this.bindQRCode(shareUrl); }, 500)setTimeout(() => {  uni.hideLoading(); }, 1000)},}
</script><style>#canvas{width: 300px;height: 600px;}.hb{width: 100%;height: 100vh;background-image: linear-gradient(#57AEFF, #4091FF);background-size: 100%;}.hb-title{margin: auto 10% auto;height: 40px;line-height: 40px;width: 80%;border:1px solid #fff;border-radius: 45px;text-align: center;font-size:14px;color: #fff;position: relative;top:40px;}.hb-qc{width: 80%;height: 50%;margin: 90px auto auto;border-radius: 20px 20px 0 0;text-align: center;background: #fff;border-bottom: 3px #C6C6C6 dashed;}#qrCode{width: 200px;height: 200px;margin:  0 auto;}.hb-yqm{padding: 10px 20px;text-align: left;font-size: 14px;color: #111A34;display: flex;justify-content: center;height: 24px;font-weight: 700;font-size: 20px;padding: 34px;}.hb-basic{height: 68px;line-height: 68px;background: #fff;width: 80%;margin: 0 auto;border-radius: 0 0 20px 20px;display: flex;justify-content: space-around;color: #41485D;align-content: center;}.hb-basic h1{font-size: 18px;font-weight: 700;}.codeImg{display: flex;justify-content: center;margin-top: 20px;}.hb-desc{width: 100%;height: auto;}.cv-img{width: 100%;height:60Vh;}.close{position: absolute;top: 40px;left: 40px;width: 40px;height: 40px;}
</style>

uniapp小程序绘制二维码生成图片截图保存到本地相关推荐

微信小程序绘制二维码
一.前言在日常的小程序项目中,会经常遇到需要动态绘制二维码的需求.使用场景很多,例如绘制在海报上,例如制作票务码.核销码等等. 这篇文章是应一位好友的需求而写的,也希望能够给有需要的同学一些帮助. ...
微信小程序绘制二维码（附微信小程序开发学习手册）
一.前言在日常的小程序项目中,会经常遇到需要动态绘制二维码的需求.使用场景很多,例如绘制在海报上,例如制作票务码.核销码等等. 这篇文章是应一位好友的需求而写的,也希望能够给有需要的同学一些帮助. ...
uniapp小程序扫二维码登录uniapp h5
uniapp扫码登录功能一.测试环境:uniapp小程序 uniapp h5 二.实现思路三.实现步骤一.测试环境:uniapp小程序 uniapp h5 二.实现思路 1.手机登录uniapp ...
5分钟实现微信小程序绘制二维码
一.话不多,直接先看效果:
小程序海报二维码生成插件
分享一个小程序海报二维码插件建议使用方式: 测试环境先改造封装成自己需要的类文件,再引入框架使用,生成图片参考截图金装下载地址海报生成源码下载
【微信小程序】二维码跳转规则的前缀匹配是什么意思？
前言基础库 2.12.0 开发者工具 1.03.2008270 微信小程序的二维码跳转规则为了方便小程序开发者更便捷地推广小程序,兼容线下已有的二维码,微信公众平台开放扫描普通链接二维码跳转小程序 ...
微信小程序获取二维码中URL中带的参数
解析微信小程序获取二维码中的url参数 onLoad: function (options) { console.log(options) let qrUrl = decodeURIComponent ...
小程序推广二维码生成
小程序推广二维码生成 <?php$appid = '***************';$secret ='********************************';$url = &qu ...
最新在线客服系统php代码微信软件公众号小程序app二维码聊天网站源码
最新在线客服系统php代码微信软件公众号小程序app二维码聊天网站源码管理界面独家长期更新日志(欢迎反馈BUG) 1.添加手机端前后台声音提示 2.添加后台客户管理显示在线离线 3.添加清空当前对 ...

uniapp小程序绘制二维码生成图片截图保存到本地

问题描述：

原因分析：

解决方案：

uniapp小程序绘制二维码生成图片截图保存到本地相关推荐

最新文章

热门文章