前几天弄了一个拼图游戏，起初为的是给运营人打广告顺便玩游戏发奖品用的。 后来给裕波弄到他们游戏中心了。可以先看下（明骚拼图）

为了增加趣味性，我们增加了一个功能，本地上传图片，然后拼图(本着增加社交元素去的)。

虽说是拼图游戏，比如33的拼图，但是我们不可能真的把一张图片弄成`33=9份。我们可以运用background+background-position` 来做。

<div class="drag-box">
    <div class="item" sort="1" dragitem="1" style="width:102px;height:102px;background:url(./images/jigsaw/2_1_3x3.gif) no-repeat;background-position:0px 0px;background-size:312px 312px;" position="{"width":"102px","height":"102px","left":"805px","top":"6px"}"></div>
    <div class="item" sort="2" dragitem="1" style="width:102px;height:102px;background:url(./images/jigsaw/2_1_3x3.gif) no-repeat;background-position:-102px 0px;background-size:312px 312px;" position="{"width":"102px","height":"102px","left":"909px","top":"6px"}"></div>
    <div class="item" sort="3" dragitem="1" style="width:102px;height:102px;background:url(./images/jigsaw/2_1_3x3.gif) no-repeat;background-position:-204px 0px;background-size:312px 312px;" position="{"width":"102px","height":"102px","left":"1013px","top":"6px"}"></div>
    <div class="item" sort="4" dragitem="1" style="width:102px;height:102px;background:url(./images/jigsaw/2_1_3x3.gif) no-repeat;background-position:0px -102px;background-size:312px 312px;" position="{"width":"102px","height":"102px","left":"805px","top":"110px"}"></div>
    <div class="item" sort="5" dragitem="1" style="width:102px;height:102px;background:url(./images/jigsaw/2_1_3x3.gif) no-repeat;background-position:-102px -102px;background-size:312px 312px;" position="{"width":"102px","height":"102px","left":"909px","top":"110px"}"></div>
    <div class="item" sort="6" dragitem="1" style="width:102px;height:102px;background:url(./images/jigsaw/2_1_3x3.gif) no-repeat;background-position:-204px -102px;background-size:312px 312px;" position="{"width":"102px","height":"102px","left":"1013px","top":"110px"}"></div>
    <div class="item" sort="7" dragitem="1" style="width:102px;height:102px;background:url(./images/jigsaw/2_1_3x3.gif) no-repeat;background-position:0px -204px;background-size:312px 312px;" position="{"width":"102px","height":"102px","left":"805px","top":"214px"}"></div>
    <div class="item" sort="8" dragitem="1" style="width:102px;height:102px;background:url(./images/jigsaw/2_1_3x3.gif) no-repeat;background-position:-102px -204px;background-size:312px 312px;" position="{"width":"102px","height":"102px","left":"909px","top":"214px"}"></div>
    <div class="item" sort="9" dragitem="1" style="width:102px;height:102px;background:url(./images/jigsaw/2_1_3x3.gif) no-repeat;background-position:-204px -204px;background-size:312px 312px;" position="{"width":"102px","height":"102px","left":"1013px","top":"214px"}"></div>
</div>

这都没啥说的，其实我想说的是如果做本地上传的文件来拼图。

一般在h5没出来之前，肯定是上传文件，保存到服务器，然后返回url，替换background中的url即可。h5增加增加filereader后，我们就可以直接将文件在本地进行操作。

最开始我的思路是这样的。

fButton.addEventListener("change",function(e){
  // 读取图片文件，
  var file =  fButton.files[0];

  // 转化为base64位的url
  var fr = new FileReader();
  fr.onloadend = function(){
     var value = fr.result;
     // 然后重新生成html 

     // style="background:url("+value+")"

     //.....
  };
  fr.readAsDataURL(file)


},false)

搞定，上传一张图片，浏览器卡死，微信直接崩了。

原因是大量的字符串操作。不死才怪

后来我不重新生成html了，而是采用js的方法来做。

fButton.addEventListener("change",function(e){
  // 读取图片文件，
  var file =  fButton.files[0];

  // 转化为base64位的url
  var fr = new FileReader();
  fr.onloadend = function(){
     var value = fr.result;
     // 然后重新生成html 

     // style.backgroundImage="url("+value+")"

     //.....
  };
  fr.readAsDataURL(file)


},false)

效果依然不明显

不过后来想起以前做的一个本地文件存储的例子：

// ajax获取一张图片，显示出来，转成64存储。（这里存储没做。）
var xhr = new XMLHttpRequest();
xhr.open('get','http://xxx.3g.qq.com/wbread/msgbase/images/toss.png');

xhr.onreadystatechange=function(){
  if(xhr.readyState==4 && xhr.status==200){
    var arrayBufferView = new Uint8Array(xhr.response),
    blob = new Blob([arrayBufferView], {'type': 'image\/png'}),
    objectURL = window.URL.createObjectURL(blob);
    console.log(objectURL )
  }
}
xhr.overrideMimeType("text/plain; charset=x-user-defined");
xhr.responseType = "arraybuffer";
xhr.send('')

主要说的是URL.createObjectURL 可以将blob格式的大数据生成本地地址。参考这里

拼图游戏修改如下：

// 移动设备中 还是带webkit的
var urlObject = window.URL || window.webkitURL;

fButton.addEventListener("change",function(e){
 var file = fButton.files[0],type = file.type,name=file.name.toLowerCase();
    if(type.indexOf("image") >=0 || name.indexOf("jpg") >=0 || name.indexOf("gif") >=0||name.indexOf("png") >=0  ){
        changeFile(file);
    }else{
        alert("hey,请选择图片格式文件:"+type)
        events.stopEvent(e);
    }
},false)
function releaseFile(){
    if(curFile){
        urlObject.revokeObjectURL(curFile);
    }
    curFile = false;
}
function changeFile(file){
 // 一定要记得释放资源
    releaseFile();
    curFile = urlObject.createObjectURL(file);
  // reset html

  //style.backgroundImage="url("+curFile+")"
}

自此，本地上并显示完成。 h5出来后，增加了对文件读写，二进制，blob数据的操作。现在github上有gif制作的，视频文件读写

这些大家可以关注下

扫码关注w3ctech微信公众号