• Category Archives: JavaScript

12306火车购票优先选下铺的方法

1、先在页面空白地方右击“审查元素”

2、在页面代码编辑区域搜索“优先席别”

3、在网页页面出现席别选择,此时选择硬卧,然后右键“硬卧”选项并审查元素

4、在硬卧的span标签后增加以下代码即可:

 

uni-app使用H5+调起安卓原生Activity

方式一,无需回调结果:

 

方式二,需要回调结果:

 

uni-app使用H5+调用原生的安卓方法

uni-app代码:

安卓代码:

注意,被调用的安卓方法必须为static静态方法,否则无法被调起。

Javascript:Json对象与Json字符串的转化

1.jQuery插件支持的转换方式

$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象

 

2.浏览器支持的转换方式(Firefox,chrome,opera,safari,ie9,ie8)等浏览器:

JSON.stringify(obj)将JSON转为字符串。JSON.parse(string)将字符串转为JSON格式;

var a={“name”:”tom”,”sex”:”男”,”age”:”24″}; 
var b='{“name”:”Mike”,”sex”:”女”,”age”:”29″}'; 
var aToStr=JSON.stringify(a); 
var bToObj=JSON.parse(b); 
alert(typeof(aToStr));  //string 
alert(typeof(bToObj));//object

 

3.Javascript支持的转换方式: 
eval(‘(‘ + jsonstr + ‘)’); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号 
注:ie8(兼容模式),ie7和ie6也可以使用eval()将字符串转为JSON对象,但不推荐这些方式,这种方式不安全eval会执行json串中的表达式。

 

4.JSON官方的转换方式: 
http://www.json.org/提供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法; 
可以在https://github.com/douglascrockford/JSON-js上获取到这个js,一般现在用json2.js。

前端使用photoClick对用户上传图片进行裁切并转换为base64的示例

原作者的git项目地址:https://github.com/baijunjie/PhotoClip.js

示例代码:

 

new PhotoClip( container [, options] )

构造函数有两个主要参数:

container

表示图片裁剪容器的选择器或者DOM对象。

options

