html微信端怎么让图片可放大

Posted 2023-04-25

我已知的方法有2种：
第一种，你准备两张图片，大小不一，点击的时候切换图片；
第二种，你只准备一张图片，但是，像素要给力，支持放大之后的清晰度。然后你通过点击的时候修改图片的width,height样式（最好是只修改width，然后height不管他，让他自己撑开，不然很容易比例不对导致图片变形）。 参考技术A 微信端放大是什么意思？？用svg格式的图片在移动端很好的追问

怎么使输出的图片可点击查看

追答

哦那要加上点击效果啊

参考技术B 可以使用html的缩放特性追问

我以为在img标签里加个属性就行了哟

iOS—仿微信单击放大图片

//
//  ImageZoomView.h
//  手势缩放图片
//
//  Created by strong on 16/4/7.
//  Copyright ? 2016年 LYX. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ImageZoomView : UIView
- (instancetype)initWithFrame:(CGRect)frame andWithImage:(UIImageView *)imageview;
@end

//
//  ImageZoomView.m
//  手势缩放图片
//
//  Created by strong on 16/4/7.
//  Copyright ? 2016年 LYX. All rights reserved.
//

#import "ImageZoomView.h"
static CGRect oldframe;
@interface ImageZoomView ()<UIScrollViewDelegate>

@end

@implementation ImageZoomView{
    UIScrollView *holderView;
    UIImageView *showImgView;
    BOOL isFirst;
}
- (instancetype)initWithFrame:(CGRect)frame andWithImage:(UIImageView *)imageview{
    if(self = [super initWithFrame:frame]){
        UIImage *image=imageview.image;
        holderView = [[UIScrollView alloc]initWithFrame:frame];
        holderView.backgroundColor=[UIColor blackColor];
        holderView.showsHorizontalScrollIndicator = NO; //水平
        holderView.showsVerticalScrollIndicator = NO; // 竖直
        holderView.scrollEnabled=YES;
        holderView.directionalLockEnabled = NO;
        holderView.bounces=NO;
        holderView.delegate=self;
        holderView.autoresizesSubviews=YES;
        holderView.maximumZoomScale=4;
        holderView.minimumZoomScale=1;
        [holderView setZoomScale:0.5 animated:NO];

        UIWindow *window = [UIApplication sharedApplication].keyWindow;
        oldframe = [imageview convertRect:imageview.bounds toView:window];
        [holderView setBackgroundColor:[UIColor colorWithRed:0/255.0 green:0/255.0 blue:0/255.0 alpha:1.0]];
        //此时视图不会显示
        [holderView setAlpha:0];
        //将所展示的imageView重新绘制
        showImgView = [[UIImageView alloc] initWithFrame:oldframe];
        [showImgView setImage:imageview.image];
        [showImgView setTag:0];
        [holderView addSubview:showImgView];
        [self addSubview:holderView];

        //动画放大所展示的ImageView
        [UIView animateWithDuration:0.4 animations:^{
            CGFloat y,width,height;
            y = ([UIScreen mainScreen].bounds.size.height - image.size.height * [UIScreen mainScreen].bounds.size.width / image.size.width) * 0.5;
            //宽度为屏幕宽度
            width = [UIScreen mainScreen].bounds.size.width;
            //高度 根据图片宽高比设置
            height = image.size.height * [UIScreen mainScreen].bounds.size.width / image.size.width;
            [showImgView setFrame:CGRectMake(0, y, width, height)];
            //重要！ 将视图显示出来
            [holderView setAlpha:1];
        } completion:^(BOOL finished) {
            
        }];
        
        
        UITapGestureRecognizer *doubleTapGesture =[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleDoubleTap:)];
        [doubleTapGesture setNumberOfTapsRequired:2];
        [holderView addGestureRecognizer:doubleTapGesture];
        [self addSubview:holderView];
        
        UITapGestureRecognizer *singleTapGestureRecognizer = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(singleTap:)];
        [singleTapGestureRecognizer setNumberOfTapsRequired:1];
        [holderView addGestureRecognizer:singleTapGestureRecognizer];
        [singleTapGestureRecognizer requireGestureRecognizerToFail:doubleTapGesture];
       
    }
    return self;
}

- (void)scrollViewDidZoom:(UIScrollView *)scrollView{
    CGFloat offsetX = (scrollView.bounds.size.width > scrollView.contentSize.width)?
    (scrollView.bounds.size.width - scrollView.contentSize.width) * 0.5 : 0.0;
    
    CGFloat offsetY = (scrollView.bounds.size.height > scrollView.contentSize.height)?
    (scrollView.bounds.size.height - scrollView.contentSize.height) * 0.5 : 0.0;
    showImgView.center = CGPointMake(scrollView.contentSize.width * 0.5 + offsetX,
                                     scrollView.contentSize.height * 0.5 + offsetY);
}

-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return showImgView;
}

- (void)handleDoubleTap:(UIGestureRecognizer *)gesture{
    if(!isFirst){
        isFirst=YES;
        CGPoint pointInView = [gesture locationInView:holderView];
        CGFloat newZoomScale = holderView.zoomScale * 4.0f;
        newZoomScale = MIN(newZoomScale, holderView.maximumZoomScale);
        CGSize scrollViewSize =holderView.bounds.size;
        CGFloat w = scrollViewSize.width / newZoomScale;
        CGFloat h = scrollViewSize.height / newZoomScale;
        CGFloat x = pointInView.x - (w / 2.0f);
        CGFloat y = pointInView.y - (h / 2.0f);
        CGRect rectToZoomTo = CGRectMake(x, y, w, h);
        [holderView zoomToRect:rectToZoomTo animated:YES];
    }else{
        isFirst=NO;
        CGFloat newZoomScale = holderView.zoomScale / 4.0f;
        newZoomScale = MAX(newZoomScale, holderView.minimumZoomScale);
        [holderView setZoomScale:newZoomScale animated:YES];
    }
    
}

- (void)singleTap:(UITapGestureRecognizer*)tap{
    
    [UIView animateWithDuration:0.4 animations:^{
        [showImgView setFrame:oldframe];
        [holderView setAlpha:0];
    } completion:^(BOOL finished) {
        //完成后操作->将背景视图删掉
        [holderView removeFromSuperview];
        [self removeFromSuperview];
    }];

}

@end

 
//点击事件
ImageZoomView *img=[[ImageZoomView alloc]initWithFrame:CGRectMake(0, 0, WIDTH_SCREEN, HEIGHT_SCREEN) andWithImage:imgView];
    //当前视图
    UIWindow *window = [UIApplication sharedApplication].keyWindow;
    [window addSubview:img];