ifmiss / wx-cropper Goto Github PK
View Code? Open in Web Editor NEW:scissors: 微信小程序 图片裁剪工具,简单易用
License: MIT License
:scissors: 微信小程序 图片裁剪工具,简单易用
License: MIT License
图片缩放好像有bug呀
我想添加旋转的功能,每次顺时针旋转90度,思路是用canvas画出图,然后用canvasContext.translate改变中点到图片中间,再用canvasContext.rotate旋转,最后用canvasToTempFilePath画图保存下来。
现在碰到问题在于canvasContext.translate和canvasContext.rotate这一步
无法正确设置到图片中点。。。
rotateImage() {
var _this = this
wx.downloadFile({
url: _this.data.imageSrc, //仅为示例,并非真实的资源
success: function (doloadRes) {
wx.getImageInfo({
src: _this.data.imageSrc,
success: function success(res) {
const ctx = wx.createCanvasContext('myCanvas')
ctx.translate(res.width / 2, res.height / 2);
ctx.rotate(90 * Math.PI / 180)
ctx.drawImage(doloadRes.tempFilePath);
ctx.draw(true, () => {
console.log('res.height', res.height)
console.log('res.width', res.width)
_this.imageW = res.height;
_this.imageH = res.width;
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: res.height,
height: res.width,
canvasId: 'myCanvas',
success: function (drawRes) {
// 成功获得地址的地方
console.log(drawRes.tempFilePath)
}
})
})
}
})
}
})
},
不知是否可以提供一些帮助?
剪裁后生成了透明的图片,好像是没有画到画布里面
第一次执行“生成图片”总是无法预览,debug发现首次生成文件为空。
将preview移到complete中可以解决这个问题:
wx.canvasToTempFilePath({
x: canvasL,
y: canvasT,
width: canvasW,
height: canvasH,
destWidth: canvasW,
destHeight: canvasH,
canvasId: 'myCanvas',
complete: function() {
wx.previewImage({
current: '', // 当前显示图片的http链接
urls: [res.tempFilePath] // 需要预览的图片http链接列表
})
}
})
您好可以使用在mpvue中吗?
当一次性拖到最底部或者一次性拖到最右侧时边线会超出图片所在位置
从电脑模拟器选择的图片路径是http开头的,所以点击生成图片的时候可以正常生成图片
从真机相册选择的图片路径是wxfile开头的,点击生成图片就死掉了,直接ctx.draw本地图片也是不行的.....
创建了一个测试工程,发现模拟器上面是可以生成的,真机上不能生成图片
有些图片只会剪裁图片中部分区域,请问可以缩放图片吗
您好 我使用你的库 发现长图 裁剪后是压缩的 而不是裁剪框的大小
话说生成图片了,地址也打印出来了,但是怎么把图片存起来呢?或者怎么用那个图片的地址呢?我不能直接打开啊。是要在小程序里面才能打开那个地址吗?
裁剪正常,和预览时的框框一致
拿这俩测试纯粹是因为公司里只有这俩
这俩机型是用户告诉我们的
偶尔出现,解决方法是关了小程序再开
选择多张图片,选择不同的裁剪比例(裁剪框我控制成了无法放大缩小)
移动裁剪框。裁剪。
安卓 OnePlus 6T 尝试类似步骤,无法复现。
iPhoneX 无法复现。
Testing 云测使用 iPhone 6S 无法复现
Testing 云测使用 iPhone 7 Plus 无法复现
请问作者有没有思路这可能是什么问题,如何进一步定位。
或者只能是 ┑( ̄Д  ̄)┍ 了
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.