在触屏设备上面利用html5裁剪图片

最新推荐文章于 2023-11-17 18:05:18 发布
最新推荐文章于 2023-11-17 18:05:18 发布
阅读量2.8w 收藏 12
点赞数 2
分类专栏： web开发 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cdnight/article/details/26741795
版权

推荐：

这一篇文章是早年为了解决图片裁剪的探索性文章，现在已经开放出了falsh版及html5版本的图片裁剪插件，各位有时间可以看看：

浮士德html5图片裁剪器2016开源版

浮士德头像裁剪flash版2016福利版

上面两个解决方案已经经过几个项目，可以应用于低级浏览器及现代浏览器，ipad，移动设备等。


前言

现在触屏设备越来越流行，而且大多数已经支持html5了。针对此，对触屏设备开发图片裁剪功能，

让其可以直接处理图片，减轻服务端压力。

技术点

浏览器必须支持html5，包括fileReader，canvas等api，并且该设备至少支持单点触事件（touchstart,touchmove,touchend），可惜的是

很多浏览器只能识别一只手指（不支持多点触摸事件，假如支持的话，请告知我）。

思路

利用filereader直接读取本地图片，然后赋予一个图片，该图片及裁剪框的位置计算跟pc端一样，但是触发的事件不一样，触屏版是根据触屏事件触发的。裁剪时，利用cavas的api直接画出相关图像，然后得到数据，再利用xmlhttprequest发送请求。

非html5无法完成这个过程。

运行结果

这只是一个demo，也是最初的雏形，当然不会太好看了，但是基本实现功能即可。



部分代码


<!doctype html>
<html>

<head>
    <meta name="Author" content="flashlizi - www.riaidea.com">
    <meta name="Description" content="HTML5 experiment">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>头像上传组件 - HTML5版</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

    <style>
        body
        {
            padding: 0;
            margin: 0;
            height: 100%;
            background-color: #eee;
            font-size: 12px;
            color: #666;
        }

        a
        {
            text-decoration: none;
            color: #333;
        }

        a:hover
        {
            text-decoration: none;
            color: #f00;
        }


    </style>
    <script>

        if(window.FileReader==undefined){
            alert("该手机不支持html5");
        }

    </script>

    <script type="text/javascript" src="/static/mobile/lib/zepto.min.js"></script>
</head>

<body >
<h1>选择图片：<input type="file" id="browseFile" οnchange=""><input type="button" id="saveimg" value="保存图片"/></h1>
<div id="wrapper" style="border: 1px gray dotted; padding: 25px;">

    <div id="component_box" style="position: relative; border: 1px green solid; width: 300px; height: 300px;">
        <div id="tipBox" style="display: none;">
            <img src=""/>
        </div>
        <div id="mainCutter" style="overflow: hidden; display: none; position: relative;">
            <img id="imgPreview" />
            <div id="cutBox" style=" position:absolute; width: 150px; height: 200px; opacity: 0.5; background: gray;"></div>
        </div>
    </div>

    <!--画布-->

    <canvas id="cropper" style=" display:none;border:1px solid red; width: 300px; height: 300px;" ></canvas>
</div>
<div><span style="color: green;">调整裁剪区域大小：</span>
    <!--调整用slider-->
    <div><div id="processBar" style=" margin: 0 auto; position: relative; width: 220px; height: 20px; background: green;"><div id="processPoint" style="background: url(images/horizSlider.png); width: 18px; height: 20px; position: absolute;left: 0;top: 0;"></div></div></div>
</div>
<div id="the_show" style="display: none;">
    <h2>提示：</h2>
    <div id="theTips"></div>

    <h2>后台获得的图像</h2>
    <img src="" id="showImg"/>
</div>
<div style="color: green;">友情提醒：拖动裁剪框裁剪框将随之移动，上划放大裁剪框，下滑缩小裁剪框。</div>
<div id="tips2" style="color: green; position: absolute;left: 0px; bottom: 0px; border: 1px solid green;"></div>


