怎样用html实现微信九宫格,微信小程序使用canvas实现,图片分割为九宫格,点击图片保存...
let _this
Page({/**
* 页面的初始数据*/data: {
canvasInWH:'',//imgUrl: '',
cutGap: 5, //切割间隔
imgW: 0,
imgH:0,
uploadFlag:false,
canvasIn:true},/*上传图片*/uploadImg() {
_this.setData({
canvasIn:true})
const ctx= wx.createCanvasContext('canvasIn', _this)
wx.chooseImage({
count:1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {/*获取图片信息*/wx.getImageInfo({
src: res.tempFilePaths[0],
success(imgInfo) {
const imgW=imgInfo.width
const imgH=imgInfo.height
_this.setData({
canvasWH: `width: ${imgW}px;height: ${imgH}px`,//canvasWH: `width: 100%;height: 300px`,
imgW,
imgH
})/*获取图片的大小*/ctx.drawImage(res.tempFilePaths[0], 0, 0, imgW, imgH)
ctx.draw()
const query=wx.createSelectorQuery()
query.select('#canvasOut').boundingClientRect(function(resOut) {/*清除上一次绘图*/const ctxOut= wx.createCanvasContext('canvasOut', _this)
ctxOut.rect(10, 10, resOut.width, resOut.width)
ctxOut.fillStyle= '#fff'ctxOut.fill()
ctxOut.draw()/*开始图片裁剪*/_this.cutImgHandle(imgW, imgH)
})
query.exec()
},
fail(err) {
wx.showModal({
title:'温馨提示',
content:'暂不支持此图片格式',
showCancel:false})
}
})
}
})
},/*点击裁剪动作*/cutImgHandle(imgW, imgH) {
let x= 0let y= 0const cutW= imgW / 3const cutH= imgH / 3const {
cutGap
}=_this.data/*循环裁剪*/const timer= setInterval(function() {
const cfg={
x: x*cutW,
y: y*cutH,
width: cutW,
height: cutH
}/*每个切片的间隔为cutGap*/const cfgOut={
x: parseInt(x* (cutW +cutGap)),
y: parseInt(y* (cutH +cutGap)),
width: parseInt(cutW),
height: parseInt(cutH)
}
wx.canvasGetImageData({
canvasId:'canvasIn',
...cfg,
success: (res)=>{
const data=res.data
console.log(res,'data')
wx.canvasPutImageData({
canvasId:'canvasOut',
data,
...cfgOut,
success: (res)=>{
x++
if (x == 3) {
y++x= 0
if (y == 3) {
_this.setData({
uploadFlag:true,
canvasIn:false})
clearInterval(timer)
}
}
console.log('执行了', res)
},
fail: (err)=>{
console.error(err,'canvasPutImageData')
}
})
},
fail: (err)=>{
console.error(err,'canvasGetImageData')
}
})
},500)
},/*保存图片*/saveImg(e) {
wx.showModal({
title:'温馨提示',
content:'要将图片保存到相册',
success(confirm) {if(confirm.confirm) {
_this.saveImgHandle(e)
}
}
})
},
saveImgHandle(e) {
const {
cutGap,
imgW,
imgH,
uploadFlag
}=_this.data
const cutW= imgW / 3const cutH= imgH / 3
/*判断点击的位置坐标*/const tapX=e.detail.x
const tapY=e.detail.y/*判断是否已上传图片*/
if(uploadFlag) {
const cfgSave={
x:0,
y:0,
width: cutW,
height: cutH,
destWidth: cutW,
destHeight: cutH,
canvasId:'canvasOut',
}for (let x = 0; x < 3; x++) {for (let y = 0; y < 3; y++) {if(
parseInt((cutW+ cutGap) * x) < tapX && parseInt((cutW + cutGap) * (x + 1)) &&parseInt((cutH+ cutGap) * y) < tapY && parseInt((cutH + cutGap) * (y + 1))
) {
cfgSave.x= (cutW + cutGap) *x
cfgSave.y= (cutH + cutGap) *y
}
}
}
wx.canvasToTempFilePath({
...cfgSave,
success(res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(resPhoto) {
wx.showToast({
title:'保存成功'})
}
})
}
})
}else{
wx.showModal({
title:'温馨提示',
content:'请先上传图片',
showCancel:false})
}
},/**
* 生命周期函数--监听页面加载*/onLoad:function(options) {
_this= this},/**
* 生命周期函数--监听页面初次渲染完成*/onReady:function() {
},/**
* 生命周期函数--监听页面显示*/onShow:function() {
},/**
* 生命周期函数--监听页面隐藏*/onHide:function() {
},/**
* 生命周期函数--监听页面卸载*/onUnload:function() {
},/**
* 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh:function() {
},/**
* 页面上拉触底事件的处理函数*/onReachBottom:function() {
},/**
* 用户点击右上角分享*/onShareAppMessage:function() {
}
})
怎样用html实现微信九宫格,微信小程序使用canvas实现,图片分割为九宫格,点击图片保存...相关推荐
- 微信小程序开发(2.加减数值和点击图片切换图片)
加减 数据绑定 {{msg}} {{num}} 点击事件bindtap="sub" bindtap="add", 在.js中设置msg num 的值, 在.js ...
- python小程序代码50 到100行-Python代码不到四十行简单暴力,微信跳一跳小程序轻松过万...
群内不定时分享干货,包括最新的python企业案例学习资料和零基础入门教程,欢迎初学和进阶中的小伙伴入群学习交流 最近微信有个小程序,并不知道大家有没有被这个游戏给刷屏,这个游戏就是跳一跳 今天就用P ...
- 从微信公众平台·小程序内测邀请函看应用号动向
最近,网上流传一张疑似张小龙朋友圈的照片,上面写着:"什么是小程序:小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下即可打开 ...
- 微信:禁用小程序跳转 App;华为商城上架 PlayStation 5;币安涉及洗钱被美监管调查
8 部门联合约谈滴滴.首汽等 10 家交通运输平台企业 腾讯 To B 业务架构再升级,原 360 高管李强加入 搜狐第一季度营收 2.22 亿美元,同比增长 24% 8 部门联合约谈滴滴.首汽等 1 ...
- 微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路 ...
- 实现拼团_生鲜商家如何使用微信拼团小程序做水果生鲜拼团活动?
随着社交电商的兴起,社交裂变这个词对大家来说应该已经不算陌生了. 简单来说,社交裂变就是利用社交平台上人与人之间的社交链,来实现商品信息的传播.社交裂变的方式有很多种,如果运用得当,其所产生的传播营销 ...
- .NET Core 微信公众号小程序6种获取UnionID方法,你知道哪几种?
前言 获取UnionID是开发微信公众号/小程序中很有必要的一个环节,特别是针对一个公司拥有多个公众号小程序而推出的机制,实现打通账户一体化,用UnionID来区分多平台的唯一性. 官方的解释:如果开 ...
- H5 使用微信开放标签跳转小程序
微信开放标签是微信公众平台面向网页开发者提供的扩展标签集合,可以在网页上提供跳转小程序.打开 App 等能力.本文梳理使用微信开放标签跳转小程序的过程,以备日后查阅. 参考链接 1. 开放标签说明文档 ...
- 二开微信表情包小程序魔改版源码
简介: 二开微信表情包小程序魔改版源码内附图文安装教程 源码包括俩个版本,一个之前发过黄色版本,一个是二开魔改版. 安装搭建就不说了,源码内打包好了 网盘下载地址: http://kekewl.cc/ ...
- mpvue 微信小程序api_基于mpvue构建微信和支付宝小程序(1)
基于mpvue构建微信和支付宝小程序(1) (1)----- 基础架构篇 why?为啥会有这个系列? 无论是百度和google,关于mpvue构建小程序的项目讲的都是管中窥豹,没有一个系统的讲解. 本 ...
最新文章
- win10 计算机网络密码,win10系统电脑如何查看wifi密码 win10系统电脑查看wifi密码方法【介绍】...
- 整合mybatis——使用纯注解整合、使用Mapper+Mapper.xml整合、使用mybatis.cfg.xml整合
- Zookeeper_zkClientAPI讲解
- 如何加入Dave英语学习小组
- 关于jQuery对象(类数组对象)以及DOM对象相互转化问题——[object Object]和[object HTMLInputElement]
- 03、动态代理--CGLib引入增强
- mysql的建表语句
- 你遇到过最尴尬的糗事是什么?
- 初用WEB IOU,IE LAB备战启航
- MySQL 服务无法启动。服务没有报告任何错误。
- 编写爬虫遇到的问题总结
- EJB是什么,什么是EJB
- cad添加自己线性_CAD2014怎么自定义线型? cad设置线型的方法
- 计算机网络期末考点复习
- 电位计,电子尺0-5欧姆或0-50欧姆转换成电流电压0-10MA/0-10V转换器,隔离器
- 2017滴滴校招 末尾0的个数(数学知识)
- Git从入门到放弃的Day10
- mysql backtrace_是什么导致Linux 64位上的backtrace()崩溃(SIGSEGV)
- /boot空间不足的解决办法
- Pandas中的pivot操作
热门文章
- usb3.0 ssd 测试软件,SSD打造的移动硬盘,顺便测下USB2.0、USB3.0、SATA2.0、SATA3.0传输速度...
- 在Excel表格中如何快速检查两张表的不一样的数据
- 华为鸿蒙几时有新机,华为鸿蒙系统正小规模测试 新机年底前推出或备货百万台...
- 三维电影视觉特效和物理模拟软件:SideFX Houdini for Mac
- NAT技术详解(网络地址转换)
- 世界读书日线上知识竞赛答题活动方案及模板分享
- 实名推荐熊节《敏捷中国史》,IT 历史不止有趣的故事
- JAVA思维导图复习策略
- 有人知道乐高机器人和乐高少儿编程区别吗
- 语音论文中英语的高级表达(持续更新ing...)