|
|
@ -77,14 +77,14 @@ Page({ |
|
|
|
_image.initialHeight = _src.height |
|
|
|
} |
|
|
|
// 控制图片在屏幕居中
|
|
|
|
_image.initialX = (systemInfo.windowWidth - _image.initialWidth) >> 1 |
|
|
|
_image.initialY = (systemInfo.windowHeight - _image.initialHeight) >> 1 |
|
|
|
_image.initialX = 0//(systemInfo.windowWidth - _image.initialWidth) >> 1
|
|
|
|
_image.initialY = 0//(systemInfo.windowHeight - _image.initialHeight) >> 1
|
|
|
|
console.log(JSON.stringify(_image)) |
|
|
|
// 定义方框的位置和尺寸
|
|
|
|
let _cropBorder = {} |
|
|
|
_cropBorder.size = systemInfo.windowWidth * 0.8 |
|
|
|
_cropBorder.x = (systemInfo.windowWidth - _cropBorder.size) >> 1 |
|
|
|
_cropBorder.y = (systemInfo.windowHeight - _cropBorder.size * (4/3)) >> 1 |
|
|
|
_cropBorder.y = (systemInfo.windowHeight - _cropBorder.size) >> 1 |
|
|
|
that.setData({ |
|
|
|
src: _src, |
|
|
|
image: _image, |
|
|
@ -164,7 +164,7 @@ takePhoto() { |
|
|
|
// 画方框的外框
|
|
|
|
this.context.setStrokeStyle('white') |
|
|
|
// 往外画大一圈,这样在canvas上填充图片的时候框线就不会变细啦
|
|
|
|
this.context.strokeRect(cropBorder.x - 1, cropBorder.y - 1, cropBorder.size + 2, cropBorder.size * (4/3) + 2) |
|
|
|
this.context.strokeRect(cropBorder.x - 1, cropBorder.y - 1, cropBorder.size + 2, (cropBorder.size * (4/3)) + 2) |
|
|
|
this.context.draw() |
|
|
|
}, |
|
|
|
/** |
|
|
@ -230,13 +230,13 @@ takePhoto() { |
|
|
|
let srcY = (cropBorder.y - image.curY - 120 / 750 * that.data.windowWidth) / curImageHeight * src.height |
|
|
|
// 方框区域映射到源图片中的尺寸
|
|
|
|
let srcWidth = cropBorder.size / curImageWidth * src.width |
|
|
|
let srcHeight = cropBorder.size / curImageHeight * src.height |
|
|
|
let srcHeight = (cropBorder.size * (4/3)) / curImageHeight * src.height |
|
|
|
console.log('srcX = ' + srcX + ', srcY = ' + srcY + ', srcWidth = ' + srcWidth + ', srcHeight = ' + srcHeight + ', cropX = ' + cropBorder.x + ', cropY = ' + cropBorder.y + ', cropSize = ' + cropBorder.size) |
|
|
|
// 绘制图片不要透明啦,不然会看到重影
|
|
|
|
this.context.setFillStyle('rgba(0,0,0,1)') |
|
|
|
// 鉴于尺寸的精确度,方框内图片的覆盖在y方向会有微微的偏移,
|
|
|
|
// 但是一旦截图就返回上一页了,强迫症患者没有后悔的余地。
|
|
|
|
this.context.drawImage(src.path, srcX, srcY, srcWidth, srcHeight, cropBorder.x, cropBorder.y, cropBorder.size, cropBorder.size * (4/3)) |
|
|
|
this.context.drawImage(src.path, srcX, srcY, srcWidth, srcHeight, cropBorder.x, cropBorder.y, cropBorder.size, cropBorder.size) |
|
|
|
// 这里绘图一定要有回调,不然图片还没绘制完成就截图那就GG了
|
|
|
|
this.context.draw(true, function(res) { |
|
|
|
wx.canvasToTempFilePath({ |
|
|
|