<script type="text/javascript">
//--逻辑，点击图片上传选择后将加载预览图片
var Options={
    width:300,
    height:300,
    cutWidth:150,
    cutHeight:200,
    cutMinSize:50,//裁剪框最小尺寸，即最小可以缩放到这个size，width及height任意一个都无法小于这个值。

    //--系统自带，运行时自动运算，请不要修改。
    cropViewWidth:0,//在画布里面显示的最大宽度
    cropViewHeight:0,//在画布里面显示的最大高度
    cropLeft:0,
    cropTop:0,
    //--裁剪框
    cutViewWidth:0,   //当前宽度，
    cutViewHeight:0,//当前高度
    cutMaxWidth:0,   //裁剪框最大宽度。
    cutMaxHeight:0,//裁剪框最大高度。
    //--四象限。用于判断距离。
    cutBoxLimitX1:0,
    cutBoxLimitX2:0,
    cutBoxLimitY1:0,
    cutBoxLimitY2:0,
    cutLeft:0,//裁剪框绝对定位，左侧距离。
    cutTop:0,//裁剪框绝对定位，离顶部距离。
    initStatus:false//当前组件是否已经初始化了。
};
var Options_image={
    width:0,
    height:0,
    imgData:""
}

    var input_browseFile = document.getElementById("browseFile");
    var img_preview = document.getElementById("imgPreview");
    var cutBox=document.getElementById("cutBox");
    var tipBox=document.getElementById("tipBox");
    var _cropper=document.getElementById("cropper");
    var mainCutter=document.getElementById("mainCutter");
    var tips2=$("#tips2");
    var wrapper=document.getElementById("wrapper");
    var component_box=document.getElementById("component_box");

    var ctx = _cropper.getContext('2d');//ctx.drawImage(myImage, 50, 50);
function previewInImage (file) {
        //通过file.size可以取得图片大小
        var reader = new FileReader();
        LoadingImage();

        reader.onload = function( evt ){
            img_preview.src = evt.target.result;
        }
       Options_image.imgData= reader.readAsDataURL(file);
    }
img_preview.οnlοad=function(){
    Options_image.width=img_preview.width;
    Options_image.height=img_preview.height;
    _initCropAndCut();
}
function LoadingImage(){
    $(img_preview).css({"width":"","height":""});
}
function _initCropAndCut(){
    //--计算比例，将其放到canvas里面。

    var scale = Math.max(Options_image.width/Options.width,Options_image.height/Options.height);
    if(scale>1){
       Options.cropViewWidth=parseInt(Math.floor(Options_image.width/scale));
       Options.cropViewHeight=parseInt(Math.floor(Options_image.height/scale));
    }
    else{
       Options.cropViewWidth=Options_image.width;
       Options.cropViewHeight=Options_image.height;
    }
    //--计算画布里面的图像的位置。
    Options.cropLeft=parseInt((Options.width-Options.cropViewWidth)/2);
    Options.cropTop=parseInt((Options.height-Options.cropViewHeight)/2);
    //--计算裁剪框实际大小及实际位置。
    //计算裁剪框的位置。

    var scale_2=Math.max(Options.cutWidth/Options.cropViewWidth,Options.cutHeight/Options.cropViewHeight);
    if(scale_2>1){
        Options.cutViewWidth=parseInt(Math.floor(Options.cutWidth/scale_2));
        Options.cutViewHeight=parseInt(Math.floor(Options.cutHeight/scale_2));
    }
    else{
        Options.cutViewHeight=Options.cutHeight;
        Options.cutViewWidth=Options.cutWidth;
    }
    Options.cutMaxWidth=Options.cutViewWidth;
    Options.cutMaxHeight=Options.cutViewHeight;

    Options.cutLeft=parseInt(Math.floor((Options.cropViewWidth-Options.cutViewWidth))/2);
    Options.cutTop=parseInt(Math.floor((Options.cropViewHeight-Options.cutViewHeight))/2);
    //-四象限。
    Options.cutBoxLimitX1=0;
    Options.cutBoxLimitX2=Options.cropViewWidth;
    Options.cutBoxLimitY1=0;
    Options.cutBoxLimitY2=Options.cropViewHeight;

    $(cutBox).css({"display":"block","width":Options.cutViewWidth+"px","height":Options.cutViewHeight+"px","left":Options.cutLeft+"px","top":Options.cutTop+"px"});
    $(img_preview).css({"width":Options.cropViewWidth+"px","height":Options.cropViewHeight+"px"});
    $(mainCutter).css({"display":"block","width":Options.cropViewWidth+"px","height":Options.cropViewHeight+"px","left":Options.cropLeft+"px","top":Options.cropTop+"px"});
    //ctx.drawImage(img_preview,Options.cropLeft,Options.cropTop,Options.cropViewWidth,Options.cropViewHeight);
    //ctx.drawImage(img_preview, 0, 0, Options_image.width,Options_image.height, Options.cropLeft, Options.cropTop, Options.cropViewWidth, Options.cropViewHeight );

    Options.initStatus=true;
    Options_process.initStatus=true;
    Options_process.percent=100;
    Options_process.pointX=Options_process.barWidth;
    _resizeProcessBar();
}

    input_browseFile.addEventListener("change", function () {
        //通过 this.files 取到 FileList ，这里只有一个
        previewInImage(this.files[0]);

    }, false);
    //--添加缩放功能。
    Options_zoom={
    beginX1:0,
    beginY1:0,
    beginX2:0,
    beginY2:0,
    endX1:0,
    endY1:0,
    endX2:0,
    endY2:0
    };
