Skip to content

N
nyx
Commit cdb6c2d5 by jscat
Options

nyx: 针对上传图片的拉伸及裁剪 

更新：主要是为了保证上传图片的尺寸一致性
横图，保持宽高比=5:3
纵图，保持宽高比=3:4
主要更新在util.js里
parent ce480af8
正在显示 包含 110 行增加 和 38 行删除
增值产品-小程序及app/nyx-master/pages/post/post.js
// pages/post/post.js
// pages/post/post.js
......@@ -69,16 +69,18 @@ Page({
navigateToEdit() {
var _this = this;
var newFilePaths = _this.data.photoArray
let promise = app.onCheckPic(newFilePaths)
//在本轮event loop（事件循环）运行完成之前，回调函数是不会被调用的
//then后的括号里应该是参数param
//https://www.cnblogs.com/qlongbg/p/11603328.html
promise.then(function (value) {
console.log("===checkPic_enter promise then_" + value)
//同步更新全局变量
app.globalData.postData.photoArray = newFilePaths
wx.navigateTo({ url: './edit/edit' })
});
// let promise = app.onCheckPic(newFilePaths)
// //在本轮event loop（事件循环）运行完成之前，回调函数是不会被调用的
// //then后的括号里应该是参数param
// //https://www.cnblogs.com/qlongbg/p/11603328.html
// promise.then(function (value) {
// console.log("===checkPic_enter promise then_" + value)
// //同步更新全局变量
// app.globalData.postData.photoArray = newFilePaths
// wx.navigateTo({ url: './edit/edit' })
// });
app.globalData.postData.photoArray = newFilePaths
wx.navigateTo({ url: './edit/edit' })
},
......@@ -149,7 +151,9 @@ Page({
imageSize: imageSize
})
const ctx = wx.createCanvasContext(canvasId);
ctx.drawImage(pic, 0, 0, imageSize.imageWidth, imageSize.imageHeight);
//ctx.drawImage(pic, 0, 0, imageSize.swidth, imageSize.sheight);
ctx.drawImage(pic, imageSize.sx, imageSize.sy, imageSize.swidth, imageSize.sheight,
imageSize.x, imageSize.y, imageSize.width, imageSize.height);
// 需要注意的是 draw 方法是异步的，如果图片还没加载成功，有可能画出来的是空的
// 所以 draw 方法通常都会带有定时器这样的回调
ctx.draw(false, setTimeout(function () {
......
增值产品-小程序及app/nyx-master/pages/post/post.wxml
<view class="page" style="height:100%;width:100%">
<view class="page" style="height:100%;width:100%">
......@@ -30,6 +30,6 @@
</view>
</form>
<canvas canvas-id='photoCanvasId' class='myCanvas' style='width:{{imageSize.imageWidth}}px;height:{{imageSize.imageHeight}}px'>
<canvas canvas-id='photoCanvasId' class='myCanvas' style='width:{{imageSize.width}}px;height:{{imageSize.height}}px'>
</canvas>
</view>
\ No newline at end of file
增值产品-小程序及app/nyx-master/utils/util.js
function formatTime(date) {
function formatTime(date) {
......@@ -35,46 +35,113 @@ function imageUtil(e) {
var imageSize = {};
var originalWidth = e.width;//图片原始宽
var originalHeight = e.height;//图片原始高
var originalScale = originalHeight / originalWidth;//图片高宽比
var originalScale = originalHeight / originalWidth;//图片高宽比
console.log('原始宽: ' + originalWidth)
console.log('原始高: ' + originalHeight)
console.log('宽高比' + originalScale)
//获取屏幕宽高
//获取屏幕宽高
//https://www.cnblogs.com/boboweiqi/p/9523793.html
wx.getSystemInfo({
success: function (res) {
// 想要适应其他尺寸的屏幕时其实需按照iPhone6(375x667)的绘制大小按比例进行换算即可
var rpx = res.windowWidth / 375;
// canvas 基础宽高调为 2 倍，避免图片压缩程度过高导致图片字体显示不清楚
var windowWidth = res.windowWidth;
// res.windowWidth = 375
var windowWidth = res.windowWidth;
var windowHeight = res.windowHeight;
var windowscale = windowHeight / windowWidth;//屏幕高宽比
// 图片尺寸大于设备
if (originalWidth > res.windowWidth || originalHeight > res.windowHeight) {
if (originalScale < windowscale) {//图片高宽比小于屏幕高宽比
//图片缩放后的宽为屏幕宽
imageSize.imageWidth = windowWidth;
imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth;
} else {//图片高宽比大于屏幕高宽比
//图片缩放后的高为屏幕高
imageSize.imageHeight = windowHeight;
imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight;
var windowscale = windowHeight / windowWidth;//屏幕高宽比
var rpx2px = 1 / 750 * res.windowWidth; //
var imagescale = originalHeight / originalWidth;//屏幕高宽比
var targetWidth = windowWidth
var targetHeight = windowWidth * 4 / 3
if(imagescale > 1 ) // 图像压缩成长型4:3
{
targetWidth = windowWidth
targetHeight = windowWidth * 4 / 3
}
else if(imagescale == 1)
{
targetWidth = windowWidth
targetHeight = windowWidth
}
else
{
// 定义为4:3,那么kpl的那张横屏的图就会裁剪很多！！
targetWidth = windowWidth
targetHeight = windowWidth * 3 / 5
}
var dw = targetWidth/originalWidth //canvas与图片的宽高比
var dh = targetHeight/originalHeight
// 裁剪图片中间部分
if(originalWidth > targetWidth && originalHeight > targetHeight){
//以width为放缩标准，裁剪height
if (dw >= dh) {
imageSize.sx = 0
imageSize.sy = (originalHeight - targetHeight/dw)/2
imageSize.swidth = originalWidth
imageSize.sheight = targetHeight/dw
}
//以height为放缩标准，裁剪width
else {
imageSize.sx = (originalWidth - targetWidth/dh)/2
imageSize.sy = 0
imageSize.swidth = targetWidth/dh
imageSize.sheight = originalHeight
}
} else {
imageSize.imageHeight = originalHeight;
imageSize.imageWidth = originalWidth;
imageSize.width = targetWidth
imageSize.height = targetHeight
}
// 拉伸图片并裁剪
else if( originalWidth > targetWidth || originalHeight > targetHeight)
{
//宽度小于显示区域，拉伸宽度并裁剪
if(originalWidth < targetWidth){
imageSize.sx = 0
imageSize.sy = (originalHeight - targetHeight/dw)/2
imageSize.swidth = originalWidth
imageSize.sheight = targetHeight/dw
}
//原始图片仅高度小于显示区域
else {
imageSize.sx = (originalWidth - targetWidth/dh)/2
imageSize.sy = 0
imageSize.swidth = targetWidth/dh
imageSize.sheight = originalHeight
}
imageSize.width = targetWidth
imageSize.height = targetHeight
}
//
else
{
imageSize.sx = 0
imageSize.sy = 0
imageSize.swidth = originalWidth
imageSize.sheight = originalHeight
imageSize.width = originalWidth
imageSize.height = originalHeight
}
imageSize.x = 0
imageSize.y = 0
}
})
console.log('缩放后的宽: ' + imageSize.imageWidth)
console.log('缩放后的高: ' + imageSize.imageHeight)
console.log('缩放后的sx: ' + imageSize.sx)
console.log('缩放后的sy: ' + imageSize.sy)
console.log('缩放后的宽: ' + imageSize.width)
console.log('缩放后的高: ' + imageSize.height)
return imageSize;
}
let app = getApp()
function rpx2px(rpx) {
return rpx * app.globalData.rpx2px;
}
module.exports = {
formatTime: formatTime,
wxuuid: wxuuid,
imageUtil: imageUtil
imageUtil: imageUtil,
rpx2px: rpx2px
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论