效果图:
旋转
放大:手机上可以双指放大缩小 拖拽
代码实现:
html
html
<div id="home" class="" v-cloak>
<!-- 上面三个按钮 图片自己解决 -->
<div class="headImage" v-if="showBtn">
<div class="leftPhoto" @click="leftPhoto()">
<img
style="width: 2.2rem; height: 2.2rem"
src="../../../common/image/left_xuanzhuan.png"
alt=""
/>
</div>
<div class="rightPhoto" @click="rightPhoto()">
<img
style="width: 2.2rem; height: 2.2rem"
src="../../../common/image/right_xuanzhuan.png"
alt=""
/>
</div>
<div class="comeBack" @click="comeBack()">
<img
style="width: 2.4rem; height: 2.4rem"
src="../../../common/image/fanhui.png"
alt=""
/>
</div>
</div>
<!-- 展示图片位置 -->
<div class="page">
<!-- 缩放 -->
<div class="pinch-zoom">
<img
v-show="showBtn"
id="imageId"
style="height: 95% !important; width: 100%; object-fit: contain"
:src="graphPhoto"
/>
</div>
</div>
</div>
js代码
html
<script type="text/javascript">
let vm = new Vue({
el: "#home",
data() {
return {
graphPhoto: "", //图片地址
showBtn: false, //判断是否显示按钮
};
},
methods: {
// 返回
comeBack() {
// 根据逻辑返回就行
},
leftPhoto() {
// 使用示例
this.rotateBase64Image(this.graphPhoto, 90) // 旋转90度
.then((rotatedBase64) => {
this.graphPhoto = rotatedBase64;
});
},
rightPhoto() {
this.rotateBase64Image(this.graphPhoto, -90) // 旋转90度
.then((rotatedBase64) => {
this.graphPhoto = rotatedBase64;
});
},
// 接口查询
getPhoto() {
let that = this;
//.... 你的接口返回的数据 base 如果没有可以暂时用本地的图片代替一下
if (base) {
that.graphPhoto = "../../../common/image/WechatIMG624.jpg";
that.showBtn = true; //是否展示按钮
that
.rotateBase64Image(that.graphPhoto, 0) // 默认调用 旋转0度
.then((rotatedBase64) => {
that.graphPhoto = rotatedBase64;
});
} else {
that.showBtn = false;
mui.confirm("未获取到图形", "提示", ["返回"], function (e) {
if (e.index == 0) {
//根据自己逻辑写就行
}
});
}
});
},
rotateBase64Image(base64ImageData, degree) {
let that = this;
return new Promise((resolve, reject) => {
const img = new Image(); // 创建一个img
img.onload = () => {
// 创建一个 canvas
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
// 计算旋转后的尺寸
const maxDim = Math.max(img.width, img.height);
canvas.width = maxDim;
canvas.height = maxDim;
// 将图片绘制到canvas上,并旋转指定的角度
ctx.translate(maxDim / 2, maxDim / 2);
ctx.rotate((degree * Math.PI) / 180);
ctx.drawImage(
img,
-img.width / 2,
-img.height / 2,
img.width,
img.height
);
// 将旋转后的canvas转换回Base64编码的图片数据
const rotatedBase64 = canvas.toDataURL("image/png");
resolve(rotatedBase64);
};
img.onerror = () => {
that.showBtn = false;
mui.confirm("图形解析异常", "提示", ["返回"], function (e) {
if (e.index == 0) {
//根据自己逻辑写就行
}
});
};
img.src = base64ImageData;
});
},
},
mounted() {
this.getPhoto();
},
});
</script>
// 单独把双指放大缩小之类的引入 我用的jq 你可以直接用js获取
<script type="text/javascript">
$(function () {
$("div.pinch-zoom").each(function () {
new RTP.PinchZoom($(this), {});
});
});
</script>
还需要引入缩放这个:具体文件需要的自提:
通过网盘分享的文件:pinchzoom.js
链接: https://pan.baidu.com/s/1p83enqDMmrNOHyH8W4gUtQ?pwd=ies7 提取码: ies7
javascript
<script
type="text/javascript"
src="../../../common/js/pinchzoom.js"
></script>
css 样式:
css
.headImage {
margin-top: 1rem;
margin-right: 0.5rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: flex-end;
height: 3.8rem;
}
.headImage > div {
width: 3.8rem;
height: 3.8rem;
border-radius: 0.6rem;
margin: 0.4rem;
background-color: #e8eff1;
line-height: 2rem;
text-align: center;
}
.page img {
width: 100%;
height: auto;
}
.page {
height: 100%;
width: 100%;
}
// 这块比较重要 不设置的话 默认会根据你的宽或者高 生成一个正方形区域
.pinch-zoom {
height: 95% !important;
width: 100% !important;
}
.page > div {
height: 100% !important;
width: 100% !important;
}
.leftPhoto,
.rightPhoto,
.comeBack {
display: flex;
align-items: center;
justify-content: center;
}