HTML5 XMLHttpRequest中的新功能

来源于:http://www.html5rocks.com/zh/tutorials/file/xhr2/

简介

HTML5 世界中有这样一位无名英雄:XMLHttpRequest。严格地说,XHR2 并不属于 HTML5。不过,它是浏览器供应商对于核心平台不断做出的改进中的一部分。我之所以将 XHR2 加入我们新的百宝囊中,就是因为它在如今复杂的网络应用中扮演了不可或缺的角色。

结果呢,我们这位老朋友来了个大变身,很多人都不知道它的新功能了。2 级 XMLHttpRequest 引入了大量的新功能(例如跨源请求、上传进度事件以及对上传/下载二进制数据的支持等),一举封杀了我们网络应用中的疯狂黑客。这使得 AJAX 可以与很多尖端的 HTML5 API 结合使用,例如 File System APIWeb Audio API 和 WebGL。

此教程重点介绍 XMLHttpRequest 中的新功能,尤其是可用于处理文件的功能。

继续阅读~ 参与评论~

Google Visual Assets Guidelines

在这里http://www.ui.cn/project.php?id=17755看到一部分,觉得不错,于是找了找完整版。

原文两篇:

https://www.behance.net/gallery/9028077/Google-Visual-Assets-Guidelines-Part-1

https://www.behance.net/gallery/9084309/Google-Visual-Assets-Guidelines-Part-2

中文翻译:

http://l-alex.lofter.com/post/1ee686_6c0bef

http://l-alex.lofter.com/post/1ee686_6c0bf3

 

继续阅读~ 参与评论~

移动端图片缩放-旋转-拖拽并和背景图拼合

一步步解决:
1、支持触屏手势的js库,选择Hammer.js。另有一个Quo.js,估计是为了赚钱,文档差的一塌糊涂,试用过程也发现一些基本问题都不能从文档中找到解决方法,所以弃用。

实现旋转遇到的问题,参考了一些资料:

http://jsfiddle.net/8726R/

http://youryida.duapp.com/other/drag_rotate/

2、canvas的图片拼合,参考:

http://www.w3school.com.cn/tags/html_ref_canvas.asp

http://www.xinran001.com/bbs/thread-73899-1-1.html

3、上传canvas拼好的图片,参考:

http://cnodejs.org/topic/4f939c84407edba2143c12f7

http://my.oschina.net/hzplay/blog/160806

https://github.com/think2011/LocalResizeIMG

http://blog.csdn.net/northwind_x/article/details/5874680

http://blog.csdn.net/renfufei/article/details/9836317

思路就是 用canvasElement.toDataURL()获取base64编码的图像,去除开头的”data:image/png;base64,”数据声明,用xhr post给后端,后端对base64转码然后写入一个图片文件,基本就OK了。

继续阅读~ 参与评论~

温习三角函数

最近遇到了,温习一下。
具体资料看这里:
http://zh.wikipedia.org/zh/三角函数
sin正弦函数

写了两个方法:

/// 计算邻边的长度
// h 斜边长度
// angle 斜边和邻边夹角角度, 0°直接返回斜边长
function adjacentSide(h, angle) {
    return angle ? Math.abs(h * Math.cos(Math.PI * angle / 180)) : h;
}

// 计算对边的长度
// h 斜边长度
// angle 斜边和邻边夹角角度, 0°直接返回0
function oppositeSide(h, angle) {
    return angle ? Math.abs(h * Math.sin(Math.PI * angle / 180)) : 0;
}

继续阅读~ 参与评论~

一种解析URL字符串的方法

利用a元素来解析url,09年就有这么巧妙的方法了,才发现。

// This function creates a new anchor element and uses location
// properties (inherent) to get the desired URL data. Some String
// operations are used (to normalize results across browsers).

function parseURL(url) {
    var a =  document.createElement('a');
    a.href = url;
    return {
        source: url,
        protocol: a.protocol.replace(':',''),
        host: a.hostname,
        port: a.port,
        query: a.search,
        params: (function(){
            var ret = {},
                seg = a.search.replace(/^\?/,'').split('&'),
                len = seg.length, i = 0, s;
            for (;i<len ;i++) {
                if (!seg[i]) { continue; }
                s = seg[i].split('=');
                ret[s[0]] = s[1];
            }
            return ret;
        })(),
        file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
        hash: a.hash.replace('#',''),
        path: a.pathname.replace(/^([^\/])/,'/$1'),
        relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
        segments: a.pathname.replace(/^\//,'').split('/')
    };
}

使用示例:

var myURL = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top');

myURL.file;     // = 'index.html'
myURL.hash;     // = 'top'
myURL.host;     // = 'abc.com'
myURL.query;    // = '?id=255&m=hello'
myURL.params;   // = Object = { id: 255, m: hello }
myURL.path;     // = '/dir/index.html'
myURL.segments; // = Array = ['dir', 'index.html']
myURL.port;     // = '8080'
myURL.protocol; // = 'http'
myURL.source;   // = 'http://abc.com:8080/dir/index.html?id=255&m=hello#top'

源自:http://james.padolsey.com/javascript/parsing-urls-with-the-dom/

继续阅读~ 参与评论~

使用CSS灰化图片

截止到目前,比较兼容的方案:

.gray { 
  -webkit-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><fecolormatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'></fecolormatrix></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
  filter: grayscale(100%);
  filter: gray;
}

同时有个一个js方案可供选择:http://www.iliasiovis.com/hoverizr/

资料:

https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility

该资料说明Gecko核心的Firefox仅实现了filter:url()这一个滤镜功能。所以上面可以通过svg来实现FF的兼容。

http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html

继续阅读~ 参与评论~

1 2 3 4 5 6 7 8 9 10 11 12 27 28

全部分类
Books(4)code(7)database(6)html&css(24)java(11)JavaScript(51)jQuery(24)linux(20)python(1)React(1)share(1)soft(4)solution(54)thinking(17)vim(9)WordPress(8)前端优化(12)拓展(33)服务器(33)移动开发(4)自然(22)