配置选项,详细配置如下:

  • options.size

    type: Number|Array

    截取框大小。
    当值为数字时,表示截取框为宽高都等于该值的正方形。
    当值为数组时,数组中索引[0][1]所对应的值分别表示宽和高。
    默认值为 [100,100]

  • options.adaptive

    type: String|Array

    截取框自适应。设置该选项后,size 选项将会失效,此时 size 进用于计算截取框的宽高比例。
    当值为一个百分数字符串时,表示截取框的宽度百分比。
    当值为数组时,数组中索引 [0] 和 [1] 所对应的值分别表示宽和高的百分比。
    当宽或高有一项值未设置或值无效时,则该项会根据 size 选项中定义的宽高比例自适应。
    默认为 ''

  • options.outputSize

    type: Number|Array

    输出图像大小。
    当值为数字时,表示输出宽度,此时高度根据截取框比例自适应。
    当值为数组时,数组中索引 [0] 和 [1] 所对应的值分别表示宽和高,若宽或高有一项值无效,则会根据另一项等比自适应。
    默认值为[0,0],表示输出图像原始大小。

  • options.outputType

    type: String

    指定输出图片的类型,可选 ‘jpg’ 和 ‘png’ 两种种类型,默认为 ‘jpg’。

  • options.outputQuality

    type: Number

    图片输出质量,仅对 jpeg 格式的图片有效,取值 0 – 1,默认为0.8。(这个质量并不是图片的最终质量,而是在经过 lrz 插件压缩后的基础上输出的质量。相当于 outputQuality * lrzOption.quality

  • options.maxZoom

    type: Number

    图片的最大缩放比,默认为 1。

  • options.rotateFree

    type: Boolean

    是否启用图片自由旋转。由于安卓浏览器上存在性能问题,因此在安卓设备上默认关闭。

  • options.view

    type: String|HTMLElement

    显示截取后图像的容器的选择器或者DOM对象。如果有多个,可使用英文逗号隔开的选择器字符串,或者DOM对象数组。

  • options.file

    type: String|HTMLElement

    上传图片的 <input type="file"> 控件的选择器或者DOM对象。如果有多个,可使用英文逗号隔开的选择器字符串,或者DOM对象数组。

  • options.ok

    type: String|HTMLElement

    确认截图按钮的选择器或者DOM对象。如果有多个,可使用英文逗号隔开的选择器字符串,或者DOM对象数组。

  • options.img

    type: String

    需要裁剪图片的url地址。该参数表示当前立即开始读取图片,不需要使用 file 控件获取。注意,加载的图片必须要与本程序同源,如果图片跨域,则无法截图。

  • options.loadStart

    type: Function

    图片开始加载的回调函数。this 指向当前 PhotoClip 的实例对象,并将正在加载的 file 对象作为参数传入。(如果是使用非 file 的方式加载图片,则该参数为图片的 url)

  • options.loadComplete

    type: Function

    图片加载完成的回调函数。this 指向当前 PhotoClip 的实例对象,并将图片的 <img> 对象作为参数传入。

  • options.loadError

    type: Function

    图片加载失败的回调函数。this 指向当前 PhotoClip 的实例对象,并将错误信息作为第一个参数传入,如果还有其它错误对象或者信息会作为第二个参数传入。

  • options.done

    type: Function

    裁剪完成的回调函数。this 指向当前 PhotoClip 的实例对象,会将裁剪出的图像数据DataURL作为参数传入。

  • options.fail

    type: Function

    裁剪失败的回调函数。this 指向当前 PhotoClip 的实例对象,会将失败信息作为参数传入。

  • options.lrzOption

    type: Object

    lrz 压缩插件的配置参数。该压缩插件作用于图片从相册输出到移动设备浏览器过程中的压缩,配置的高低将直接关系到图片在移动设备上操作的流畅度。以下为子属性:

    • options.lrzOption.width

      type: Number

      图片最大不超过的宽度,默认为原图宽度,高度不设时会适应宽度。(由于安卓浏览器存在性能问题,所以默认值为 1000)

    • options.lrzOption.height

      type: Number

      图片最大不超过的高度,默认为原图高度,宽度不设时会适应高度。(由于安卓浏览器存在性能问题,所以默认值为 1000)

    • options.lrzOption.quality

      type: Number

      图片压缩质量,仅对 jpeg 格式的图片有效,取值 0 – 1,默认为0.7。(这个质量不是最终输出的质量,与 options.outputQuality 是相乘关系)

  • options.style

    type: Object

    样式配置。以下为子属性:

    • options.style.maskColor

      type: String

      遮罩层的颜色。默认为 'rgba(0,0,0,.5)'

    • options.style.maskBorder

      type: String

      遮罩层的 border 样式。默认为 '2px dashed #ddd'

    • options.style.jpgFillColor

      type: String

      当输出 jpg 格式时透明区域的填充色。默认为 '#fff'

  • options.errorMsg

    type: Object

    错误信息对象,包含各个阶段出错时的文字说明。以下为子属性:

    • options.errorMsg.noSupport

      type: String

      浏览器无法支持本插件。将会使用 alert 弹出该信息,若不希望弹出,可将该值置空。

    • options.errorMsg.imgError

      type: String

      使用 file 控件读取图片格式错误时的错误信息。将会在 loadError 回调的错误信息中输出。

    • options.errorMsg.imgHandleError

      type: String

      lrz 压缩插件处理图片失败时的错误信息。将会在 loadError 回调的错误信息中输出。

    • options.errorMsg.imgLoadError

      type: String

      图片加载出错时的错误信息。将会在 loadError 回调的错误信息中输出。

    • options.errorMsg.noImg

      type: String

      没有加载完成的图片时,执行截图操作时的错误信息。将会在 fail 回调的失败信息中输出。

    • options.errorMsg.clipError

      type: String

      截图出错时的错误信息。将会在 fail 回调的失败信息中输出。


 

完整demo在这里下载:photoclick-demo

close