手机适应屏幕简单图片处理算法

doDraw: function (path, height, width) {

let that = this;

var ctx = wx.createCanvasContext('firstCanvas')

 

let scale = width / height;

let drawWidth = 0; // 绘制图片的宽度

let drawHeight = 0; // 绘制图片的高度

// 假设高度确定

if (scale >= (360/ 640)) {

// 宽度过大：高度设置为1280

drawHeight = 640;

drawWidth = scale * 640;

let left = (drawWidth - 360) / 2; // 左边偏移量

ctx.drawImage(path, -left, 0, drawWidth, drawHeight);

} else {

// 宽度过小：宽度设置为720

drawWidth = 360;

drawHeight = 360 / scale;

let top = (drawHeight - 640) / 2; // 顶部偏移量

ctx.drawImage(path, 0, -top, drawWidth, drawHeight);

}

//模板

 

// 绘制前景图

ctx.drawImage(that.data.path, 72 / 2, 128 / 2, 576 / 2, 1024 / 2);

 

ctx.draw();

 

setTimeout(function () {

that.doCanvas();

}, 300)

},

转载于:https://www.cnblogs.com/xinhang/p/7780242.html