当前位置：首页 > news >正文

vue.js 原生js app端实现图片旋转、放大、缩小、拖拽

news 来源：原创 2024/9/27 19:29:36

效果图：

旋转

放大：手机上可以双指放大缩小拖拽

代码实现：

html

 <div id="home" class="" v-cloak><!-- 上面三个按钮 图片自己解决 --><div class="headImage" v-if="showBtn"><div class="leftPhoto" @click="leftPhoto()"><imgstyle="width: 2.2rem; height: 2.2rem"src="../../../common/image/left_xuanzhuan.png"alt=""/></div><div class="rightPhoto" @click="rightPhoto()"><imgstyle="width: 2.2rem; height: 2.2rem"src="../../../common/image/right_xuanzhuan.png"alt=""/></div><div class="comeBack" @click="comeBack()"><imgstyle="width: 2.4rem; height: 2.4rem"src="../../../common/image/fanhui.png"alt=""/></div></div><!-- 展示图片位置 --><div class="page"> <!--  缩放 --><div class="pinch-zoom"><imgv-show="showBtn"id="imageId"style="height: 95% !important; width: 100%; object-fit: contain":src="graphPhoto"/></div></div></div>

js代码

<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(); // 创建一个imgimg.onload = () => {// 创建一个 canvasconst 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

  <scripttype="text/javascript"src="../../../common/js/pinchzoom.js"></script>

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;}