小程序 图片缩放 旋转 https://github.com/Yrobot/YrobotTouch-WXLP
.canvass{
position: fixed;
top:0;
left:100%;
display: block;
width: 100%;
height: 100%;
background-color:rgba(0, 0, 0, 0.8);
transition-duration: 400ms;
-webkit-transition-duration: 400ms;
z-index: 99;
}
.canvass.back{
background:none;
}
.canvass.showl{
left:0;
}
.cut-top{
border:1px solid#ffffff;
height: 1px;
position: absolute;
box-sizing: border-box;
z-index: 1;
}
.cut-right{
border:1px solid #ffffff;
width: 1px;
position: absolute;
box-sizing: border-box;
z-index: 1;
margin-left:-1px;
}
.cut-bottom{
border:1px solid #ffffff;
height: 1px;
position: absolute;
box-sizing: border-box;
z-index: 1;
}
.cut-left{
border:1px solid #ffffff;
width: 1px;
position: absolute;
box-sizing: border-box;
z-index: 1;
}
.buttons{
position: fixed;
z-index: 100;
bottom:-50px;
left:0;
width: 100%;
height: 50px;
display: block;
background-color:rgba(0, 0, 0, 0.5);
transition-duration: 200ms;
-webkit-transition-duration: 200ms;
border:0;
}
.buttons.showl{
bottom:0;
}
.cannel{
color:#fff;
float: left;
display: block;
width: 80px;
height: 50px;
line-height: 50px;
text-align: center;
}
.sure{
float: right;
color:#fff;
width: 80px;
height: 50px;
line-height: 50px;
text-align: center;
}
let windowHeight = 0;
let windowWidth = 0;
Component({
properties: {
src:{
type:String,
value: "", // ./002.png img-01.jpg
observer(news,olds){
//this.data.src = news;
//this.initCanvas();
}
},
screenshots:{
type:Object,
value: { x: 1, y: 1 }
}
},
data: {
//src:"",
showcut:false,
movaWid: windowWidth * 0.8,
movaHei: windowWidth * 0.8,
cutHei: 0,
cutWid: 0,
cavMove: { x: windowWidth * 0.1, y: 0 },
cavlt: { x: windowWidth * 0.1, y: 0 },
cut: {
top: { top: 0, left: 0 },
right: { top: 0, left: 0 },
bottom: { top: 0, left: 0 },
left: { top: 0, left: 0 }
},
origin: {
width:0,
height:0,
maxWidth: 0,
maxHeight: 0,
minWidth: 0,
minHeight: 0,
left: 0,
top: 0
},
imgType:"jpg",
canvas:null
},
ready(){
let infos = wx.getSystemInfoSync();
windowWidth = infos.windowWidth;
windowHeight = infos.windowHeight;
setTimeout(()=>{
this.setData({showcut:true});
this.initCanvas();
},100);
},
methods: {
initCanvas() {
if (this.data.src){
wx.showLoading({ title: '图片加载中' });
}
let cutWid = Math.floor(windowWidth * 0.8);
let scale = (this.data.screenshots.y / this.data.screenshots.x);
let cutHei = Math.floor(cutWid * scale);
wx.getImageInfo({
src: this.data.src,
success: (imgInfo) => {
let { width, height, type, path } = imgInfo;
this.data.imgType = type;
let movaWid = 0;
let movaHei = 0;
if (width < cutWid || height < cutHei) {
if (scale <= (width / height)) { //先满足高度
width = cutHei / height * width;
height = cutHei;
} else {//先满足宽度
height = cutWid / width * height;
width = cutWid;
}
}
let nhei = height * cutWid / width;
this.data.origin.width = width;
this.data.origin.height = height;
if (nhei < cutHei) {
movaHei = cutHei;
movaWid = Math.floor(width * cutHei / height);
this.data.origin.minWidth = movaWid;
this.data.origin.minHeight = movaHei;
} else {
movaWid = cutWid;
movaHei = Math.floor(height * cutWid / width);
this.data.origin.minWidth = movaWid;
this.data.origin.minHeight = movaHei;
}
let cutTop = (windowHeight - cutHei) / 2;
let cutLeft = (windowWidth - cutWid) / 2;
let bodyMarginLeft = (windowWidth - movaWid) / 2;
let bodyMarginTop = (windowHeight - movaHei) / 2;
this.data.cavlt.x = bodyMarginLeft;
this.data.cavlt.y = bodyMarginTop;
this.data.origin.maxWidth = width;
this.data.origin.maxHeight = height;
this.data.origin.left = bodyMarginLeft;
this.data.origin.top = bodyMarginTop;
this.data.movaWid = movaWid;
this.data.movaHei = movaHei;
this.setData({
cutWid: cutWid,
cutHei: cutHei,
cut: {
top: { top: cutTop, left: cutLeft },
right: { top: cutTop, left: cutWid + cutLeft - 1 },
bottom: { top: cutTop + cutHei - 1, left: cutLeft },
left: { top: cutTop, left: cutLeft }
}
});
let canvasTimes = setTimeout(()=>{
this.data.canvas = wx.createCanvasContext("canvasIds", this);
this.data.canvas.drawImage(this.data.src, this.data.cavlt.x, this.data.cavlt.y, this.data.movaWid, this.data.movaHei);
this.data.canvas.draw(false);
if (this.data.src) {
wx.hideLoading();
}
clearTimeout(canvasTimes);
canvasTimes = null;
},100);
// canvasIdsBack 上面的半秀明图层背景
let canvasIdsBack = wx.createCanvasContext("canvasIdsBack", this);
canvasIdsBack.setGlobalAlpha(0.3);
canvasIdsBack.setFillStyle('#000000');
canvasIdsBack.fillRect(0, 0, windowWidth, windowHeight);
canvasIdsBack.clearRect(cutLeft,cutTop, cutWid, cutHei);
canvasIdsBack.draw();
},
fail:(err)=>{
if (this.data.src){
wx.hideLoading();
wx.showToast({
title: '获取图片失败',
icon: "none"
})
}
}
})
},
coverStart(e) {
if (e.touches.length == 1) {
this.data.cavMove = {
x: e.touches[0].x,
y: e.touches[0].y
}
} else if (e.touches.length == 2) {
let xMove = e.touches[1].x - e.touches[0].x;
let yMove = e.touches[1].y - e.touches[0].y;
let distance = Math.sqrt(xMove * xMove + yMove * yMove);
this.data.distance = distance;
}
},
coverMove(e) {
if (e.touches.length == 1) {
if (this.data.movaWid > this.data.cutWid) { //左右可以移动
this.data.cavlt.x = this.data.cavlt.x + (e.touches[0].x - this.data.cavMove.x);
let minLeft = (windowWidth - this.data.cutWid) / 2;
if (this.data.cavlt.x >= minLeft) { // 向右移最大值
this.data.cavlt.x = minLeft;
} else if ((windowWidth - this.data.cutWid) / 2 - (this.data.movaWid - this.data.cutWid) >= this.data.cavlt.x) { //向左移最大值
this.data.cavlt.x = (windowWidth - this.data.cutWid) / 2 - (this.data.movaWid - this.data.cutWid);
}
}
if (this.data.movaHei > this.data.cutHei) { //上下可以移动
this.data.cavlt.y = this.data.cavlt.y + (e.touches[0].y - this.data.cavMove.y);
if ((windowHeight - this.data.cutHei) / 2 <= this.data.cavlt.y) { // 向下移动最大值
this.data.cavlt.y = (windowHeight - this.data.cutHei) / 2;
} else if ((windowHeight - this.data.cutHei) / 2 - (this.data.movaHei - this.data.cutHei) >= this.data.cavlt.y) { // 向上移最大值
this.data.cavlt.y = (windowHeight - this.data.cutHei) / 2 - (this.data.movaHei - this.data.cutHei);
}
}
this.data.cavMove.x = e.touches[0].x;
this.data.cavMove.y = e.touches[0].y;
this.data.canvas.drawImage(this.data.src, this.data.cavlt.x, this.data.cavlt.y, this.data.movaWid, this.data.movaHei);
this.data.canvas.draw(false, () => { });
} else if (e.touches.length == 2) { // 两个手指缩放
let xMove = e.touches[1].x - e.touches[0].x;
let yMove = e.touches[1].y - e.touches[0].y;
let distance = Math.sqrt(xMove * xMove + yMove * yMove);
let distanceDiff = distance - this.data.distance;
this.data.distance = distance;
let newScale = 1 + 0.002 * distanceDiff;
let scaleWidth = this.data.movaWid * newScale;
let scaleHeight = this.data.movaHei * newScale;
if (scaleWidth <= this.data.origin.minWidth) { //缩到最小
scaleWidth = this.data.origin.minWidth;
scaleHeight = this.data.origin.minHeight;
} else if (scaleWidth >= this.data.origin.maxWidth) {
scaleWidth = this.data.origin.maxWidth;
scaleHeight = this.data.origin.maxHeight;
}
this.data.cavlt.x = this.data.cavlt.x + (this.data.movaWid - scaleWidth) / 2;
this.data.cavlt.y = this.data.cavlt.y + (this.data.movaHei - scaleHeight) / 2;
this.data.movaWid = scaleWidth;
this.data.movaHei = scaleHeight;
if (this.data.cavlt.x >= this.data.origin.left) { // 向右移最大值
this.data.cavlt.x = this.data.origin.left;
} else if ((windowWidth - this.data.cutWid) / 2 - (this.data.movaWid - this.data.cutWid) >= this.data.cavlt.x) { //向左移最大值
this.data.cavlt.x = (windowWidth - this.data.cutWid) / 2 - (this.data.movaWid - this.data.cutWid);
}
if ((windowHeight - this.data.cutHei) / 2 <= this.data.cavlt.y) { // 向下移动最大值
this.data.cavlt.y = (windowHeight - this.data.cutHei) / 2;
} else if ((windowHeight - this.data.cutHei) / 2 - (this.data.movaHei - this.data.cutHei) >= this.data.cavlt.y) { // 向上移最大值
this.data.cavlt.y = (windowHeight - this.data.cutHei) / 2 - (this.data.movaHei - this.data.cutHei);
}
this.data.canvas.drawImage(this.data.src, this.data.cavlt.x, this.data.cavlt.y, this.data.movaWid, this.data.movaHei);
this.data.canvas.draw(false, () => { });
}
},
coverEnd(e) {
if (e.touches.length == 1) {
this.data.cavMove = {
x: e.touches[0].x,
y: e.touches[0].y
}
}
},
moveFalse() {
return false;
},
sureCut(e) {
let { target } = e;
if(target.dataset.key=="cannel"){
this.triggerEvent('cutimg', false);
return false;
}
let { cut, cavlt, movaHei, movaWid, cutWid, cutHei, origin, screenshots } = this.data;
let scale = movaWid / origin.minWidth;
let widths = Math.floor(origin.width / scale);
widths = widths >= 1000 ? 1000 : widths;
let heights = Math.floor(widths * screenshots.y / screenshots.x);
if (heights>1000){
heights = 1000;
widths = Math.floor(heights * screenshots.x / screenshots.y)
}
wx.canvasToTempFilePath({
canvasId: "canvasIds",
x: cut.top.left,
y: cut.top.top,
width: cutWid-1,
height: cutHei,
destWidth: widths,
destHeight: heights,
fileType: this.data.imgType||"jpg",
quality: 0.8,
success: (res) => { // cutimg
this.triggerEvent('cutimg', res);
},
fail(){
wx.showToast({title: '处理图片失败',icon:"none"});
this.triggerEvent('cutimg', false);
}
}, this);
}
}
})