fmui-base 2.2.53 → 2.2.54

package/README.md

@@ -3,6 +3,7 @@
 ---npm publish
 
 ## 更新日志 
+- 2.2.54: 手写签名样式调整
 - 2.2.53: 表单字段支持手写签名
 - 2.2.52: 时间字段宏值赋值不生效
 - 2.2.51: 北京CA跳转小程序

package/lib/form/form.js

@@ -3831,7 +3831,7 @@ var PageHome = function (_React$Component) {
                 { flex: 1, className: 't-PR' },
                 _react2.default.createElement(
                   'span',
-                  { className: "t-ML16", style: { color: t.state.itemParam.formStyleObj.contentStyle.color }, onClick: this.noticeClick.bind(this, t.state.itemParam.explainUrl) },
+                  { style: { color: t.state.itemParam.formStyleObj.contentStyle.color }, onClick: this.noticeClick.bind(this, t.state.itemParam.explainUrl) },
                   t.state.itemParam.explain
                 )
               ),

package/lib/signature/draw.js

@@ -26,7 +26,7 @@ function Draw(canvas, degree) {
 
   width = parseFloat(width);
   // height = parseFloat(height);
-  height = width / 2;
+  height = width / 2 - 30;
 
   // debugger;
   this.canvas = canvas;

package/lib/signature/sign.js

@@ -113,31 +113,51 @@ var Page = function (_React$Component) {
             if (disabled) {
                 return;
             }
-            formData.append("dir", "draw");
-            var date = new Date();
-            var time = date.getTime();
-            formData.append("file", t.state.draw.dataURLtoBlob(t.state.draw.getPNGImage()), time + ".png");
-            var url = t.state.baseContext + "/api/m/plugin/attachment/mobile/createFile?token=" + t.state.token;
-            fetch(url, {
-                method: "POST",
-                body: formData
-            }).then(function (res) {
-                if (res.ok) {
-                    res.json().then(function (obj) {
-                        t.setState({
-                            fileId: obj.data[0].id
+
+            // 获取原始 dataURL，然后在临时 canvas 上绘制白色背景并合并原图，再导出新的 dataURL 上传
+            var origDataURL = t.state.draw.getPNGImage();
+            var img = new Image();
+            img.onload = function () {
+                var tmpCanvas = document.createElement('canvas');
+                tmpCanvas.width = img.width;
+                tmpCanvas.height = img.height;
+                var ctx = tmpCanvas.getContext('2d');
+                ctx.fillStyle = '#ffffff';
+                ctx.fillRect(0, 0, tmpCanvas.width, tmpCanvas.height);
+                ctx.drawImage(img, 0, 0);
+
+                var newDataURL = tmpCanvas.toDataURL('image/png');
+
+                formData.append("dir", "draw");
+                var date = new Date();
+                var time = date.getTime();
+                formData.append("file", t.state.draw.dataURLtoBlob(newDataURL), time + ".png");
+                var url = t.state.baseContext + "/api/m/plugin/attachment/mobile/createFile?token=" + t.state.token;
+                fetch(url, {
+                    method: "POST",
+                    body: formData
+                }).then(function (res) {
+                    if (res.ok) {
+                        res.json().then(function (obj) {
+                            t.setState({
+                                fileId: obj.data[0].id
+                            });
+                            t.props.onChange(obj.data);
                         });
-                        t.props.onChange(obj.data);
-                    });
-                    _Popup2.default.hide();
-                } else if (res.status == 401) {
-                    alert("手写签名图片上传报错了");
-                } else {
-                    alert("手写签名图片上传失败");
-                }
-            }).catch(function (error) {
-                alert("手写签名图片上传接口报错了");
-            });
+                        _Popup2.default.hide();
+                    } else if (res.status == 401) {
+                        alert("手写签名图片上传报错了");
+                    } else {
+                        alert("手写签名图片上传失败");
+                    }
+                }).catch(function (error) {
+                    alert("手写签名图片上传接口报错了");
+                });
+            };
+            img.onerror = function () {
+                alert("生成带白色背景的图片失败");
+            };
+            img.src = origDataURL;
         }
 
         //旋转
@@ -198,8 +218,8 @@ var Page = function (_React$Component) {
             var divDom = document.getElementById("canvasBoxDiv");
             var divWidth = divDom.clientWidth || divDom.offsetWidth;
             var divHeigth = divDom.clientHeight || divDom.offsetHeight;
-            can1.style.width = divWidth - 52 + "px";
-            can1.style.height = divHeigth - 5 + "px";
+            can1.style.width = divWidth - 10 + "px";
+            can1.style.height = divHeigth - 30 + "px";
 
             setTimeout(function () {
                 // document.getElementsByTagName('canvas')[0].style.border = '0.5px solid #ccc';
@@ -216,14 +236,13 @@ var Page = function (_React$Component) {
         key: 'listenCanvas',
         value: function listenCanvas(cav) {
             var t = this;
-            console.log("cav===" + cav);
             cav.addEventListener('touchstart', function (e) {
                 // document.getElementById('clear_i').removeAttribute("class");
                 // document.getElementById('clear_i').setAttribute("class",'iconfont icon-dele2 t-FS18 t-FCddfontblue-60');
                 document.getElementsByClassName('download_btn')[0].removeAttribute("disabled");
 
                 document.getElementsByClassName('can-div')[0].removeAttribute("style");
-                document.getElementsByClassName('can-div')[0].setAttribute("style", "background:#fff");
+                // document.getElementsByClassName('can-div')[0].setAttribute("style","background:#fff");
             }, false);
         }
     }, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fmui-base",
-  "version": "2.2.53",
+  "version": "2.2.54",
   "title": "fmui-base",
   "description": "fmui移动端组件",
   "main": "lib/index.js",