Skip to content

N
nyx
Commit cdb6c2d5 by jscat
Options

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

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