I have a signature pad in a laravel project that work in desktop but when I test in mobile it doesn't work.
I search a lot about this problem, I tried from another ways...
I check meta tags, I check cdnjs link, I create a new view to put just this peace of code and don't work. I don't know what is the problem.
If I go to demo page(http://szimek.github.io/signature_pad/) and try run this on mobile works!
So, I found an example and I tried to do this exactly in my laravel project and doesn't work. After that I put the same code in jsfiddle and works (https://jsfiddle.net/6brfy7gq/1/).
It works in desktop, I can draw, save image, all things but when I try mobile don't work. But as you can check the same code in jsfiddle works in mobile. I noticed that I can't scroll the page above canvas in jsfiddle mobile but in my laravel project it scrolls. Maybe this is the problem.
I don't know what to try more!
So, what is the diferences between my code and this?
In js file I have the code inside document ready like this:
$(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");
});
});
And html was loaded to a blade view like this:
<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')) }}
I can try anything...
Thank you a lot
Related
I have this image with a data URL and a button.
Now, I want to download that image using JavaScript. So far I got this code but after download the image its saying: It looks like we don't support this format.
<img src="data:image/png;base64,iVBORw0KGgoA....." class="filterImage">
<input type="button" name="button" value="Save" id="saveImg" class="btn btn-primary float-right">
function saveImage() {
let image = document.querySelector(".filterImage");
var img = new Image();
img.onload = function() {
let canvas = document.createElement("canvas");
let width = canvas.width;
let height = canvas.height;
let context = canvas.getContext("2d");
context.drawImage( image, 0, 0, width, height );
}
img.src = image.src;
let link = document.createElement('a');
link.download = "image.png";
link.style.opacity = "0";
link.href = image.src;
document.body.append(link);
link.click();
link.remove();
}
saveImage(); // For testing purpose I am directly calling this function
Is there anything I am wrong? How can I solve it?
Some browsers do not allow links to be clicked programmatically (by way of ~link.click()); for example, when I try to do so, Chrome navigates to "#blocked".
I am wondering if it is possible to add a download function to a click event purely in Javascript, for example, when a user clicks on an image, it gets automatically downloaded. For example I have an image tag <img src="filelocation" id="img"/> and want it to be downloaded on click. (I can't use "download="myfile.png".
Is there something like
$('#img').on('click',function(e){
img.download="myfile.png";
});
All the answers online suggest adding the download="..." into my tag
Thanks!
Maybe something like this:
document.getElementById('download').click();
<a id="download" href="https://assets.entrepreneur.com/content/16x9/822/20150721193719-solshero3.jpeg" download hidden></a>
Play with it: here
But if you really can't have the download attribute: Play this then.
Good luck!!
You can create a anchor element on click of the image and use .click() to trigger the click on that anchor even if its not attach to your page.
And if this still violate the requirement, then you may have to achieve it with server-side works.
See Change name of download in javascript
window.onload = function() {
// Fake image for testment
var canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 200;
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 200, 100);
ctx.fillStyle = 'cyan';
ctx.fillText('test', 50, 50);
var makeImageDownloadable = function(image, name) {
image.addEventListener('click', function() {
var a = document.createElement('a');
a.href = image.src;
// may need to check the datatype, or just write image to another tmp canvas first.
a.download = name + '.png';
a.click();
});
};
var image = new Image();
image.onload = function() {
document.querySelector('#holder').appendChild(image);
makeImageDownloadable(image, 'testimage');
};
image.src = canvas.toDataURL('image/png');
};
<div id="holder"></div>
You can use the HTML5 download attribute.
<a href="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" download="my_download.png"><img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg">
</a>
I am unsure of browser compatibility in this,better soultion would be to include server side scripts too.
JSFiddle: http://jsfiddle.net/k2rear94/
if u want this to be dynamic, try this.
$("SomeElement").onclick = function(){
$("<a id='tmp' href='link' download ></a>).appendTo("body");
$("#tmp").click();
$("#tmp").remove();
}
But remember, download attribute is not supported in IE.
I'm working on a multi part html questionnaire style form that has a lot of text questions along with a few images. On questions that are images the user is selects the image, i create a canvas element and display the resized image in it underneath the file input.
if (window.FileReader)
{
var file = element.files[0];
var $input = $(element);
var $fileName = file.name;
var reader = new FileReader();
reader.onload = function(e) {
var img = document.createElement("img");
img.src = e.target.result;
var dataID = $input.data("questionId");
var canvasID = "canvas_" + dataID;
$("#"+canvasID).remove();
var canvas = document.createElement("canvas");
canvas.setAttribute("id", canvasID);
canvas.setAttribute("height", "200");
canvas.setAttribute("width", "200");
var heightWidth = getHeightWidth(img);
canvas.height = heightWidth[0];
canvas.width = heightWidth[1];
var ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0, canvas.width, canvas.height);
var sectionID = "section_" + dataID;
$("#" + sectionID).append(canvas);
$("#file_title-" + dataID).val($fileName);
}
reader.readAsDataURL(file);
}
else
{
alert("This browser does not support image uploading.");
}
This works fine in chrome but not in safari (safari 8.x) on desktop or iOS. The problem in my code is that on Safari it returns height=0 width=0 from getHeightWidth() which gives me think the img isn't ready to be handled yet. This theory is further validated because if i change to a new picture and change back to the original it displays properly.
I'm really not sure where to start, any help debugging this would be greatly appreciated. Thanks everyone
The code assumes the image loading is synchronous, but it's asynchronous and should be assumed so even with data-URIs. If the image hasn't loaded properly its width and height attributes will be 0.
You can solve this by adding an onload handler for img, then move the code for detecting and setting size inside that handler (remember also to add an onerror handler as well in case the image file is corrupted).
I am having problems running the CamanJS script on mobile devices, i.e. iPad and iPhone's Safari / Chrome, and I've been trying to resolve it for days.
The test script is very simple:
1) Accepts browser file selection of image
2) Gets the image source using FileData, then drawing it into a canvas, then instantiate a Caman("#sample") object
3) Run some filter (either within onLoad of that image, or manually by clicking a button)
It works perfectly fine on all desktop browsers and the filters are also successfully applied, but when I try it on mobile devices like iOS Safari, the moment I try to instantiate the Caman object, my existing canvas #sample goes blank and reverts to the original canvas default background color, with no image loaded at all. I've tried instantiating the Caman object before image is drawn on canvas, image onLoad, or on demand after the canvas image is successfully drawn, but the end result is still the same - the canvas goes blank.
Below is my sample code, can someone please advise? Thank you for your kind assistance.
<script>
var caman = null;
function handleUpload(evt) {
var target = (evt.target) ? evt.target : evt.srcElement;
var files = target.files; // FileList object
var field = target.id;
var curCount = target.id.replace(/\D+/, "");
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
renderImage(e.target.result);
};
})(f);
reader.readAsDataURL(f);
}
}
function renderImage(imagedata) {
var canvas = document.getElementById("sample");
var ctx = canvas.getContext("2d");
// Render Preview
var previewImage = new Image();
previewImage.src = imagedata;
previewImage.onload = function() {
ctx.drawImage(previewImage, 0, 0, previewImage.width, previewImage.height);
caman = Caman("#sample", function () { this.sunrise().render(); });
};
}
function testProcess() {
//caman = Caman("#sample", function () { this.sunrise().render(); });
if (caman) {
caman.sunrise().render();
}
}
</script>
<form>
<input id="photo" name="photo" value="" type=file size="30" maxlength="50">
</form>
<canvas id="sample" width=300 height=300 style="background-color: #aaaaaa;"></canvas>
<br><br>Test Process<br><br>
<script>
document.getElementById('photo').addEventListener('change', handleUpload, false);
</script>
I had the same problem: worked on Chrome and Safari on my Mac, but did not work on Chrome or Safari on the iPhone 5s running iOS7. I solved by adding the data-caman-hidpi-disabled attribute to my canvas tag.
Try this:
<canvas id="sample" width=300 height=300 style="background-color: #aaaaaa;" data-caman-hidpi-disabled="true"></canvas>
According to the CamanJS website:
If a HiDPI display is detected, CamanJS will automatically switch to
the HiDPI version if available unless you force disable it with the
data-caman-hidpi-disabled attribute.
http://camanjs.com/guides/#BasicUsage
I'm trying to get my Sprite to show up because I'm making a game using Javascript with HTML5. This has worked for me before a while back, but now then it stopped working, so I decided to rewrite the script again -- it still doesn't work. Not sure what the problem is, but here's the Javascript code, and then, the HTML code. Thanks! Also - I'm using Chrome. And the Sprite has showed up in the Chrome internet browser before.
The Javascript Code:
var canvasBg = document.getElementById('canvasBg');
var ctxBg = canvasBg.getContext('2d');
var clearCanvasBtn = document.getElementById('clearCanvasBtn');
clearCanvasBtn.addEventListener('click',clearCanvas,false);
var gameWidth = canvasBg.width;
var gameHeight = canvasBg.height;
var imgSprite = new Image();
imgSprite.src = 'sprite.png';
imgSprite.addEventListener('load',drawBg,false);
function drawBg() {
var srcX = 0;
var srcY = 0;
var drawX = 0;
var drawY = 0;
ctxBg.drawImage(imgSprite,srcX,scrY,gameWidth,gameHeight,drawX,drawY,gameWidth,game Height);
}
function clearCanvas() {
ctxBg.clearRect(0,800,500);
}`
HTML code...:
`
Youtube HTML5 Game Dev Tutorial
<button id="clearCanvasBtn" type="button">Clear Canvas</button>
<canvas id="canvasBg" width="800px" height="500px" style="display:block;background:#ffffff;margin:100px auto 0px;"></canvas>;
<script src="game tester.js"></script>
`
You didn't say what "stopped working" means, but...
There is a new bug in Chrome when creating Image objects
So, if your code worked fine before but fails after a Chrome update, try this:
// instead of new Image()
var imgSprite = document.createElement("img");