微信小程序 拖动图片一边进行截取
简单实现一个画布截取图片的功能
原始图片超出指定尺寸，会进行隐藏，利用短边的宽度截取长边的宽度，拖动生成指定内容的图片
横图
竖图
var box_width = 600; //截取框尺寸 var box_height = 600; var tran_left = 0; //保存图片偏移值，默认不偏移 var tran_top = 0; var window_width = 750; //最外层宽度、高度 var window_height = 1000; var rpx = 0; //单位换算 Page({ /** * 页面的初始数据 */ data: { show_canvas: false }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { var that = this; wx.getSystemInfo({ success: function(res) { rpx = (750 / res.windowWidth).toFixed(2) that.setData({ bottom_height: res.windowHeight * rpx - 1000, height: res.windowHeight * rpx }) that.clipImg(); }, }) }, clipImg() { var that = this; wx.chooseImage({ count: 1, success: function(res) { var img = res.tempFilePaths[0] wx.getImageInfo({ src: img, success(res) { // console.log(res) var img_width = res.width * rpx, //转成rpx单位 img_height = res.height * rpx, img_left = 0, //图片左偏移 img_top = 0, //图片上偏移 clip_top = 0, //截取框上偏移 clip_left = 0; //截取框左偏移 var mask_width, mask_height, mask_top, mask_left; //图片遮罩层 var rate = (img_width / img_height).toFixed(2); //判断图片类型 if (rate >= 1) { //横图 img_width = box_height * rate; img_height = box_height; img_left = 0; img_top = 0; clip_top = (window_height - box_height) / 2; clip_left = (window_width - box_width) / 2; mask_width = (img_width - 600) / 2; mask_height = 600; mask_left = (window_width - img_width) / 2; mask_top = clip_top; } else { //竖图 img_height = box_width / rate; img_width = box_width; img_left = 0; img_top = 0; clip_top = (window_height - box_height) / 2; clip_left = (window_width - box_width) / 2; mask_width = 600; mask_height = (img_height - 600) / 2; mask_left = clip_left; mask_top = (window_height - img_height) / 2; } that.setData({ img_width: img_width, img_height: img_height, img_left: img_left, img_top: img_top, clip_top: clip_top, clip_left: clip_left, rate: rate, img: img, mask_width: mask_width, mask_height: mask_height, mask_top: mask_top, mask_left: mask_left }) } }) }, }) }, start(e) { this.pageX = e.touches[0].pageX; this.pageY = e.touches[0].pageY; }, move(e) { var pageX = e.touches[0].pageX; var pageY = e.touches[0].pageY; var moveX = (pageX - this.pageX) * rpx + tran_left; //tran_left先为图片初始偏移值，后为图片挪动偏移值 var moveY = (pageY - this.pageY) * rpx + tran_top; var rate = this.data.rate; if (rate >= 1) { if (moveX > this.data.mask_width) { //超出，取最小值 this.setData({ img_left: this.data.mask_width }) return; } if (moveX < -this.data.mask_width) { //超出，取最大值 this.setData({ img_left: -this.data.mask_width }) return; } this.setData({ img_left: moveX, }) } else { if (moveY > this.data.mask_height) { this.setData({ img_top: this.data.mask_height }) return; } if (moveY < -this.data.mask_height) { this.setData({ img_top: -this.data.mask_height }) return; } this.setData({ img_top: moveY }) } }, end(e) { tran_left = this.data.img_left; //偏移值重新赋值 tran_top = this.data.img_top; }, create() { var that = this; var ctx = wx.createCanvasContext(\'myCanvas\'); ctx.drawImage(that.data.img, 0, 0, that.data.img_width / rpx, that.data.img_height / rpx); ctx.draw(false, function() { var rate = that.data.rate; var x, y; if (rate >= 1) { x = (that.data.mask_width - that.data.img_left) / rpx; //x轴偏移的值 y = 0; } else { x = 0; y = (that.data.mask_height - that.data.img_top) / rpx; //y轴偏移的值 } wx.canvasToTempFilePath({ canvasId: \'myCanvas\', x: x, y: y, width: 600 / rpx, height: 600 / rpx, destWidth: 600 * 2 / rpx, //画布生成图片有点模糊，可以把像素密度*2或者截取框尺寸调大点 destHeight: 600 * 2 / rpx, quality: 1, success(res) { console.log(res) that.setData({ img: res.tempFilePath, show_canvas: true }) }, fail(res) { console.log(res); } }) }) }, previewImg() { wx.previewImage({ urls: [this.data.img], }) } })
<view class=\'box\'> <view class=\'top\'> <view class=\'img_box\' style=\'width:{{img_width}}rpx;height:{{img_height}}rpx;left:{{mask_left}}rpx;top:{{mask_top}}rpx\' wx:if=\'{{!show_canvas}}\'> <image class=\'img\' src=\'{{img}}\' style=\'width:{{img_width}}rpx;height:{{img_height}}rpx;left:{{img_left}}rpx;top:{{img_top}}rpx\'></image> <view class=\'img_mask {{rate>=1?"row":""}}\' style=\'width:{{img_width}}rpx;height:{{img_height}}rpx;left:{{mask_left}}rpx;top:{{mask_top}}rpx\' bindtouchstart=\'start\' bindtouchmove=\'move\' bindtouchend=\'end\'> <view class=\'img_mask_top\' style=\'width:{{mask_width}}rpx;height:{{mask_height}}rpx;\'></view> <view style=\'width:600rpx;height:600rpx;\'></view> <view class=\'img_mask_bottom\' style=\'width:{{mask_width}}rpx;height:{{mask_height}}rpx;\'></view> </view> </view> <view class=\'clip_box\' style=\'left:{{clip_left}}rpx;top:{{clip_top}}rpx\' bindtouchstart=\'start\' bindtouchmove=\'move\' bindtouchend=\'end\'></view> </view> <view class=\'btn\' style=\'height:{{bottom_height}}rpx\'> <view bindtap=\'create\'>生成图片</view> </view> </view> <canvas canvas-id=\'myCanvas\' class=\'canvas\' style=\'width:{{img_width}}rpx;height:{{img_height}}rpx;left:-{{height}}rpx;top:0\'> </canvas> <image class=\'preview_img {{show_canvas?"img_show":""}}\' src=\'{{img}}\' style=\'width:600rpx;height:600rpx;left:{{clip_left}}rpx;top:{{clip_top}}rpx\' bindtap=\'previewImg\' wx:if=\'{{show_canvas}}\'></image>
.box { width: 750rpx; height: 100vh; background: rgba(0, 0, 0, 1); position: relative; left: 0; top: 0; } .top { height: 1000rpx; } .img_box { position: absolute; overflow: hidden; } .img { position: absolute; } .img_mask { position: fixed; z-index: 5; } .row { display: flex; } .img_mask_top, .img_mask_bottom { background: rgba(0, 0, 0, 0.5); } .clip_box { width: 600rpx; height: 600rpx; box-sizing: border-box; background: rgba(225, 225, 225, 0.1); position: fixed; z-index: 10; } .btn { width: 750rpx; background: #000; display: flex; justify-content: center; align-items: center; font-size: 28rpx; position: fixed; z-index: 10; } .btn>view { width: 216rpx; height: 80rpx; border: 2rpx solid #01aa01; color: #01aa01; border-radius: 10rpx; display: flex; justify-content: center; align-items: center; } .canvas { position: absolute; } .preview_img { position: fixed; z-index: -1; } .img_show { z-index: 20; }