vue-sign-canvas icon indicating copy to clipboard operation
vue-sign-canvas copied to clipboard

imgType为"jpeg"时,输出的base64是全黑的图片

Open zwj9297 opened this issue 3 years ago • 8 comments

配置如下: options: { lastWriteSpeed: 1, //书写速度 [Number] 可选 lastWriteWidth: 2, //下笔的宽度 [Number] 可选 lineCap: 'round', //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square] 正方形线帽 lineJoin: 'round', //线条交汇时边角的类型 [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。 canvasWidth: 640, //canvas宽高 [Number] 可选 canvasHeight: 240, //高度 [Number] 可选 isShowBorder: true, //是否显示边框 [可选] bgColor: '#FFF', //背景色 [String] 可选 注:这背景色仅仅只是canvas背景,保存的图片仍然是透明的 borderWidth: 1, // 网格线宽度 [Number] 可选 borderColor: theme['border-color-base'], //网格颜色 [String] 可选 writeWidth: 5, //基础轨迹宽度 [Number] 可选 maxWriteWidth: 30, // 写字模式最大线宽 [Number] 可选 minWriteWidth: 5, // 写字模式最小线宽 [Number] 可选 writeColor: theme['text-color'], // 轨迹颜色 [String] 可选 isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框 imgType:'png' //下载的图片格式 [String] 可选为 jpeg canvas本是透明背景的 } 请问是什么原因?

zwj9297 avatar Oct 27 '20 02:10 zwj9297

看到了,因为canvas的画板属性未设置颜色,jpeg的情况下可能会出现刚刚那种情况显示的黑色的,但是下载的图片并非黑色。

langyuxiansheng avatar Oct 27 '20 04:10 langyuxiansheng

看到了,因为canvas的画板属性未设置颜色,jpeg的情况下可能会出现刚刚那种情况显示的黑色的,但是下载的图片并非黑色。

请问能否支持设置背景色呢,我不需要下载的,只是要base64的不透明底的图片

zwj9297 avatar Nov 19 '20 02:11 zwj9297

看到了,因为canvas的画板属性未设置颜色,jpeg的情况下可能会出现刚刚那种情况显示的黑色的,但是下载的图片并非黑色。

请问能否支持设置背景色呢,我不需要下载的,只是要base64的不透明底的图片

这个如果要从插件这边解决的话,需要更改画布的底色,但是目前的需求来看,大部分的底色基本上都是透明的,其实有个解决方案,就是将设置的背景色一起保存到服务端,在回显的时候将背景渲染到对应的dom容器,即可实现背景 + 画笔轨迹.如果颜色是固定值,直接写死到对应的容器背景即可

langyuxiansheng avatar Nov 19 '20 02:11 langyuxiansheng

这个情况我遇到过,你把body的背景色去掉

nullhan avatar Feb 24 '21 02:02 nullhan

@langyuxiansheng 能否在组件上加一个选项,控制bgcolor的值是否要被渲染到canvas上。 1、false(默认),逻辑依旧按照原始的通过style设置背景色 2、true,颜色会被渲染到canvas上。

这样做的原因,背景色可能在后续的业务配置中发生变更。

1、如果存储数据中一起把底色存起来,也可以,但是增加了逻辑 2、如果不存储使用实时的颜色配置展示签名图片,可能会出现以前设置是红色笔迹,某天修改背景色为红色。这没法看了。

ginkosen avatar Apr 09 '21 02:04 ginkosen

@langyuxiansheng 能否在组件上加一个选项,控制bgcolor的值是否要被渲染到canvas上。 1、false(默认),逻辑依旧按照原始的通过style设置背景色 2、true,颜色会被渲染到canvas上。

这样做的原因,背景色可能在后续的业务配置中发生变更。

1、如果存储数据中一起把底色存起来,也可以,但是增加了逻辑 2、如果不存储使用实时的颜色配置展示签名图片,可能会出现以前设置是红色笔迹,某天修改背景色为红色。这没法看了。

感谢反馈.之前是考虑过这个的.若如此做的话,就无法输出透明背景的图片了. 但是这个功能呢可以考虑后面加入,后面空了的时候再做了

langyuxiansheng avatar Apr 09 '21 02:04 langyuxiansheng

@langyuxiansheng 能否在组件上加一个选项,控制bgcolor的值是否要被渲染到canvas上。

1、false(默认),逻辑依旧按照原始的通过style设置背景色

2、true,颜色会被渲染到canvas上。

这样做的原因,背景色可能在后续的业务配置中发生变更。

1、如果存储数据中一起把底色存起来,也可以,但是增加了逻辑

2、如果不存储使用实时的颜色配置展示签名图片,可能会出现以前设置是红色笔迹,某天修改背景色为红色。这没法看了。

感谢反馈.之前是考虑过这个的.若如此做的话,就无法输出透明背景的图片了. 但是这个功能呢可以考虑后面加入,后面空了的时候再做了

感谢回复,我给的方案允许使用者自己选择。毕竟有些场景下签名背景肯定是要保留。

ginkosen avatar Apr 09 '21 04:04 ginkosen

@langyuxiansheng 能否在组件上加一个选项,控制bgcolor的值是否要被渲染到canvas上。

1、false(默认),逻辑依旧按照原始的通过style设置背景色

2、true,颜色会被渲染到canvas上。

这样做的原因,背景色可能在后续的业务配置中发生变更。

1、如果存储数据中一起把底色存起来,也可以,但是增加了逻辑

2、如果不存储使用实时的颜色配置展示签名图片,可能会出现以前设置是红色笔迹,某天修改背景色为红色。这没法看了。

感谢反馈.之前是考虑过这个的.若如此做的话,就无法输出透明背景的图片了. 但是这个功能呢可以考虑后面加入,后面空了的时候再做了

感谢回复,我给的方案允许使用者自己选择。毕竟有些场景下签名背景肯定是要保留。

这个功能在后面空了就开发,预计下个版本发布.

langyuxiansheng avatar Apr 09 '21 04:04 langyuxiansheng