we-plugin / we-cropper Goto Github PK
View Code? Open in Web Editor NEW微信小程序图片裁剪工具
Home Page: https://we-plugin.github.io/we-cropper/#/
License: MIT License
微信小程序图片裁剪工具
Home Page: https://we-plugin.github.io/we-cropper/#/
License: MIT License
如题
例子页面中的avatarUpload/upload页面的wecropper.getCropperImage()方法没用,在页面内new了weCropper(cropperOpt)一个新对象,但是ios真机打印出来,对象里面没有了方法
【设备】
苹果6
【问题】
图片剪切后,也添加了水印,保存图片,生成的图片及水印看上去比保存前要模糊
安卓手机未测试
有什么紧急解决办法么?谢谢
你们出现过这错误吗?
getImageInfo:fail download image fail
iOS11 中 缩放移动被裁剪对象非常卡顿,但在IOS10就不会,大家也是吗
在Android机也不会卡顿,就是在iOS11 中非常卡顿
微信客户端的版本都是6.6.3最新版的
选择原图(2.9M)的文件,发现画布显示不了图片
工具上返回的是http的路径,但是真机上是返回‘wxfile://tmp...’
【设备】
苹果6
【问题现象】
1、页面添加了一个手动加水印的按钮
添加水印
2、函数定义
addMark() {
this.wecropper.on('beforeDraw', (ctx) => {
console.log(before canvas draw,i can do something
)
console.log(current canvas context:
, ctx)
// 那就尝试在图片上加个水印吧
ctx.setFontSize(14)
ctx.setFillStyle('#990033')
ctx.fillText('@greatwe-cropper', 20, 350)
})
},
3、点击添加水印按钮,图片上不能立刻显示水印,移动下图片,水印添加成功,显示正常
在苹果6手机和电脑模拟器上都有这个问题,安卓手机未测试
而且高度总是跟底部差一块
根据wx的官方文档 canvasToTempFilePath api是可以自适应的,是否可以考虑在调用api时候使用自适应来达到截图自适应,而且现在确实出现了截图后宽高失真的情况
wx.canvasToTempFilePath(OBJECT)
把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径。
OBJECT参数说明:
参数 类型 必填 说明 最低版本
x Number 否 画布x轴起点(默认0) 1.2.0
y Number 否 画布y轴起点(默认0) 1.2.0
width Number 否 画布宽度(默认为canvas宽度-x) 1.2.0
height Number 否 画布高度(默认为canvas高度-y) 1.2.0
destWidth Number 否 输出图片宽度(默认为width) 1.2.0
destHeight Number 否 输出图片高度(默认为height) 1.2.0
canvasId String 是 画布标识,传入 的 cavas-id
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数(调用成功、失败都会执行)
示例代码
wx.canvasToTempFilePath({
x: 100,
y: 200,
width: 50,
height: 50,
destWidth: 100,
destHeight: 100,
canvasId: 'myCanvas',
success: function(res) {
console.log(res.tempFilePath)
}
})
`
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success (res) {
const src = res.tempFilePaths[0]
// 获取裁剪图片资源后,给data添加src属性及其值
self.wecropper.pushOrign(src)
}
})
`
首先是全部显示图片 要手指移动一下才能显示裁剪框
我试过在上传图片更新canvas 但是不成功 还是会先全部显示
但是用手指移动一下就好了 我觉得是不是 self.updateCanvas(); 添加错地方了
提交ISSUE前请确保已认真阅读以下内容
Please read the following information carefully before you open an issue.
在提交issue之前必须确认以下问题:
Please make sure you understand the following points:
必须是一个bug或者功能新增。
It must be a bug or a feature request
必须是we-cropper相关问题,原生小程序问题去开发者论坛。
It must be a we-cropper issue.
已经在issue中搜索过,并且没有找到相似的issue或者解决方案。
I searched issue already but I did't find any relevant issues or solutions.
完善下面模板中的信息
Please filled out the following template
阅读完后请在提交的issue中删除以上内容,包括分割线
DELETE THE INFORMATION ABOVE(INCLUDE THE SEPARATION LINE) BEFORE YOU OPEN AN ISSUE
[问题描述:站在其它人的角度尽可能清晰地、简洁地把问题描述清楚]
[Description of the issue]
[如何重现问题]
[How to reproduce the issue]
[实际表现]
[Observed Results]
[期望表现]
[Expected Results]
// TODO(you): code or logs ohere to reproduce the problem
后续后支持图片旋转这个功能吗
我的画布裁切图片的区域是个正方形,下面还要画几行文字,这个we-cropper.js支持吗?
提交ISSUE前请确保已认真阅读以下内容
Please read the following information carefully before you open an issue.
在提交issue之前必须确认以下问题:
Please make sure you understand the following points:
必须是一个bug或者功能新增。
It must be a bug or a feature request
必须是we-cropper相关问题,原生小程序问题去开发者论坛。
It must be a we-cropper issue.
已经在issue中搜索过,并且没有找到相似的issue或者解决方案。
I searched issue already but I did't find any relevant issues or solutions.
完善下面模板中的信息
Please filled out the following template
阅读完后请在提交的issue中删除以上内容,包括分割线
DELETE THE INFORMATION ABOVE(INCLUDE THE SEPARATION LINE) BEFORE YOU OPEN AN ISSUE
[问题描述:站在其它人的角度尽可能清晰地、简洁地把问题描述清楚]
[Description of the issue]
[如何重现问题]
[How to reproduce the issue]
[实际表现]
[Observed Results]
[期望表现]
[Expected Results]
// TODO(you): code or logs ohere to reproduce the problem
是我操作不对还是什么???
wepy框架能用么?有具体用法?
提交ISSUE前请确保已认真阅读以下内容
Please read the following information carefully before you open an issue.
在提交issue之前必须确认以下问题:
Please make sure you understand the following points:
必须是一个bug或者功能新增。
It must be a bug or a feature request
必须是we-cropper相关问题,原生小程序问题去开发者论坛。
It must be a we-cropper issue.
已经在issue中搜索过,并且没有找到相似的issue或者解决方案。
I searched issue already but I did't find any relevant issues or solutions.
完善下面模板中的信息
Please filled out the following template
阅读完后请在提交的issue中删除以上内容,包括分割线
DELETE THE INFORMATION ABOVE(INCLUDE THE SEPARATION LINE) BEFORE YOU OPEN AN ISSUE
[问题描述:站在其它人的角度尽可能清晰地、简洁地把问题描述清楚]
[Description of the issue]
[如何重现问题]
[How to reproduce the issue]
[实际表现]
[Observed Results]
[期望表现]
[Expected Results]
// TODO(you): code or logs ohere to reproduce the problem
new weCropper(data)
.on('ready', function (ctx) {
console.log(`wecropper is ready for work!`)
})
.on('beforeImageLoad', (ctx) => {
console.log(`before picture loaded, i can do something`)
console.log(`current canvas context:`, ctx)
wx.showToast({
title: '上传中',
icon: 'loading',
duration: 20000
})
})
.on('imageLoad', (ctx) => {
console.log(`picture loaded`)
console.log(`current canvas context:`, ctx)
wx.hideToast()
})
VM122:2 Error: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
at Error (native)
at Object.invokeCanvasToDataUrl_100088 (http://1397529163.debug.open.weixin.qq.com/example/network/network.html:24:10842)
at u (:1:2257)
at :1:4644
代码如下:
import weCropper from '../../we-cropper/dist/weCropper.js';
var app = getApp();
const device = wx.getSystemInfoSync() // 获取设备信息
const width = 350;
const height = 300;
Page({
data: {
"choseImg": "choseImageBtn.png",
"chosenImg": "",
"indexBk": "index-bk.png",
wecropper: null,
cropperOpt: {
id: 'cropper',
width,
height,
scale: 2.5,
zoom: 8,
cut: {
x: 0,
y: 0,
width: 350,
height: 300
}
}
},
onLoad: function() {
var that = this;
// 页面加载时初始化画布
const { data } = this
// 若同一个页面只有一个裁剪容器,在其它Page方法中可通过this.wecropper访问实例
var wecropper = new weCropper(that)
.on('ready', (ctx) => {
})
.on('beforeImageLoad', (ctx) => {
wx.showToast({
title: '上传中',
icon: 'loading',
duration: 20000
})
})
.on('imageLoad', (ctx) => {
wx.hideToast()
});
// 加载页面请求用户数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
"userInfo": userInfo,
"wecropper": wecropper,
"date": ((new Date).getDate() + "." + ((new Date).getMonth() + 1) + "." + (new Date).getFullYear())
});
});
},
// 选择图片函数
choseImg: function(evt) {
var that = this;
console.log("点击按钮!");
// 选择完毕后,显示等待提示
wx.chooseImage({
count: 1,
success: function(res) {
var tempFilePaths = res.tempFilePaths;
wx.showLoading({
title: "加工中",
complete: function() {
setTimeout(function() {wx.hideLoading()}, 500);
}
});
that.setData({
"chosenImg": tempFilePaths,
"showBtnLine": "block",
"showChose": "none"
});
},
fail: function(errInfo) {
wx.showLoading({
title: "加工失败",
complete: function() {
setTimeout(function() {wx.hideLoading()}, 1000);
}
});
}
});
},
// 剪切图片
modifyImg: function() {
var that = this,
src = that.data.chosenImg[0];
this.wecropper.pushOrign(src);
this.wecropper.getCropperImage((src) => {
that.setData({
"chosenImg": src
});
});
// 保存图片到服务器
//that.saveImg();
}
});
iOS 中 缩放移动被裁剪对象有些卡顿,大家也是吗?
在 Android 中的流畅度 高于 iOS,大家也是吗?
谢谢~~
RT
this.wecropper.getCropperImage((src) => {
console.log(src) ; //该值是null
if (src) {
wx.previewImage({
current: '',
urls: [src]
})
} else {
console.log('获取图片地址失败,请稍后重试')
}
})
更新频次:每5分钟
我上传多张,请问如何循环去裁剪每一张图片?
感谢作者,希望越做越好
能否给支持下😙
由于工作原因(懒惰/逃),开源的事情搁置了很久,很多存在的问题也一直没有解决。
最近打算重拾起来,计划开发2.0版本,希望得到大家的积极反馈。
内容不限,可以是新功能,可以是批评...谢谢大家支持!
或者有啥办法旋转已写入画布的图片吗
现在都是全局变量写死的 如果要在onload里面 获得需要裁剪的宽高,肿么办呢?
编辑器中正好差50px,手机上则小于50px(vivo x6)。
尝试去掉屏幕高度-50,电脑上似乎可以了,但是手机上就变成全屏的,按不了按钮了。
[如何重现问题]
[How to reproduce the issue]
单独取出局部切割图片文件,style,we-copper。功能没问题,但是按钮和画布间多了个白条
[实际表现]
[Observed Results]
[期望表现]
[Expected Results]
不想要白条
// TODO(you): code or logs ohere to reproduce the problem
cropperOpt 里面的宽高能不能动态修改。
或者是清空画布内容,重新开始初始化。
苹果5s上面选择图片上传不了
getCropperImage:function() {
this.wecropper.getCropperImage((src) => {
if (src) { //src是空的
wx.previewImage({
current: '', // 当前显示图片的http链接
urls: [src] // 需要预览的图片http链接列表
})
} else {
console.log('获取图片地址失败,请稍后重试')
}
})
},
这是一个很必要的功能,没有这个各种不方便的说。
还有,使用开发工具生成的图片比例不对
ios裁剪图片的时候 确定按钮点击无效,重新选择是可以的,想问问这是因为什么,之前用着是没有问题的
[问题描述:站在其它人的角度尽可能清晰地、简洁地把问题描述清楚]
[Description of the issue]
选择图片后,拖动图片马上黑屏,点击生成是空白,安卓苹果必现
Platform: [开发者工具/iOS/Andriod/Web]
1.02.1801081
Platform version: [对应工具或者iOS或者Andriod的版本号]
android 7.0,ios11
Wechat version: [微信版本号]
6.6.1.1220
Wechatlib1.9.5
we-cropper version: [在package.json里]
"libVersion": "1.9.1",
other version: [如果是插件问题,请列出问题插件的版本号]
[如何重现问题]
手动拖动必现
[实际表现]
黑屏
[期望表现]
正常显示并选中
// TODO(you): code or logs ohere to reproduce the problem
提交ISSUE前请确保已认真阅读以下内容
Please read the following information carefully before you open an issue.
在提交issue之前必须确认以下问题:
Please make sure you understand the following points:
必须是一个bug或者功能新增。
It must be a bug or a feature request
必须是we-cropper相关问题,原生小程序问题去开发者论坛。
It must be a we-cropper issue.
已经在issue中搜索过,并且没有找到相似的issue或者解决方案。
I searched issue already but I did't find any relevant issues or solutions.
完善下面模板中的信息
Please filled out the following template
阅读完后请在提交的issue中删除以上内容,包括分割线
DELETE THE INFORMATION ABOVE(INCLUDE THE SEPARATION LINE) BEFORE YOU OPEN AN ISSUE
[问题描述:站在其它人的角度尽可能清晰地、简洁地把问题描述清楚]
[Description of the issue]
[如何重现问题]
[How to reproduce the issue]
[实际表现]
[Observed Results]
[期望表现]
[Expected Results]
// TODO(you): code or logs ohere to reproduce the problem
大牛 我想问下头像上传后裁剪的图片上半部分裁剪下来的 下半部分是灰色的,而且图片的有拉伸的变化,,怎么设置解决这个问题?
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.