Question

我在laravel项目中有一个签名板，可以在桌面上工作，但是当我在移动设备上测试时，它不起作用。

我搜索了很多关于这个问题，我尝试了另一种方式...... 我检查元标记，我检查cdnjs链接，我创建一个新的视图，只是把这个代码和平，并不起作用。我不知道是什么问题。

如果我转到演示页面（http://szimek.github.io/signature_pad/）并尝试在移动设备上运行它！

所以，我找到了一个例子，我试图在我的laravel项目中完成这个并且不起作用。之后我将相同的代码放在jsfiddle中并运行（https://jsfiddle.net/6brfy7gq/1/）。

它适用于桌面，我可以绘制，保存图像，所有的东西，但当我尝试移动时不起作用。但是你可以在jsfiddle中检查相同的代码在移动设备中工作。我注意到我无法在jsfiddle mobile中滚动canvas上方的页面，但是在我的laravel项目中它会滚动。也许这就是问题所在。我不知道该怎么做！

那么，我的代码与此之间的差异是什么？在js文件中，我有document ready内的代码，如下所示：

      $(document).ready(function ()
      {
        var wrapper = document.getElementById("signature-pad");
        var clearButton = wrapper.querySelector("[data-action=clear]");
        var savePNGButton = wrapper.querySelector("[data-action=save-png]");
        var canvas = document.getElementById('signature-canvas');



        // Adjust canvas coordinate space taking into account pixel ratio,
        // to make it look crisp on mobile devices.
        // This also causes canvas to be cleared.
        function resizeCanvas() {
            var ratio =  Math.max(window.devicePixelRatio || 1, 1);
            canvas.width = canvas.offsetWidth * ratio;
            canvas.height = canvas.offsetHeight * ratio;
            canvas.getContext("2d").scale(ratio, ratio);
        }
        // On mobile devices it might make more sense to listen to orientation change,
        // rather than window resize events.
        window.onresize = resizeCanvas;
        resizeCanvas();
        var signaturePad = new SignaturePad(canvas);


        function download(dataURL, filename) {
          var blob = dataURLToBlob(dataURL);
          var url = window.URL.createObjectURL(blob);

          var a = document.createElement("a");
          a.style = "display: none";
          a.href = url;
          a.download = filename;

          document.body.appendChild(a);
          a.click();

          window.URL.revokeObjectURL(url);
        }

        // One could simply use Canvas#toBlob method instead, but it's just to show
        // that it can be done using result of SignaturePad#toDataURL.
        function dataURLToBlob(dataURL) {
          // Code taken from https://github.com/ebidel/filer.js
          var parts = dataURL.split(';base64,');
          var contentType = parts[0].split(":")[1];
          var raw = window.atob(parts[1]);
          var rawLength = raw.length;
          var uInt8Array = new Uint8Array(rawLength);

          for (var i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
          }

          return new Blob([uInt8Array], { type: contentType });
        }

        clearButton.addEventListener("click", function (event) {
          signaturePad.clear();
        });


        savePNGButton.addEventListener("click", function (event) {

          var dataUrl = signaturePad.toDataURL();
          //document.getElementById('imagen_firma').src = dataUrl;
          var image = dataUrl.replace(/^data:image\/(png|jpg);base64,/, "");
          $('input[name=signatureImage]').val(image);
          //download(dataURL, "signature.png");

        });


      });

html被加载到这样的刀片视图中：

<div class="sub-title">
      <span>Signature</span>
    </div>
    <div class="data new" >

      <div id="signature-pad" class="signature-pad">
        <div class="signature-pad--body">
          <canvas id="signature-canvas" style="width:650px;height:420px;max-width:100%;border:8px #CCC solid;background-color: white;"></canvas>
        </div>
        <div class="signature-pad--footer">
          <div class="description">Sign above</div>

          <div class="signature-pad--actions">
            <div>
              <i class="button clear icon-cancel" data-action="clear" style="font-size:2em;" title="Clear"></i>
              <button type="button" class="button save" data-action="save-png" style="visibility:hidden">Save as PNG</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{ Form::hidden('signatureImage', old('signatureImage')) }}

我可以尝试任何事情......

非常感谢

签名板不会在移动设备

0 个答案: