存档

文章标签 ‘图片’

图片验证码confirmCode类使用说明

2020年12月9日 评论已被关闭

我们需要如下:demo.html+ajax/doConfirmCode.php+demoSave.php+confirmCode.php(php类,不提供)+confirmCode.js(js类,不提供)

我们先看看demo.html的代码

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>验证码Demo</title>
	<style>
	* {box-sizing:border-box;}
	#code{border:#ababab solid 1px;width:100px;height:30px;line-height:30px;vertical-align:middle;border-radius:6px;}
	#img{border:1px solid red;cursor:pointer;vertical-align:middle;border-radius:6px;width:100px; height:30px; display: inline-block;}
	#button{cursor:pointer;vertical-align:middle;width:100px;height:30px;line-height:30px;background:#000;color:#fff;display:inline-block;text-align:center;border-radius:6px;border:none;margin-left:30px;}
	#box{width:90%;margin:0 auto;margin-top:100px;}
	</style>
</head>
	
<body>
	<div id="box">
		<input type="text" id="code" value="" />
		<img id="img" />
		<input id="button" type="button" value="保存提交" />
	</div>

	<script type="text/ecmascript" src="static/jquery-1.12.4.min.js"></script>
	<script type="text/ecmascript" src="static/confirmCode.js"></script>
	<script type="text/ecmascript">
		$(function(){
			var yzm = new confirmCode({
				//基本配置
				input:'#code',//必填,验证码输入框id或css选择器,比如: '#code'或者'.input_captcha'
				input_maxlength:4,//可以不填,验证码长度, 默认是4(js会自动将控件的maxlength改为input_maxlength,并且input_onblur_check的参数也会先判断长度然后来处理)
				input_first_auto_focus:false,//可以不填,验证码输入框第一次加载是否自动获取焦点并清空值,默认false
				img:'#img',//必填,显示验证码的容器id或css选择器,比如: '#imgcode'或者'.img_captcha'
				img_loading:{
					first_unautoload_default_img:'',//可以不填,填写了代表验证码第一次默认不自动加载所设置的默认图片,可以用远程地址:https://static.vancdn.com/public/img/yzm/click2load.png
					first_load_delay:2000,//第一次延迟加载的毫秒,默认0(如果first_unautoload_default_img设置为非空,则无效)
					loading_img:'static/loading.png',//可以不填,加载验证码过程中的默认图片,可以用远程地址:https://static.vancdn.com/public/img/yzm/loading.png
					loading_fail_img:'static/error.png',//可以不填,加载验证码失败的图片,可以用远程地址:https://static.vancdn.com/public/img/yzm/error.png
					loading_fail_func:function(msg){//验证加载失败的回调函数,如果不操作请申明空function
						alert('验证码加载失败:'+msg+';在此进行相关书写');
					}
				},
				get_url:'ajax/doConfirmCode.php',//必填,获取验证码的url
				
				//第一种情况:在提交保存数据的js代码中验证验证码的合法性(验证长度之后,是否进行js的md5验证)
				//第二种情况:如果开启了input_onblur.open,则先走js的md5验证再走input_onblur.server_check_url(如果设置了的话)
				verify_by_js_md5:true,//可以不填,默认false
				
				//input控件onblur的监控处理
				input_onblur:{
					open:true,//是否在input的onblur时交互检查,总开关(当设置为true的时候,如果verify_by_js_md5==true,那么先走js的md5验证,再走服务端验证)
					server_check_url:'ajax/doConfirmCode.php',//启用服务器端验证时请求的url(如果没设置,则不走服务端验证)
					success:function(){//验证成功的回调函数,如果不操作请申明空function
						alert('onblur验证成功;在此进行相关书写');
					},
					fail:function(msg){//验证失败的回调函数,如果不操作请申明空function
						alert('onblur验证失败:'+msg+';在此进行相关书写');
					}
				},
				
				console_test:true,//是否调试console日志,默认false
			});
			
			//适合保存的时候检查验证码是否有效,根据yzm.verify_save()返回值进行相关操作
			$("#button").on('click',function(){
				//这里仅仅只做验证码的逻辑处理,自己其他业务自己处理
				if(yzm.verify_save()==true){
					
					//在这里获取到输入框的值和key
					var yzmValue=yzm.getYzm();
					alert("yzmkey:"+yzmValue.yzmkey+",yzmvalue:"+yzmValue.yzmkey);
					
					alert('验证码验证成功,书写自己需要的代码,比如请求ajax...');
				}
				else {
					alert('验证码验证失败,书写自己需要的代码,比如return false');
				}
			});
		});
	</script>
</body>
</html>

再看看ajax/doConfirmCode.php

<?php
header('content-type:text/plain; charset=utf-8');
//本代码基本可以不用重写,除非遇到参数不一致
switch($_POST['action']){
	case 'get':
		echo json_encode(Myzm()->get(
			array(
				'width'=>100,//图片宽度px,默认100
				'height'=>30,//图片高度px,默认30
				'textNum'=>4,//验证码(字母+数字)数量,默认4
				'timeout'=>600,//验证码有效期秒,默认600
			)
		));
	break;
	case 'onblurcheck':
		echo json_encode(Myzm()->check(
			array(
				'yzmcode'=>$_POST['yzmcode'],//用户输入的code
				'yzmkey'=>$_POST['yzmkey'],//验证码的key
				'textNum'=>4,//验证码长度,默认为4
				'delyzmkey'=>false,//是否删除key,默认为true,特别注意:ajax执行check时不删除key, 待form提交后再删除
			)
		));
	break;
	default:break;
}

在看看demoSave.php

<?php
header('content-type:text/plain; charset=utf-8');
/***示例检查验证码的代码-开始***/
$yzmCheck=Myzm()->check(
	array(
		'yzmcode'=>$_POST['yzmcode'],//用户输入的code
		'yzmkey'=>$_POST['yzmkey'],//验证码的key
		'textNum'=>4,//验证码长度,默认为4
		'delyzmkey'=>true,//是否删除key,默认为true,特别注意:ajax执行check时不删除key, 待form提交后再删除
	)
);
if($yzmCheck['status']=='error'){
	echo $yzmCheck['errorStr'];//通过$yzmCheck['errorStr']进行自己的相关操作
}
/***示例检查验证码的代码-结束***/

php远程下载图片保存到本地函数

2016年4月10日 没有评论

function downHttpImg($url,$savePath){
$ch=curl_init();
curl_setopt($ch,CURLOPT_URL,$url);
curl_setopt($ch,CURLOPT_TIMEOUT,10);//10秒超时
curl_setopt($ch,CURLOPT_HEADER,0);
curl_setopt($ch,CURLOPT_CUSTOMREQUEST,’GET’);
curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,false);
ob_start();
curl_exec($ch);curl_close($ch);
$content=ob_get_contents();
$fp=fopen($savePath,’a’);
$writeOk=fwrite($fp,$content);
if(!$writeOk){$writeOk=fwrite($fp,$content);};//第一次失败再尝试一次写入
fclose($fp);
ob_end_clean();
return $writeOk;
}

优化版:

function dlfile($file_url,$save_to,$timeout=10){
$ch=curl_init();
curl_setopt($ch,CURLOPT_POST,0);
curl_setopt($ch,CURLOPT_TIMEOUT,$timeout);
curl_setopt($ch,CURLOPT_URL,$file_url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$file_content=curl_exec($ch);
if($file_content===false){
file_put_contents($save_to,
file_get_contents($file_url,false,stream_context_create(array(
‘http’=>array(‘method’=>’GET’,’timeout’=>$timeout)
)))
);
}
else {
$downloaded_file=fopen($save_to,’w’);
fwrite($downloaded_file,$file_content);
fclose($downloaded_file);
}
curl_close($ch);
}

分类: php学习 标签: , , , ,

android设置圆形头像【2种方案】

2015年10月24日 没有评论

方案1,网上应该很多人用,使用:开源类:CircleImageView

package layout.view;

import com.shiwufenzhong.R;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ColorFilter;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.ColorDrawable;
import android.graphics.drawable.Drawable;
import android.net.Uri;
import android.support.annotation.ColorRes;
import android.support.annotation.DrawableRes;
import android.util.AttributeSet;
import android.widget.ImageView;

public class CircleImageView extends ImageView {

private static final ScaleType SCALE_TYPE = ScaleType.CENTER_CROP;
private static final Bitmap.Config BITMAP_CONFIG = Bitmap.Config.ARGB_8888;
private static final int COLORDRAWABLE_DIMENSION = 2;
private static final int DEFAULT_BORDER_WIDTH = 0;
private static final int DEFAULT_BORDER_COLOR = Color.BLACK;
private static final boolean DEFAULT_BORDER_OVERLAY = false;
private final RectF mDrawableRect = new RectF();
private final RectF mBorderRect = new RectF();
private final Matrix mShaderMatrix = new Matrix();
private final Paint mBitmapPaint = new Paint();
private final Paint mBorderPaint = new Paint();
private int mBorderColor = DEFAULT_BORDER_COLOR;
private int mBorderWidth = DEFAULT_BORDER_WIDTH;
private Bitmap mBitmap;
private BitmapShader mBitmapShader;
private int mBitmapWidth;
private int mBitmapHeight;
private float mDrawableRadius;
private float mBorderRadius;
private ColorFilter mColorFilter;
private boolean mReady;
private boolean mSetupPending;
private boolean mBorderOverlay;

public CircleImageView(Context context) {
super(context);
init();
}

public CircleImageView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public CircleImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleImageView, defStyle, 0);
mBorderWidth = a.getDimensionPixelSize(R.styleable.CircleImageView_border_width, DEFAULT_BORDER_WIDTH);
mBorderColor = a.getColor(R.styleable.CircleImageView_border_color, DEFAULT_BORDER_COLOR);
mBorderOverlay = a.getBoolean(R.styleable.CircleImageView_border_overlay, DEFAULT_BORDER_OVERLAY);
a.recycle();
init();
}

private void init() {
super.setScaleType(SCALE_TYPE);
mReady = true;
if (mSetupPending) {
setup();
mSetupPending = false;
}
}

@Override
public ScaleType getScaleType() {
return SCALE_TYPE;
}

@Override
public void setScaleType(ScaleType scaleType) {
if (scaleType != SCALE_TYPE) {
throw new IllegalArgumentException(String.format(“ScaleType %s not supported.”, scaleType));
}
}

@Override
public void setAdjustViewBounds(boolean adjustViewBounds) {
if (adjustViewBounds) {
throw new IllegalArgumentException(“adjustViewBounds not supported.”);
}
}

@Override
protected void onDraw(Canvas canvas) {
if (getDrawable() == null) {
return;
}
canvas.drawCircle(getWidth() / 2, getHeight() / 2, mDrawableRadius, mBitmapPaint);
if (mBorderWidth != 0) {
canvas.drawCircle(getWidth() / 2, getHeight() / 2, mBorderRadius, mBorderPaint);
}
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
setup();
}

public int getBorderColor() {
return mBorderColor;
}

public void setBorderColor(int borderColor) {
if (borderColor == mBorderColor) {
return;
}
mBorderColor = borderColor;
mBorderPaint.setColor(mBorderColor);
invalidate();
}

@SuppressWarnings(“deprecation”)
public void setBorderColorResource(@ColorRes int borderColorRes) {
setBorderColor(getContext().getResources().getColor(borderColorRes));
}

public int getBorderWidth() {
return mBorderWidth;
}

public void setBorderWidth(int borderWidth) {
if (borderWidth == mBorderWidth) {
return;
}
mBorderWidth = borderWidth;
setup();
}

public boolean isBorderOverlay() {
return mBorderOverlay;
}

public void setBorderOverlay(boolean borderOverlay) {
if (borderOverlay == mBorderOverlay) {
return;
}
mBorderOverlay = borderOverlay;
setup();
}

@Override
public void setImageBitmap(Bitmap bm) {
super.setImageBitmap(bm);
mBitmap = bm;
setup();
}

@Override
public void setImageDrawable(Drawable drawable) {
super.setImageDrawable(drawable);
mBitmap = getBitmapFromDrawable(drawable);
setup();
}

@Override
public void setImageResource(@DrawableRes int resId) {
super.setImageResource(resId);
mBitmap = getBitmapFromDrawable(getDrawable());
setup();
}

@Override
public void setImageURI(Uri uri) {
super.setImageURI(uri);
mBitmap = getBitmapFromDrawable(getDrawable());
setup();
}

@Override
public void setColorFilter(ColorFilter cf) {
if (cf == mColorFilter) {
return;
}
mColorFilter = cf;
mBitmapPaint.setColorFilter(mColorFilter);
invalidate();
}

private Bitmap getBitmapFromDrawable(Drawable drawable) {
if (drawable == null) {
return null;
}
if (drawable instanceof BitmapDrawable) {
return ((BitmapDrawable) drawable).getBitmap();
}
try {
Bitmap bitmap;
if (drawable instanceof ColorDrawable) {
bitmap = Bitmap.createBitmap(COLORDRAWABLE_DIMENSION, COLORDRAWABLE_DIMENSION, BITMAP_CONFIG);
} else {
bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(),
BITMAP_CONFIG);
}
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
drawable.draw(canvas);
return bitmap;
} catch (OutOfMemoryError e) {
return null;
}
}

private void setup() {
if (!mReady) {
mSetupPending = true;
return;
}
if (mBitmap == null) {
return;
}
mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
mBitmapPaint.setAntiAlias(true);
mBitmapPaint.setShader(mBitmapShader);
mBorderPaint.setStyle(Paint.Style.STROKE);
mBorderPaint.setAntiAlias(true);
mBorderPaint.setColor(mBorderColor);
mBorderPaint.setStrokeWidth(mBorderWidth);
mBitmapHeight = mBitmap.getHeight();
mBitmapWidth = mBitmap.getWidth();
mBorderRect.set(0, 0, getWidth(), getHeight());
mBorderRadius = Math.min((mBorderRect.height() – mBorderWidth) / 2, (mBorderRect.width() – mBorderWidth) / 2);
mDrawableRect.set(mBorderRect);
if (!mBorderOverlay) {
mDrawableRect.inset(mBorderWidth, mBorderWidth);
}
mDrawableRadius = Math.min(mDrawableRect.height() / 2, mDrawableRect.width() / 2);
updateShaderMatrix();
invalidate();
}

private void updateShaderMatrix() {
float scale;
float dx = 0;
float dy = 0;
mShaderMatrix.set(null);
if (mBitmapWidth * mDrawableRect.height() > mDrawableRect.width() * mBitmapHeight) {
scale = mDrawableRect.height() / (float) mBitmapHeight;
dx = (mDrawableRect.width() – mBitmapWidth * scale) * 0.5f;
} else {
scale = mDrawableRect.width() / (float) mBitmapWidth;
dy = (mDrawableRect.height() – mBitmapHeight * scale) * 0.5f;
}
mShaderMatrix.setScale(scale, scale);
mShaderMatrix.postTranslate((int) (dx + 0.5f) + mDrawableRect.left, (int) (dy + 0.5f) + mDrawableRect.top);
mBitmapShader.setLocalMatrix(mShaderMatrix);
}

}

 

此种方案,如果结合universal-image-loader的时候,有人说:

在列表加载的时候,这个图片是不能缓存的,每次都是用重新切图(注意,是切图,就是将缓存重新切,并不是不能缓存universal-image-loader下载的图片),重新切图就比较消耗资源了,如果是列表的话。

 

——————————————-

 

方案2:如果考虑到第一个方案的列表重新切图问题,那么你可以使用:

1:CircleBitmapDisplayer.java

2:CircleDrawable.java

源码分别是:

package com.view;

import android.graphics.Bitmap;

import com.nostra13.universalimageloader.core.assist.LoadedFrom;
import com.nostra13.universalimageloader.core.display.BitmapDisplayer;
import com.nostra13.universalimageloader.core.imageaware.ImageAware;
import com.nostra13.universalimageloader.core.imageaware.ImageViewAware;

/**
* Created With Android Studio
* User @47
* Date 2014-07-27
* Time 20:55
* 显示原型图片的ImageLoader使用的显示器
*
*/
public class CircleBitmapDisplayer implements BitmapDisplayer {

protected  final int margin ;

public CircleBitmapDisplayer() {
this(0);
}

public CircleBitmapDisplayer(int margin) {
this.margin = margin;
}

@Override
public void display(Bitmap bitmap, ImageAware imageAware, LoadedFrom loadedFrom) {
if (!(imageAware instanceof ImageViewAware)) {
throw new IllegalArgumentException(“ImageAware should wrap ImageView. ImageViewAware is expected.”);
}

imageAware.setImageDrawable(new CircleDrawable(bitmap, margin));
}

}

 

 

 

package com.view;

import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.Rect;
import android.graphics.Shader;
import android.graphics.drawable.Drawable;

/**
* Created With Android Studio
* User @47
* Date 2014-07-28
* Time 0:32
*/
public  class CircleDrawable extends Drawable {
public static final String TAG = “CircleDrawable”;

protected final Paint paint;

protected final int margin;
protected final BitmapShader bitmapShader;
protected float radius;
protected Bitmap oBitmap;//原图
public CircleDrawable(Bitmap bitmap){
this(bitmap,0);
}

public CircleDrawable(Bitmap bitmap, int margin) {
this.margin = margin;
this.oBitmap = bitmap;
bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
paint = new Paint();
paint.setAntiAlias(true);
paint.setShader(bitmapShader);
}

@Override
protected void onBoundsChange(Rect bounds) {
super.onBoundsChange(bounds);
computeBitmapShaderSize();
computeRadius();

}

@Override
public void draw(Canvas canvas) {
Rect bounds = getBounds();//画一个圆圈
canvas.drawCircle(bounds.width() / 2F,bounds.height() / 2F,radius,paint);
}

@Override
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
}

@Override
public void setAlpha(int alpha) {
paint.setAlpha(alpha);
}

@Override
public void setColorFilter(ColorFilter cf) {
paint.setColorFilter(cf);
}

/**
* 计算Bitmap shader 大小
*/
public void computeBitmapShaderSize(){
Rect bounds = getBounds();
if(bounds == null) return;
//选择缩放比较多的缩放,这样图片就不会有图片拉伸失衡
Matrix matrix = new Matrix();
float scaleX = bounds.width() / (float)oBitmap.getWidth();
float scaleY = bounds.height() / (float)oBitmap.getHeight();
float scale = scaleX > scaleY ? scaleX : scaleY;
matrix.postScale(scale,scale);
bitmapShader.setLocalMatrix(matrix);
}

/**
* 计算半径的大小
*/
public void computeRadius(){
Rect bounds = getBounds();
radius = bounds.width() < bounds.height() ?
bounds.width() /2F – margin:
bounds.height() / 2F – margin;
}
}

 

 

 

使用方法:

private DisplayImageOptions options;
options = new DisplayImageOptions.Builder()
.showImageOnLoading(R.drawable.tab_mine_avatar_default)
.showImageForEmptyUri(R.drawable.tab_mine_avatar_default)
.showImageOnFail(R.drawable.tab_mine_avatar_default)
.cacheInMemory(false).cacheOnDisk(false).considerExifParams(true)
.imageScaleType(ImageScaleType.IN_SAMPLE_INT)
.displayer(new CircleBitmapDisplayer())//圆形
.bitmapConfig(Bitmap.Config.RGB_565)
.build();

分类: android 标签: , ,

android加载图片优化类[google官方建议]

2015年5月19日 没有评论

可以使用这个类:ImageWorker、ImageResizer、ImageFetcher

参考:http://blog.csdn.net/xu_fu/article/details/8269865

具体可自行百度。

分类: android 标签: , ,

发几个还不错的图片吧。

2015年5月4日 没有评论

nexus5

top-bj

nyc

分类: 张宏良张洪量 标签: ,
css.php