小程序--------------处理canvas导出图片模糊问题-------------劉(代码片段)

关键词：

一、业务需求：

　　　　使用canvas在前端生成海报，并在海报上添加上水印。最后导出图片并保存到本地。

二、业务逻辑实现：

　　（1）创建canvas画布======》（2）在canvas上绘制海报========》（3）绘制水印===========》（4）绘制完成，导出图片路径=========》（5）保存到本地，并可以分享，（长按保存图片）

三、代码实现：

(1)、创建画布并将图片和水印绘制到canvas上
const ctx = wx.createCanvasContext(‘myCanvas‘);
ctx.drawImage("https://img******.jpg", 0, 0, 300, 400);

ctx.draw();

　　网络图：

　　如果是用网络图，则在模拟器上正常显示。则在手机上无法显示创建。

　　因为canvas.drawImage 是不支持网络图片的，只支持本地图片。所以，任何网络图片都需要先缓存到本地，在通过 drawImage 调用储存的本地资源进行绘制，缓存通过 wx.getImageInfo实现。代码如下

通过success回调函数可以获取网络图片的宽高路径，和图片的格式png、jpg、svg。。。。。。

　还有一点需要注意的是 draw 方法是异步的，如果图片还没加载成功，有可能画出来的是空的，所以 draw 方法后的回调导出图片

通过wx.canvasToTempFilePath

ctx.draw(true, (res) => 

wx.canvasToTempFilePath(
  x: 0,
  y: 0,
  width: 50,
  height: 50,
  destWidth: 100,
  destHeight: 100,
  canvasId: ‘myCanvas‘,
  success(res) 
    console.log(res.tempFilePath)
  
)

 );

　　保存图片到本地

通过wx.saveImageToPhotosAlbum将图片保存到本地

wx.saveImageToPhotosAlbum(
                filePath: res.tempFilePath,
                success(res) 
                  console.log("保存成功")
                  _that.showSaveSuccess()
                ,
                fail() 
                  wx.showModal(
                    title: ‘保存到相册失败‘,
                    content: ‘请点击图片，长按图片保存‘,
                    showCancel: false
                  )
                
              )

图片模糊问题

　　然而，在导出图片时，那就是canvas生成的图片保存后很模糊。

　　（1）、使用两个canvas进行绘图，一个canvas用于绘图展示。用另一个canvas设置和图片大小一样。用于导出图片时的绘制。设置opacity为0.不能设置display：none。

　　　　问题：但实际上上这个方案有一点问题：其一，生成需要两个画布；其二，绘制过大画布在安卓上面会出现问题，官方文档里也提示了避免设置过大的宽高，在安卓下会有crash的问题。

　　（2）、使用scale缩放画布，设置canvas的画布于图片大小一样。则用scale缩放到需要展示的大小。则在导出时不会出现模糊问题。

　　　　问题：在模拟器上是没有问题的，但是在真机上调试是没有效果的。

　　（3）、本质上就是生成一个更大的图片，因为手机的屏幕设备的像素比现在一般都是超过2的。实际上我们只需要在使用wx.canvasToTempFilePath的时候，设置参数destWidth和destHeight(输出的宽度和高度)为width和height的2倍以上即可。

　　　　当然，这个具体数值也可以wx.getSystemInfo这个API来获取设备的像素比了（pixelRatio），这个像素比作为以上数值。

　　　　在onLode函数中通过wx.getSystemInfo获取像素比（pixelRatio）。则在导出图片时需要设置

　　　　destWidth：width * pixelRatio

　　　　destHeight：height * pixelRatio

小程序canvas层级太高的解决办法

参考技术A本文章记录了我在做小程序时使用canvas时，因层级太高无法显示弹框的问题。首先是在wxml页面的处理，我的宽高设置的是自适应宽高，只需改成自己的宽高即可，关键部分是加一个判断wx:if="!canvasImg"然后是js页... 查看详情

小程序canvas弧形进度条

