我在 laravel 项目中有一个签名板,可以在桌面上工作,但是当我在移动设备上测试时它不起作用。
我搜索了很多关于这个问题的信息,我尝试了另一种方法......我检查了元标记,我检查了 cdnjs 链接,我创建了一个新视图来放置这个和平的代码并且不起作用。我不知道是什么问题。
如果我去演示页面(http://szimek.github.io/signature_pad/)并尝试在移动作品上运行它!
所以,我找到了一个例子,我试图在我的 laravel 项目中完全做到这一点并且不起作用。之后,我将相同的代码放入 jsfiddle 并运行(https://jsfiddle.net/6brfy7gq/1/)。
它适用于桌面,我可以绘制,保存图像,但当我尝试移动时不起作用。但是您可以在 jsfiddle 中检查相同的代码在移动设备中的工作。我注意到我无法canvas
在 jsfiddle mobile 中滚动上面的页面,但在我的 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')) }}
我可以尝试任何东西...
十分感谢