//--添加裁剪框移动功能
Options_move={
    beginX1:0,
    beginY1:0,
    endX1:0,
    endY1:0
};

/**
 * 拖动裁剪框的逻辑处理。
 * */
cutBox.addEventListener("touchstart",function(event){
  event.preventDefault();
  event.stopPropagation();
    Options_move={
        beginX1:0,
        beginY1:0,
        endX1:0,
        endY1:0
    };
    var beginX=event.changedTouches[0].pageX;
    var beginY=event.changedTouches[0].pageY;
    Options_move.beginX1=beginX;
    Options_move.beginY1=beginY;

},false);
cutBox.addEventListener("touchmove",function(event){
    event.preventDefault();
    event.stopPropagation();
    //--
    var beginX=event.changedTouches[0].pageX;
    var beginY=event.changedTouches[0].pageY;
    Options_move.endX1=beginX;
    Options_move.endY1=beginY;
    //--计算是否发生位移，根据位移来定位裁剪框位置。
    //位移量。
    var _d_x=Options_move.endX1-Options_move.beginX1;
    var _d_y=Options_move.endY1-Options_move.beginY1;
    //--当前裁剪框原始位置。
    var _new_x=Options.cutLeft;
    var _new_y=Options.cutTop;
    _new_x+=_d_x;
    _new_y+=_d_y;
    //--判断是否在矩形边框，假如超出去，那么就取最终点。
    //--注意，判断相关点的范围。

    if(_new_x<Options.cutBoxLimitX1){
        _new_x=Options.cutBoxLimitX1;
    }
    else if(_new_x>Options.cutBoxLimitX2){
        _new_x=Options.cutBoxLimitX2;
    }
    //--顺便判断，加上宽度后，是否超过了范围。
    if((_new_x+Options.cutViewWidth)>Options.cutBoxLimitX2){
        _new_x=Options.cutBoxLimitX2-Options.cutViewWidth;
    }
    if(_new_y<Options.cutBoxLimitY1){
        _new_y=Options.cutBoxLimitY1;
    }
    else if(_new_y>Options.cutBoxLimitY2){
        _new_y=Options.cutBoxLimitY2;
    }
    //--顺便判断，加上裁剪框高度后，是否超过下限。
    if((_new_y+Options.cutViewHeight)>Options.cutBoxLimitY2){
        _new_y=Options.cutBoxLimitY2-Options.cutViewHeight;
    }


    Options.cutLeft=_new_x;
    Options.cutTop=_new_y;
    _resizeCutBox();
    //---将这一点的放回前一点。
    Options_move.beginX1=Options_move.endX1;
    Options_move.beginY1=Options_move.endY1;

},false);
cutBox.addEventListener("touchend",function(event){
    event.preventDefault();
    event.stopPropagation();
    return;

},false);
 /**
 * 根据相关参数重新resize裁剪框
 * */
function _resizeCutBox(){
    $(cutBox).css({"width":Options.cutViewWidth+"px","height":Options.cutViewHeight+"px","left":Options.cutLeft+"px","top":Options.cutTop+"px"});
}
function _getCutImageData(){
    var output = document.createElement("canvas");
    //--坐标换算。
    var scale_x=Options_image.width/Options.cropViewWidth;
    var scale_y=Options_image.height/Options.cropViewHeight;
    var _o_x=parseInt( (scale_x)*Options.cutLeft);
    var _o_y=parseInt( (scale_y)*Options.cutTop);
    //--长度换算
    var _o_width=parseInt(scale_x*Options.cutViewWidth);
    var _o_height=parseInt(scale_y*Options.cutViewHeight);

    output.width = Options.cutWidth;
    output.height = Options.cutHeight;
    output.getContext("2d").drawImage(img_preview, _o_x,_o_y, _o_width, _o_height, 0, 0, output.width, output.height);
    return output.toDataURL("image/jpeg");
}
function saveImage()
{
    var imgData = _getCutImageData();
    /*

    $("#the_show").css("display","block");

    document.getElementById("showImg").src=imgData;
    return;
    */
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(e)
    {
        if(xhr.readyState == 4)
        {
            if(xhr.status == 200)
            {
                //--获取返回的数据。
                var _res=xhr.responseText;
                _res= $.trim(_res);
                var json= $.parseJSON(_res);
                if(json.status==true){
                    $("#the_show").css("display","block");
                    var surl=json.url+"?t="+Math.random();
                    $("#showImg").attr("src",surl);
                }
                else{
                    alert(json.message);
                }
                //document.getElementById("status").innerHTML = "<font color='#f00'>上传成功！</font>";
            }
            else{
                alert("服务端无法响应，错误编号："+xhr.status);

            }
        }
    };

    xhr.open("post", "/quickTest/html5CropperHandler.jsp", true);
    var data = new FormData();
    data.append("username", "flashlizi");
    data.append("size", 180);
    data.append("file", imgData);
    xhr.send(data);
}
/**
 * processBar 进度条相关操作。
 * */

Options_process={
    beginX:0,//触摸时候起始点
    beginY:0,//触摸时候起始点
    endX:0,//触摸时候终点
    endY:0,//触摸时候终点
    barWidth:200,//进度条长度
    pointX:0,//当前指示点位置
    pointY:0,
    percent:0,//百分比值。
    initStatus:false
};
var processBar=document.getElementById("processBar");
var processPoint=document.getElementById("processPoint");

