产品思维及实践 之 大图片分层,分割
让大家久等了,最近在做一个成册服务,一直没太多时间写文章,今日我 如约而至。
1.从认知用户角度:
所谓的认知用户就是通过用户画像,分析得到好的用户画像,从而继续分析好的用户画像的价值,从而得知用户的真正需求。
2.具体示例如下:
A.一开始做大图片分层,分割功能时,是为了解决用户体验,加载图片过慢,开发的此功能,考虑需求,没有想地图那么大的图片,所以采用了分两层的方式。前端调用,如果不滚动时,就调用第一层的图,滚动时,就根据协议获取该位置的小图片的标识来获取显示。这就是大图片分层,分割的产生与效果。大家这块可以想一下百度地图,每次放大缩小的时候,很明显 是一块一块加载的,而这就是分层,分割的方式。
B.我在年初就有了做产品的想法,并间断性的学习产品,自己这三年左右,也做过大大小小不少的功能,随着公司产品的需求修改,有好些功能在慢慢的丢弃了,静静想起来觉得很可惜,所以 在本月9号加班做成册,中午休息的时候,萌发了一个想法,将大图片分层,分割做成一个小产品。
C.而这个小产品,用户群体是小孩,闲时娱乐(尤其是过年的时候,针对该期间,目前也有了一个想法),老少皆宜的微信小程序-游戏。用户可以上传任意大小的图片,可以输入任意分辨率尺寸来 分割该图片,执行完分割动作后,并执行打乱顺序后,就可以来玩拼图游戏了。
- 示例代码
//生成第一层图片
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 {
//宽高都超过了原图片的大小
//不需要分层了
}
}
- 小鸡萌队分割效果:
原图:
我输入的分割的图片分辨率是480 * 360
D.而对于小孩来说,动画片就是最爱了,比如从同事那了解到,现在流行小鸡萌队,那么就可以上传小鸡萌队任意照片来分割,用该图片来拼图,就极大地吸引了小孩的注意力,同时也可以识字识画,分辨颜色等提高学习的能力。对于小孩,对事物都有很强的好奇心。
E.对于成人,可以上传一些像素点复杂的图片来考验自己,比如蒙娜丽莎等等,来休闲娱乐。
F.大图片分层、分割效果:
原图:7200 * 18000
效果图:分割分辨率是800 * 800 第二层图片共分割为207个张小图片 ,左上角为第一层图片(380*960)
请求:
以上内容就是本次分享的主题,https://github.com/xueruomei/nodeImageLayer 这是github地址有源代码,欢迎大家fork和点赞