java drawimage图片不完整_微信小程序canvas.drawImage完全显示图片问题的解决
问题描述
问题产生
对于微信小程序,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 是无法获取图片的高度的,再者小程序里面没有 new Image()这个方法,只能通过标签组件image间接获取,所以我们需要在wxml中插入一个隐藏的标签image,隐藏方法我们设置display:none 或者hidden就可以了,注意不要wx:if, wx:if 不会触发bindload事件。
在方法checkwh里面即可获取到图片宽高
checkwh(e){
// 实际宽度 e.detail.width 高度 e.detail.height
let whsrc = e.detail.height / e.detail.width
// 计算高宽,需要处理图片宽度小于屏幕宽度的时候 对应的canvas比例
}
canvas.scale 方案
dramImage 绘图方法,我们可以通过对画布的放大缩小scale来完整绘制,继续在checkwh中进行处理.scale缩放比例很简单,我们只要计算出屏幕与图片的实际比例,对应缩小就可。即:375 * byclear / e.detail.width这里要带上自适应比例,当然对于图片宽度小于屏幕的我们不做缩放处理
checkwh(e){
// 实际宽度 e.detail.width 高度 e.detail.height
let whsrc = e.detail.height / e.detail.width
// 计算高宽,需要处理图片宽度大于屏幕宽度的时候 对应的canvas比例
let res = this.data.res
let byclear = this.data.byclear
const ctx = wx.createCanvasContext('canvasIn', this);
// 对画布进行缩放,注意scale两个参数保持一致,即缩放比例都是一样的。保证宽高比一致
if (e.detail.width > 375 * byclear) ctx.scale(375 * byclear / e.detail.width, 375 * byclear / e.detail.width);
ctx.drawImage(res.tempFilePaths[0], 0, 0, e.detail.width, e.detail.height)
ctx.draw()
// 后续操作
}
上面我们已经完整的将图片绘制到canvas中了,还不够,下面我们将设置设置canvas宽高大小,已达到完全展示
微信自适应单位是rpx,对于iphone 6 ,375px = 750rpx => 1px = 2rpx; 其他型号计算是带上比例byclear即可,然后图片小于屏幕宽度,不做处理,checkwh后续代码
因此:
checkwh(e){
// 前面代码...
this.setData({
imgW: e.detail.width > 375 ? 750 : e.detail.width * 2 / byclear,
imgH: e.detail.width > 375 ? 750 * whsrc : e.detail.height * 2 / byclear
})
}
canvas 缩放 zoom 方案
zoom方案对比scale方案,比较好的地方在于,不用计算canvas的大小,也不用缩放比例,直接将原图的宽高设置成canvas的宽高,然后,通过zoom对canvas进行缩放,直接放代码额,这里的缩放比例,即为图片宽度 / 750,注意这里不需要比例计算,css样式会自动进行样式比率计算
关键wxml代码
关键js代码
checkwh(e){
var vhsrc = e.detail.height / e.detail.width
let res = this.data.res
let byclear = this.data.byclear
const ctx = wx.createCanvasContext('canvasIn', this);
ctx.drawImage(res.tempFilePaths[0], 0, 0, e.detail.width, e.detail.height)
ctx.draw()
this.setData({
imgW: e.detail.width * 2 / byclear,
imgH: e.detail.height * 2 / byclear
})
},
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
java drawimage图片不完整_微信小程序canvas.drawImage完全显示图片问题的解决相关推荐
- 微信小程序系统教程Java版[3/3阶段]_微信小程序电商系统-翟东平-专题视频课程...
微信小程序系统教程Java版[3/3阶段]_微信小程序电商系统-2445人已学习 课程介绍 微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识. 微信小 ...
- 视频教程-微信小程序系统教程Java版[3/3阶段]_微信小程序电商系统-微信开发
微信小程序系统教程Java版[3/3阶段]_微信小程序电商系统 微信企业号星级会员.10多年软件从业经历,国家级软件项目负责人,主要从事软件研发.软件企业员工技能培训.已经取得计算机技术与软件资格考试 ...
- 微信小程序 Canvas drawImage()绘图头像二维码 安卓用户显示半透明!
微信小程序 Canvas drawImage() 图片在安卓显示为半透明 我遇到的是drawImage()方法绘制 头像和二维码 时开发工具测试没问题 真机测试则出现以下样式 具体问题不太清楚,有可能 ...
- 微信小程序使用image组件显示图片的方法
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 代码如下: <image style=" ...
- imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识 二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
- 微信小程序 长按图片不出现菜单_微信小程序实现长按删除图片的示例
说明 最近在学小程序,遇到长按图片删除的问题,特此记录,记录自己的成长轨迹 需求: 长按删除指定图片 需要解决的问题 长按事件如何表示出来? 如何获取当前长按元素的下标? 如何删除元素? 解决办法 长 ...
- java小程序显示多种按钮_微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能...
看了很多帖子,但是效果都不是很好.还是找微信小程序官方文档,自己写比较方便.自己动手丰衣足食!话不多说,上代码! 先来个效果图 html {{item.text}} 查看更多 收起 wxss .box ...
- uni微信小程序 下载图片跟文字_微信小程序:图片与文字无法居中 最后解决的方法是——...
最近做小程序,需要用到flex布局,发现垂直居中是用:vertical-align:middle或者line-height 后来发现这2个都不能完全实现图片与文字居中,这可怎么办? 大图片 我给sta ...
- swiper高度自适应_微信小程序之swiper轮播图片高度自适应
微信小程序中使用swiper组件可以实现图片轮播效果,但是默认swiper高度是固定的150px,如果项目中图片大于固定高度就会被隐藏,所以本篇文章要实现轮播图片的高度自适应. 效果图: swiper ...
最新文章
- 添加百度地图最简单的办法
- 如何支持亿级用户分流实验?AB实验平台在爱奇艺的实践
- android ble 助手源码_[源码和文档分享]基于Android的生活助手APP的设计与实现
- Linux NULL定义
- Java-While循环
- 线性代数(9):线性正交
- lecture 16:DID双重差分方法
- 记一次npm login失败的经历(npm WARN Username...)
- 解惑“可观测性”与“监控”的不同
- 俞敏洪一分钟励志演讲
- 《2020 数字中国指数报告》重磅发布,汤道生宣布将投入 100 亿用于开发中小企业专属 SaaS 产品及方案...
- 冬季减肥 三餐应该怎么吃
- cocos2dx 中jsc反逆向为js
- MySQL树形结构设计
- 软件开发部门经理岗位职责
- 三菱M80系统服务器,三菱M80系统故障维修实例分享
- openh264解码h264视频帧主流程
- 从Excel中复制数据
- 对2345王牌输入法的评价
- “京东•京点”智慧办公解决方案发布 科技驱动办公场景智慧跃迁
热门文章
- Mybatis引用静态常量或者枚举类型
- linux kernel社区探索
- 粤嵌开发板ARM电子相册
- Android 内存检测工具
- 深度学习模型处理多标签(multi_label)分类任务——keras实战
- backface-visibility 翻转特效
- c语言trim函数去除全部空格,Excel Trim函数使用方法,含用三个去空格函数都删不了的空格实例...
- 浅谈一个新人的大数据之路
- python三维图视角旋转_在python-matplotlib-Jupyter Noteb中交互式旋转三维绘图
- AutoIt 键盘操作(send)