网站开通支付宝接口,美容营销型网站,网站制作成品,百度网站推广方案效果图#xff1a;
旋转 放大#xff1a;手机上可以双指放大缩小 拖拽 代码实现#xff1a;
html div idhome class v-cloak!-- 上面三个按钮 图片自己解决 --div classheadImage v-ifshowBtn
旋转 放大手机上可以双指放大缩小 拖拽 代码实现
html div idhome class v-cloak!-- 上面三个按钮 图片自己解决 --div classheadImage v-ifshowBtndiv classleftPhoto clickleftPhoto()imgstylewidth: 2.2rem; height: 2.2remsrc../../../common/image/left_xuanzhuan.pngalt//divdiv classrightPhoto clickrightPhoto()imgstylewidth: 2.2rem; height: 2.2remsrc../../../common/image/right_xuanzhuan.pngalt//divdiv classcomeBack clickcomeBack()imgstylewidth: 2.4rem; height: 2.4remsrc../../../common/image/fanhui.pngalt//div/div!-- 展示图片位置 --div classpage !-- 缩放 --div classpinch-zoomimgv-showshowBtnidimageIdstyleheight: 95% !important; width: 100%; object-fit: contain:srcgraphPhoto//div/div/div
js代码
script typetext/javascriptlet 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 typetext/javascript$(function () {$(div.pinch-zoom).each(function () {new RTP.PinchZoom($(this), {});});});
/script
还需要引入缩放这个具体文件需要的自提
通过网盘分享的文件pinchzoom.js 链接: https://pan.baidu.com/s/1p83enqDMmrNOHyH8W4gUtQ?pwdies7 提取码: ies7 scripttypetext/javascriptsrc../../../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;}
