nodejs保存base64图片采坑

前端代码部分

<canvas id="cs" width='200' height='200'>
</canvas>
<input type="button" value="button" οnclick="send()" />
<img id='pic' />
<script type="text/javascript">
    function send() {
        var cs = document.querySelector('#cs');
        var ctx = cs.getContext('2d');
        ctx.fillStyle = '#c00';
        ctx.fillRect(0, 0, 120, 200);
        var src = cs.toDataURL('image/png', 0.1);
        document.querySelector('#pic').src = src;
        $.ajax({
            url: '/upbase64',
            dataType: 'json',
            data: 'pic=' + src,
            type: 'POST',
            success: function(data) {
                $("#pic").attr('src', data.src)
            }
        })
    }
 </script>

更多

html5-manifest-缓存的学习

先说下使用方法

html结构

<html manifest='demo.appcache'>
....
</html>

demo.appcache


CACHE MANIFEST
# 注释:需要缓存的文件,无论在线与否,均从缓存里读取
chched.js
cached.css

# 注释:不缓存的文件,无论缓存中存在与否,均从新获取
NETWORK:
uncached.js
uncached.css

# 注释:获取不到资源时的备选路径,如index.html访问失败,则返回404页面
FALLBACK:
index.html 404.html

更多

css3-3d效果算法分享

先说下基础的知识点:

  • perspective透视 我是理解成 视距 值 800px 格式

  • transform: 变换 rotateX、rotateY、rotateZ //分别按照坐标系里的 X、Y、Z轴旋转如下图

translateX、translateY、translateZ //分别按照坐标系不同轴的方向移动相应的距离

更多

javascript-3d逐侦产品展示

3d 逐侦图片 素材
javascript 部分代码

     var step = 0;
    var first = 0;
    var lth = document.querySelectorAll('#tobj img').length;

        window.addEventListener('touchstart',function(e){
            e.preventDefault();
            first = e.touches[0].pageX;
        })
        window.addEventListener('touchmove',function(e){
            e.preventDefault();
            var x =   e.pageX || e.touches[0].pageX;
            document.getElementById('outs').innerHTML = step;
            if(Math.abs(x - first)>10){
                document.querySelectorAll('#tobj img')[step].style.display = 'none'
                if(x<first){
                     step++;
                     if(step>=lth-1){
                         step =0
                     }
                }else{
                    step--
                     if(step<=0){
                         step = lth-1;
                     }
                }
                first = x;
                document.querySelectorAll('#tobj img')[step].style.display = 'block'
            }
        })
        window.addEventListener('touchend',function(e){
            e.preventDefault();
            step = step;
        })

更多