小程序 canvas画图片

小程序 canvas 新版（2.9.0之后）和旧版画图步骤这边记录一下希望大家少踩坑

旧版

需要canvas-id

<canvas :style="`width: ${cWidth}px; height: ${cHeight}px;position:fixed;left:-10000px;`" canvas-id="myCanvas" />

需要draw

// 创建指定id的canvas实例
var ctx = wx.createCanvasContext('myCanvas')
// 第一个参数是图片路径
ctx.drawImage(imgPath, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
ctx.draw(false, ()=>{// 图片画出来之后的其他操作 可以通过wx.canvasToTempFilePath做后续操作// 一定要在回调里 如果不生效可以尝试用setTimeout包裹回调函数
})// 贴两个可能用到的方法
// 一、获取移动设备的宽 可以作为画布的宽
wx.getSystemInfo({success: (result) => {console.log('设备', result)},fail: () => {},complete: () => {}
})
// 二、获取网络图片或者本地图片的宽高及临时路径
wx.getImageInfo({src: this.imgUrl,success: (res) => {console.log('图片', res)}
})

新版(2d)

需要设置type和id

<canvas id="myCanvas" type="2d" :style="`width: ${cWidth}px; height: ${cHeight}px;position:fixed;left:-1000px;`" />

创建方法变了 draw方法也没有了 ctx.drawImage第一个参数是需要通过canvas.createImage()创建出来的对象

const query = wx.createSelectorQuery()
query.select('#myCanvas').fields({ node: true, size: true }).exec((res) => {const canvas = res[0].nodethis.canvas = canvas // 保存canvas实例 可能会用到const ctx = canvas.getContext('2d')// dpr好像是防止图片模糊之类的const dpr = wx.getSystemInfoSync().pixelRatiocanvas.width = res[0].width * dprcanvas.height = res[0].height * dprctx.scale(dpr, dpr)// 描绘图片 顺序不能换// 1.创建图片 canvas.createImage (不能通过new Image())const img = canvas.createImage()// 2.图片加载完毕之后再画出来img.onload = () => {// 新的方法第一个参数需要是DOM元素ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)// 不需要再调用draw方法wx.canvasToTempFilePath({canvas: this.canvas, // 需要传canvas实例success: (result) => {console.log('新的图片', result)}})}// 3.赋值src要在onload后面img.src = ''
})

小程序 canvas画图片相关推荐

【微信小程序canvas】实现小程序手写板用户签名(附代码)
[微信小程序canvas]实现小程序手写板用户签名(附代码) 工作中公司业务需要的微信小程序用户签字功能先看效果图: wxml <view class="wrapper"& ...
微信小程序-canvas绘制文字实现自动换行
微信小程序-canvas绘制文字实现自动换行在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为我们只能设置文本的最大宽度,这就产生 ...
小程序canvas绘制商品海报实现分享朋友圈
小程序canvas绘制商品海报实现分享朋友圈效果图: 实现步骤就是点击生成图片在canvas画布中画出一张海报然后保存在本地在imags标签中展示,此处尽可能的把canvas组件隐藏但是不能 ...
小程序Canvas原有接口不再维护
画布.2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),同时支持同层渲染,原有接口不再维护.  <canvas t ...
uni保存canvas图片_小程序canvas【开箱即用】
前言小程序canvas有多坑,相信开发过的同学们都深有体会每一次写使用canvas都忍不住骂两句鉴于此,小弟就从0开始,一步一步实现画图功能,并且列明所有我遇到的坑注意:本文都是基于uni开发 ...
小程序Canvas绘制图片太大，自动闪退，安卓会有crash问题
2019独角兽企业重金招聘Python工程师标准>>> 问题说明: 目前小程序Canvas版本还有不少bug,性能较低. 对于图片太大使用ctx.drawImage(imgpath, ...
微信小程序 canvas type = 2d 绘制海报心得（包括怎么绘制图片和圆角图片和圆角矩形等）
微信小程序 canvas type=2d 使用心得为了方便这里我封装成了一个component 然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas ...
微信小程序canvas画布新接口type为2D时drawImage方法的使用以及注意事项
微信小程序canvas画布自2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),但文档不全,从原canvas的api转变到新的api时遇到不少问题,现将新版与旧版的画布载入图 ...
微信小程序详解 php,微信小程序canvas基础详解
canvas 元素用于在网页上绘制图形.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像.本文主要和大家分享微信小程序canvas基础详解,希望能帮助到大家. 一.了 ...

小程序 canvas画图片

旧版

新版(2d)

小程序 canvas画图片相关推荐

最新文章

热门文章