微信小程序canvas.drawImage完全显示图片问题的解决-创新互联

问题描述

创新互联建站是一家专注于成都网站设计、网站制作与策划设计,广昌网站建设哪家好?创新互联建站做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:广昌等地区。广昌做网站价格咨询:028-86922220

问题产生

对于微信小程序，canvas处理过程中，dramImage默认图片引用是有残缺的

导入初始项目

打开链接（原官网例子），浏览器唤醒微信开发这工具，打开连接之前需要下载好微信开发者工具，如已安装则直接唤起，没有则会提示下载

目的

通过对canvas绘图过程的修改，或者其样式的修改，达到完全显示，并自适应不同机型的目的

解决方案

准备工作

 Page({
 data:{
  imgSrc: '', // 需要处理图片地址
  imgW: '', // canvas 宽度
  imgH: '', // canvas 高度
  byclear: 1 // 比例，这里将iphon6- 375像素设置为1标准，以便在自适应上的转换
 },
 onReady() {
 var that = this
 // 根据屏幕的宽度计算标准比例值。这里讲375作为标准值
 wx.getSystemInfo({
  success: function(res) {
  let byclear = res.screenWidth / 375
  that.setData({
   byclear
  })
  },
 })
 },
 openAndDraw() { // 选择图片
 var that = this
 wx.chooseImage({
  success: (res) => {
  that.setData({
   imgSrc: res.tempFilePaths[0],
   res
  })
  }
 })
 },
 checkwh(e) {
 // 处理逻辑
 }
 })

网站名称：微信小程序canvas.drawImage完全显示图片问题的解决-创新互联
网页URL：http://www.hxwzsj.com/article/dhjisc.html