...数，如rgba底色会覆盖逐渐变白，暂时十六进制。canvas小程序，如最外view存在fixed等定位，会飘，截取用替换的图片代替。起始位置为下图中的0.75-0.25，3/4圆270度。ps：阻止canvas随页面滚动(已解决，可不看）https://www.jianshu.com/p/c35... 查看详情

微信小程序canvas画图，保存页面为海报(代码片段)

思路暂时还没找的好的快速生成方案，只能通过代码一步一步画绘制内容分类：文本、长段文本、本地图片、echarts图表涉及功能：echarts临时图片路径获取、长段文字处理、canvas绘制、canvas临时图片路径获取、授权判... 查看详情

小程序canvas使用，及一些坑，以及自己的一些小总结

自己做了一个小程序，主要用于给头像加图标的那种，和qq似的，主要用canvas做的，第一回用，掉了很多坑，所以今天系统的总结一下自己所做的，如果大家有不理解的地方，欢迎提问canvas可以用来画一些东西，前台生成一些海... 查看详情

微信小程序canvas生成图片为空白问题

参考技术A项目中用canvas生成图片时都为空白，原因为wx.canvasToTempFilePath必须写在wx.draw()的回调中才能实现。官方wx.canvasToTempFilePath说明：https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html 查看详情

微信小程序使用canvas绘制圆角矩形在android：变形、锯齿

参考技术A在微信小程序使用canvas绘制圆角矩形时，在Android出现变形、锯齿现象，而iOS正常。根据小程序社区回复：使用ctx.arc+ctx.lineTo就能避免Android错误，Android只使用ctx.arcTo不兼容！！！解决方案： 查看详情

微信小程序-海报制作（canvas）(代码片段)

文档https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createOffscreenCanvas.html以下是按照1倍图画的，可以先画出来再调整合适的倍图以下宽度、文字间距等可以使用变量代替wxml<viewclass="canvas-container"><can 查看详情

小程序echarts

参考技术A一、引入ec-canvas文件https://github.com/ecomfe/echarts-for-weixin“ec-canvas”二、配置json"usingComponents":"ec-canvas":"../../ec-canvas/ec-canvas"三、书写结构<viewclass="containerlog-list"><ec-canvasid="mychart-dom... 查看详情

小程序用canvas实现一个简易的移动端名片可编辑小程序(代码片段)

...ff1a;保存的图片效果：这个很简单，主要用微信小程序的canvas实现，具体代码：card.wxml:&l 查看详情

小程序中的canvas覆盖了定位的元素怎么弄

在使用小程序canvas绘制的图覆盖了已定位的元素怎么让已定位的元素浮在canvas的上边参考技术ACanvas组件表示屏幕上一个空白矩形区域，应用程序可以在该区域内绘图，或者可以从该区域捕获用户的输入事件。应用程序必须为Canva... 查看详情

微信小程序canvas绘制多行文本（文本换行）

参考技术A有什么问题尽管留言~由于我平时主要使用wepy开发项目所以这些常用封装及项目架子都是使用的wepy覆盖了一些常用操作与封装、登录流程、保存图片至相册及相关授权流程 查看详情

微信小程序中使用ec-canvas制作环状饼图

参考技术A根据这个流程，就可以制作出自己需要的环状饼图了，如果大家需要其他的图，也可以根据这个流程去做。 查看详情

微信小程序wxml-to-canvas使用完整流程以及踩坑记录

第一次写文章记录自己的踩坑记录我们小程序的客户说商品生成的海报有点模糊，因为之前都是后台生成的，没有办法设置清晰度参数，所以需要换一种生成方式，之前也看过wxml-to-canvas，但是一直没机会好好研究用上，这次机... 查看详情

微信小程序canvas2d绘制圆环进度条组件

参考技术Ahttps://developers.weixin.qq.com/miniprogram/dev/component/canvas.htmlCanvas2D接口（type="2d"）,支持同层渲染的一个圆环进度条。（wx.createCanvasContext已废弃）https://gitee.com/susuhhhhhh/componentshttps://gitee.com/susuhhhhhh/wxmini_demo 查看详情

博学谷学习记录超强总结，用心分享|小程序canvas生成图片(代码片段)

...起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据，但不会实际调用对应接口。如果用户之前已经同意授权，则不会出现弹窗，直接返回成功。如果用户之前拒绝了授权，此接口会... 查看详情

小程序生成海报保存图片到相册小测试(代码片段)

test.wxml<canvasstyle="width:imageWidthpx;height:imageHeightpx;"canvas-id="myCanvas"class=‘canvas‘hidden=‘hideme‘></canvas><imagewx:if="tempPath!=‘‘"class="viewimg"src=" 查看详情

最近做的几个小程序

2018-8月，最近一直在做小程序，前前后后做了也有几个了，简单整理一下给自己看 仿抖音小程序，视频全屏幕显示，下拉和上滑可以切换视频，右下角的图标有点丑   头像、图片小工具，实现头像变圆、头像加字... 查看详情

微信小程序canvas生成的二维码text需要放啥参数

参考技术A最近的微信小程序项目中有这样一个需求，点击按钮生成保存店铺信息（小程序为交易平台系统）的二维码，可扫码进入店铺。各种百度之后发现此种方法方便易用，以此学习并记录下来，用的是原文作者改版后的生... 查看详情