//--添加触屏事件，监控相关动作。
//开始触摸
processBar.addEventListener("touchstart",function(event){
    event.preventDefault();
    event.stopPropagation();

    if(!Options_process.initStatus){
        return;
    }
    var beginX=event.changedTouches[0].pageX;
    var beginY=event.changedTouches[0].pageY;
    Options_process.beginX=beginX;
    Options_process.beginY=beginY;
},false) ;
//--移动中
processBar.addEventListener("touchmove",function(event){
    event.preventDefault();
    event.stopPropagation();

    if(!Options_process.initStatus){
        return;
    }
    var beginX=event.changedTouches[0].pageX;
    var beginY=event.changedTouches[0].pageY;
    Options_process.endX=beginX;
    Options_process.endY=beginY;
    //--计算比分比。
    var _d_x=Options_process.endX-Options_process.beginX;
    Options_process.percent+=parseInt(_d_x*100/Options_process.barWidth);
    if(Options_process.percent<0){
        Options_process.percent=0;
    }
    else if(Options_process.percent>100){
        Options_process.percent=100;
    }
    //--计算那个指示点位置。
    Options_process.pointX=parseInt(Options_process.barWidth*(Options_process.percent/100));
    _resizeProcessBar();
    //--根据百分比，设置裁剪框大小。
    var _o_cut_x=Options.cutLeft;
    var _o_cut_y=Options.cutTop;
    var _o_cut_width=Options.cutViewWidth;
    var _new_cut_width= parseInt(Options.cutMaxWidth*(Options_process.percent/100));
    var _new_cut_height= parseInt(Options.cutMaxHeight*(Options_process.percent/100));
    if(_new_cut_width>_o_cut_width){
        //--扩大了。
        //--计算当前坐标
        var _d_x_2=_new_cut_width-Options.cutViewWidth;
        var _d_y_2=_new_cut_height-Options.cutViewHeight;

        Options.cutLeft=Options.cutLeft-parseInt(_d_x_2/2);
        Options.cutTop=Options.cutTop-parseInt(_d_y_2/2);
        Options.cutViewWidth=_new_cut_width;
        Options.cutViewHeight=_new_cut_height;
        _resizeCutBox();

    }
    else if(_new_cut_width<_o_cut_width){
        //--缩小了。
        var _d_x_2=Options.cutViewWidth-_new_cut_width;
        var _d_y_2=Options.cutViewHeight-_new_cut_height;
        Options.cutLeft=Options.cutLeft+parseInt(_d_x_2/2);
        Options.cutTop=Options.cutTop+parseInt(_d_y_2/2);
        Options.cutViewWidth=_new_cut_width;
        Options.cutViewHeight=_new_cut_height;
        _resizeCutBox();

    }

    //--后续处理。
    Options_process.beginX=Options_process.endX;
    Options_process.endY=Options_process.endY;

},false) ;
//--结束
processBar.addEventListener("touchend",function(event){
    event.preventDefault();
    event.stopPropagation();

    if(!Options_process.initStatus){
        return;
    }
},false) ;
/**
 * 根据相关属性，重设slider位置。
 * */
function _resizeProcessBar(){
    $(processPoint).css("left",Options_process.pointX+"px");
}


 $("#saveimg").click(function(){
    if(Options.initStatus==false){
        alert("请先选择图片！");
        return;
    }
    saveImage();
});

</script>

</body>
</html>




码农下的天桥
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
移动端H5调启相册或拍照 选择图片后进行裁剪
就写一行代码
09-26 2144
 这段时间做一个公众号项目的开发，其中有一个功能涉及到微信网页调启相机或者拍照 选择图片后进行裁剪 然后转换base64 上传服务器。 思路: 1. 在本页面点击拍照或相册 调启相机或者相册 选择图片后 将图片传到裁剪页面 2. 在裁剪页面显示选择的图片 使用Cropper插件进行裁剪 3. 点击裁剪按钮 将Cropper裁剪的内容 利用canvas 将裁剪的图转换base64 4. 在...
