uniapp canvas踩雷文字模糊图片不显示 ios系统无法下载

uniapp小程序项目中使用canvas实现本地保存海报

1.问题一，使用canvas保存到本地的图片中文字模糊

解决：


<canvas :style="{width:windowW+ 'px',height:windowH + 'px' }" :width="windowW*pixelRatio":height="windowH*pixelRatio" canvasId="myCanv" id="myCanv"></canvas> JS部分：onLoad() {this.ctx = uni.createCanvasContext('myCanv', this)let that = thisuni.getSystemInfo({success: function(res) {that.windowW = res.windowWidththat.pixelRatio = res.pixelRatio  //获取设备像素比that.rpx = that.windowW / 375   // 375为ui设计图宽度that.windowH = 601 * that.rpx   //601为自定义需要的高度}})},cans() {// 绘制画布大小，填充颜色this.ctx.setFillStyle("#ffffff")this.ctx.fillRect(0, 0, this.windowW * this.pixelRatio, this.windowH * this.pixelRatio)this.ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0)   //将画布内容在水平与垂直方向放大与像素比相同的倍数}

canvas 标签属性 width和weight与设备像素比相乘后，画布内容是缩小的，所以需要setTransform再次放大，

2. 问题2，图片在真机上不显示

我在页面上使用的图片均为上传到服务器上的图片，查找解决方法发现canvas绘制网络图片会造成真机无法显示的问题

解决：

getImge(path) {//利用promise异步转同步return new Promise((resolve, reject) => {uni.getImageInfo({src: path,success: function(res) {resolve(res)},fail: function(res) {reject(res)}})})},async cans() {// 绘制画布大小，填充颜色this.ctx.setFillStyle("#ffffff")this.ctx.fillRect(0, 0, this.windowW * this.pixelRatio, this.windowH * this.pixelRatio)this.ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0)let backImg = this.imgUrlPrefix + 'biankuang.png' //大边框let that = thisawait this.getImge(backImg).then(res => {this.ctx.drawImage(res.path, 15 * that.rpx, 15 * that.rpx, 345 * that.rpx, 571 * that.rpx)})}

利用uniapp的Api, uni.getImageInfo 可以得到图片信息，获取图片路径，但该API为异步操作，若不转为同步操作，会将图片绘制在draw()方法后，这样也不能使图片绘制在页面上，所以利用promise将其转为同步操作。

3.问题3，ios系统无法下载

解决：将保存图片的方法写在canvas的draw方法中

drawImg() {this.ctx.draw(uni.canvasToTempFilePath({canvasId: 'myCanv',success: function(res) {uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,complete(res) {if (res.errMsg == "saveImageToPhotosAlbum:ok") {uni.showToast({content: '图片已保存到相册',})} else {uni.showToast({content: res.errMsg,})}}})},}))},

遗憾与弊端：

由于需要绘制多张图片，导致需要多次调用drawImage方法，再加上需要判断文字换行等操作，造成内容绘制时间过长。

canvas用在小程序上问题过多，且优化不易（因为有些功能处理不得不使用某种方法），canvas官方提供的优化方法之一离屏canvas在uniapp中仅支持微信小程序，不支持支付宝，所以选择直接放弃前端来开发该功能

uniapp canvas踩雷文字模糊图片不显示 ios系统无法下载相关推荐

HTML让文字在图片上显示的几种方法
HTML让文字在图片上显示的几种方法第一种方式是image 作为背景图片,即:background:url("......."); 例如如下代码块: <div style= ...
服务器接收ios图片无法显示,IOS下图片不能显示问题的解决办法
最近在写H5的时候遇到这么一个问题,就是在页面上使用img标签放一张图片在IOS系统下的浏览器都不显示(其实是存在这张图片了,只是是一块白的,长按还可以下载图片)(纠正一下:就简单放一张图片上去,IO ...
uni-app真机预览调试：关于ios系统真机调试的操作步骤
介绍: 因手机差异较大,HBuilder并没有提供App的模拟器.不管uni-app或5+App/wap2app项目,都需要连接真实的手机或手机模拟器来运行测试,称之为"真机运行" ...
高清屏下canvas绘制文字模糊
在浏览器的 window 对象中有一个 devicePixelRatio的属性,该属性表示了屏幕的设备像素比,即用几个(通常是2个)像素点宽度来渲染1个像素. 举例来说,假设devicePixelRa ...
android开发之 Canvas绘制文字，图片
一.Canvas的常用操作速查表操作类型相关API 备注绘制颜色 drawColor, drawRGB, drawARGB 使用单一颜色填充整个画布绘制基本形状 drawPoint, draw ...
uni-app中，文字超出隐藏并显示省略号（实现展开、收起全文）
一.uni-app中,固定宽高,文字超出部分,隐藏并显示省略号. .topic_cont_text{padding: 30upx;colof: #999;background: #E1FFFF;max ...
uni-app在手机上打开背景图片不显示
uniapp项目在浏览器上打开背景图显示正常, 但在手机上打开时背景图没显示 , 解决办法: 把图片弄成动态的变量引入 <view :style="{backgroundImage:` ...
文字根据图片环绕 + 显示文字两行后省略号
首先看布局: "拼团价" 这里是图片,标题文字要环绕,第二行文字要在图片的下面 1.正常的做法是:设置图片float,这样就可以实现: .info-content_title{cl ...
html 文字在图片上显示
第一种方式是image 作为背景图片,即:background:url("......."); 例如如下代码块: <div style="background:ur ...

uniapp canvas踩雷文字模糊图片不显示 ios系统无法下载

uniapp canvas踩雷文字模糊图片不显示 ios系统无法下载相关推荐

最新文章

热门文章

uniapp canvas踩雷 文字模糊 图片不显示 ios系统无法下载

uniapp canvas踩雷 文字模糊 图片不显示 ios系统无法下载相关推荐

最新文章

热门文章

uniapp canvas踩雷文字模糊图片不显示 ios系统无法下载

uniapp canvas踩雷文字模糊图片不显示 ios系统无法下载相关推荐