产品思维及实践

产品思维及实践 之 大图片分层，分割

让大家久等了，最近在做一个成册服务，一直没太多时间写文章，今日我 如约而至。

1.从认知用户角度：
所谓的认知用户就是通过用户画像，分析得到好的用户画像，从而继续分析好的用户画像的价值，从而得知用户的真正需求。
2.具体示例如下：
A.一开始做大图片分层，分割功能时，是为了解决用户体验，加载图片过慢，开发的此功能，考虑需求，没有想地图那么大的图片，所以采用了分两层的方式。前端调用，如果不滚动时，就调用第一层的图，滚动时，就根据协议获取该位置的小图片的标识来获取显示。这就是大图片分层，分割的产生与效果。大家这块可以想一下百度地图，每次放大缩小的时候，很明显 是一块一块加载的，而这就是分层，分割的方式。
B.我在年初就有了做产品的想法，并间断性的学习产品，自己这三年左右，也做过大大小小不少的功能，随着公司产品的需求修改，有好些功能在慢慢的丢弃了，静静想起来觉得很可惜，所以 在本月9号加班做成册，中午休息的时候，萌发了一个想法，将大图片分层，分割做成一个小产品。
C.而这个小产品，用户群体是小孩，闲时娱乐（尤其是过年的时候，针对该期间，目前也有了一个想法），老少皆宜的微信小程序-游戏。用户可以上传任意大小的图片，可以输入任意分辨率尺寸来 分割该图片，执行完分割动作后，并执行打乱顺序后，就可以来玩拼图游戏了。

1. 示例代码

	
		//生成第一层图片
 layerFirstFunc(params) {
        let layeredName = 1;
        let dirName = params.filePath;
        let fileName = layeredName + params.inputName;
        let output = params.imagepath_layer + fileName + '.jpg';
        //等比缩小
        let resize;
        if (params.width > params.height) {
            resize = params.lay_01_width;
        } else if (params.width <= params.height) {
            resize = params.lay_01_height;
        }
        images(dirName + params.inputName)
            .resize(resize)
            .save(output, {
                quality: 50
            });
    }
    //生成第二层图片 
    layerSecondFunc(params) {
        //如果 宽高都超过了原图片的大小，则不用生成第二层图
        //计算分割坐标 （x,y,w,h） start
        console.log(params.width,params._width,params.height,params._height);
        if (!(params.width < params._width) && !(params.height < params._height)) {
            //宽和高两者中都没有超过或者两者之一超过了 
            let w_arr = [];
            let h_arr = [];
            let scale_width = params.width / params._width;
            let scale_height = params.height / params._height;
            let ceil_width = Math.ceil(scale_width);
            let ceil_height = Math.ceil(scale_height);
            if (scale_width) {
                for (let i = 1; i <= ceil_width; i++) {
                    if (i == ceil_width) {
                        w_arr.push(params.width);
                    } else {
                        w_arr.push(params._width * i);
                    }
                }
            }
            if (scale_height) {
                for (let i = 1; i <= ceil_height; i++) {
                    if (i == ceil_height) {//说明最后一块的高度为图片的高度
                        h_arr.push(params.height);
                    } else {
                        h_arr.push(params._height * i);
                    }
                }
            }
            let sum = 0;
            let sign = [];
            for (let w = 0; w < w_arr.length; w++) {
                for (let h = 0; h < h_arr.length; h++) {
                    sum++;
                    sign.push(sum);
                    console.log(w * params._width,h * params._height,w_arr[w], h_arr[h]);
                    images(images(params.filePath + params.inputName), w * params._width, h * params._height, w_arr[w], h_arr[h]).resize(params._width, params._height).save(params.imagepath_layer + params.inputName + sum + ".jpg");
                }
            }
            //计算分割坐标 （x,y,w,h） end
        } else {
            //宽高都超过了原图片的大小
            //不需要分层了
        }
    }

3. 小鸡萌队分割效果：
   原图：
   
   我输入的分割的图片分辨率是480 * 360
   
   D.而对于小孩来说，动画片就是最爱了，比如从同事那了解到，现在流行小鸡萌队，那么就可以上传小鸡萌队任意照片来分割，用该图片来拼图，就极大地吸引了小孩的注意力，同时也可以识字识画，分辨颜色等提高学习的能力。对于小孩，对事物都有很强的好奇心。
   E.对于成人，可以上传一些像素点复杂的图片来考验自己，比如蒙娜丽莎等等，来休闲娱乐。
   F.大图片分层、分割效果：
   原图：7200 * 18000
   效果图：分割分辨率是800 * 800 第二层图片共分割为207个张小图片 ，左上角为第一层图片（380*960）
   请求：
   
   以上内容就是本次分享的主题，https://github.com/xueruomei/nodeImageLayer 这是github地址有源代码，欢迎大家fork和点赞