H5实现裁剪图片并上传
05-26
基于Croppe插件，实现HTML5裁剪图片并上传功能。
基于JavaScript+HTML+cropper.js 摄像头拍照和拖动裁剪
ywenboy的博客
07-13 397
基于JavaScript+HTML+cropper.js 摄像头拍照和拖动裁剪
html5移动端图片剪裁
dream12331的博客
09-04 1497
https://github.com/baijunjie/PhotoClip.js
html5 手机相册裁剪,H5的手机图片裁剪特效
weixin_39963255的博客
06-20 117
H5的手机图片裁剪特效js代码//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);$("#clipArea").photoClip({width: 200,height: 200,file: "#file",view: "#view",ok: "#clipBtn",loadSta...
html5手机端图片上传裁剪代码.zip
07-11
这个插件利用HTML5的File API、Canvas以及WebGL技术，实现了用户在手机上选择图片、预览、裁剪并保存的操作。以下是对该知识点的详细解释： 1. **HTML5 File API**：File API是HTML5标准的一部分，它提供了读取、...
PHP+jQuery+html5实现图片选取裁剪上传(兼容手机上传)
08-30
手机上传需要考虑到触摸屏交互和不同的设备分辨率。HTML5的File API在移动设备上同样有效，但可能需要对CSS进行调整以适应不同屏幕尺寸。此外，确保使用的JavaScript库也支持移动端，或者采用响应式设计来优化移动...
h5手机端触摸裁剪图片相片cropper.js
12-03
它利用了JavaScript库cropper.js，实现了触摸操作下的图片裁剪功能，让用户在触屏设备上可以方便地调整和裁剪图片。 Cropper.js是一款强大的、响应式的、基于HTML5的图片裁剪工具，支持CSS3和SVG，能够提供精确的...
HTML5实现手机端图片上传裁剪特效源码.zip
11-16
这个"HTML5实现手机端图片上传裁剪特效源码.zip"文件包含了一个利用HTML5技术来实现在手机端上传并裁剪图片的示例项目。通过分析这个压缩包内的资源，我们可以了解到以下几个关键知识点： 1. **HTML5 File API**: ...
html5头像裁剪、触屏缩放、拖动，打开相机，支持微信（无需sdk）
11-24
在这个场景中，我们关注的是HTML5在头像裁剪、触屏操作以及与微信集成方面的应用。 首先，让我们深入理解HTML5头像裁剪的功能。这一特性通常依赖于HTML5的`<canvas>`元素，它允许开发者在浏览器内进行图像处理。...
H5移动端裁剪上传图片
05-27
现在越来越多的 手机站点 但是 h5上传图片一直是我们的一个痛点，今天我解决了这个问题。 更好的在手机上以 拍照，相册 获取来的照片经过设定大小上传到服务器。全原生js编写。
cropper.js h5裁剪上传图片 （代码齐整）
02-27
使用cropper.js裁剪图片，通过canvas获取裁剪后的图片，获取的是base64图片上传。
html实现图片裁剪处理(附源码)
最新发布
xcLeigh
11-17 2216
html实现图片裁剪处理(附源码)，支持图片放大缩小，裁剪图片，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
HTML5唤起摄像头拍摄、裁剪并上传
ZegTsai's blogs
11-24 1584
页面唤起相机拍摄、保存、修改尺寸以及上传 近期有个需求，需要在微信中打开移动端页面，让用户在页面中唤起相机进行人脸拍摄，用于身份认证或满足其他业务上的需要。同时要保证上传图像不能过大，需要对图片进行裁剪再上传 过程 利用input的accept和capture这两个属性来限定接收类型和相机方向（前后摄像） 拍摄获取的图片和普通文件上传一样利用FileReader进行读取处理 设置到图片目标大小，再用canvas.drawImage读取图片，最后利用canvas.toDataURL转化为base64
html5图片裁剪控件原型【含缩放，旋转，拖动功能】---2、核心代码
一名普通码农的菜地
08-21 9399
推荐这一篇文章是早年为了解决图片裁剪的探索性文章，现在已经开放出了falsh版及html5版本的图片裁剪插件，各位有时间可以看看： 浮士德html5图片裁剪器2016开源版 浮士德头像裁剪flash版2016福利版 上面两个解决方案已经经过多个项目的成功应用，适用于低级浏览器及现代浏览器，ipad，android，iphone4s，iphone5，iphone5s，iphone6等设备等。前言
H5 Canvas中实现图像截图功能
smileNano的博客
02-02 1868
【代码】H5 Canvas中实现图像截图功能。
H5图片上传与裁剪（头像）
coco723的博客
03-06 649
3. 因为基于react框架开发，所以使用了第三方插件react- cropper。最近接到的需求中H5头像上传和实现基本的图片裁剪，这也是比较常见且典型的场景。2. 选择图片后，将选中的图片放入画布；1. 调起移动端相机拍照或相册功能；1. 封装react组件。2. 实现图片裁剪功能。
h5上传图片并裁剪
月下lk山人的博客
09-11 560
本文主要较少，h5通过input上传图片后，利用cropperjs进行裁剪，获取指定尺寸。
H5选择本地图片裁剪及上传功能
蒙双眼看世界
06-16 800
实现H5选择本地图片裁剪及上传功能。裁剪功能使用cropper.js。
HTML5+CSS3在触屏网站开发的实践与挑战
"HTML5+CSS3在触屏网站上的实践" HTML5和CSS3是现代网页开发中的核心技术，尤其在构建触屏网站时，这两者的重要性不言而喻。本资源是一个关于HTML5和触屏应用实践的PPT，由卞飞于2011年07月制作。该PPT探讨了当时...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值