Colouring In Drag and Drop Mobile Postcard Tutorial

Colouring In Drag and Drop Mobile Postcard Tutorial

Yesterday’s Colouring In Drag and Drop Postcard Tutorial mentioned two issues with its Postcard creation functionalities that needed further attention …

We have more work to do regarding data limits (even with hashtagging) using mobile platforms and the Take Photo idea, and we have some text positioning to fix also …

… and today we look into that a bit more.

Regarding “We have more work to do regarding data limits (even with hashtagging) using mobile platforms” we were finding the “Take Photo” iOS Camera app functionality was producing images of more than 3000×4000 and as such, though amazingly it can still work in non-mobile, we were not surprised it didn’t work when shaping to create the mainly hashtagged email link required to share a Postcard with an emailee (ie. email recipient). So we did some pruning …


var lesserinurl='';

function checkspag() {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && document.getElementById('result').innerHTML.trim() != '' && lesserinurl == '' && document.getElementById('result').innerHTML.indexOf('data:') == 0) {
newimg=document.createElement('img');
newimg.onload = function() {
// draw the image onto the canvas
//alert(11);
newcanvas=document.getElementById('mymobilecanvas'); //document.createElement('canvas');
//alert(111);
if (newimg.width > 800) {
newcanvas.width=800;
newcanvas.height=Math.round(newimg.height * 800 / newimg.width);
//alert('Wh=' + newcanvas.width + 'x' + newcanvas.height);
newcanvas.getContext('2d').drawImage(newimg, 0, 0, newimg.width, newimg.height, 0, 0, newcanvas.width, newcanvas.height);
} else {
newcanvas.width=newimg.width;
//alert('' + newimg.width + 'x' + newimg.height);
newcanvas.height=newimg.height;
//alert('wh=' + newcanvas.width + 'x' + newcanvas.height);
newcanvas.getContext('2d').drawImage(newimg, 0, 0);
}
lesserinurl=newcanvas.toDataURL('image/jpeg', 0.1);
document.getElementById('result').innerHTML=lesserinurl;
//document.getElementById('inurl').value=lesserinurl;
//alert(lesserinurl);
//document.getElementById('inurl').blur();
}
newimg.src = document.getElementById('result').innerHTML;
setTimeout(checkspag, 5000);
} else if (document.getElementById('result').innerHTML.trim() != '' && multistyle == '') {
imdu=document.getElementById('result').innerHTML.trim();
document.getElementById('result').innerHTML='';
document.getElementById('cbi').src='/HTMLCSS/client_browsing.htm?d=' + Math.floor(Math.random() * 1987867564) + '&wording=Allimages%20images%2E%20';
//alert(' #mytable { background:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),URL(' + imdu.replace(/\ /g,'+').substring(0,20) + '); background-repeat:no-repeat; background-size:contain; } ');
if (document.getElementById('ddstyle')) {
if (document.getElementById('ddstyle').innerHTML.indexOf(imdu) == -1) {
document.getElementById('ddstyle').innerHTML=' #mytable { background-image:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),URL(' + imdu.replace(/\ /g,'+') + '); background-repeat:no-repeat; background-size:contain; } ';
}
} else {
if (document.getElementById('dstyle').innerHTML.indexOf(imdu) == -1) {
//alert('Here');
document.getElementById('dstyle').innerHTML+=' #mytable { background-image:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),URL(' + imdu.replace(/\ /g,'+') + '); background-repeat:no-repeat; background-size:contain; } ';
}
}
setTimeout(checkspag, 5000);
} else {
setTimeout(checkspag, 5000);
}
}


… using the great HTML5 canvas element invention, and found it could send such a pruned down postcard, though we are not ruling out future tweaks that may add back some resolution and size into the future. We’ll see.

And regarding “we have some text positioning to fix”, our hunch about the offset needed to fix being the (opposite of the) amount to the top of the imagery in a normal Colouring In webpage, panned out …


var postcard=false;
var origmytablerect=null;

setTimeout(function(){
origmytablerect=document.getElementById('mytable').getBoundingClientRect();
console.log('356:' + origmytablerect.top);
var woois=window.open('', '_blank', 'top=50,left=50,width=800,height=800');
if (1 == 1) {
woois.document.write('<html>' + document.head.outerHTML.replace('postc' + 'ard=false', 'postc' + 'ard=true') + document.body.outerHTML + '</html>');
//origmytablerect=woois.document.getElementById('mytable').getBoundingClientRect();
//console.log('56:' + origmytablerect.top);
if (eval('' + origmytablerect.top) > 0) {
var wasthetop=0, thespans=woois.document.getElementsByTagName('span');
for (var iispans=0; iispans<thespans.length; iispans++) {
if (thespans[iispans].outerHTML.indexOf('absolute;') != -1 && thespans[iispans].outerHTML.indexOf('top:') != -1) {
console.log('10:' + thespans[iispans].outerHTML);
wasthetop=eval('' + thespans[iispans].outerHTML.split('top:')[1].split(';')[0].replace('px','').trim());
wasthetop-=eval('' + origmytablerect.top);
thespans[iispans].style.top='' + wasthetop + 'px';
}
}
}
woois.document.getElementById('mytable').style.position='fixed';
woois.document.getElementById('mytable').style.left='0px';
woois.document.getElementById('mytable').style.top='0px';
woois.document.getElementById('mytable').style.zIndex='23';
woois.document.getElementsByTagName('h1')[0].style.display='none';
woois.document.getElementsByTagName('h3')[0].style.display='none';
woois.document.getElementsByTagName('h3')[1].style.display='none';
woois.document.getElementsByTagName('h4')[0].style.display='none';
woois.document.getElementById('spancb').style.display='none';
woois.document.getElementById('dsource').style.display='none';
} else {
//woois.document.write('<html>' + document.head.outerHTML + document.body.outerHTML.replace('<div id="ta' + 'rget">', '<div id="ta' + 'rget" style="position:fixed;top:0px;left:0px;z-index:23;">') + '</html>');
woois.document.write('<html>' + document.head.outerHTML + document.body.outerHTML.replace(' cellspacing="0" sty' + 'le="', ' cellspacing="0" sty' + 'le="position:fixed;top:0px;left:0px;z-index:23;') + '</html>');
//woois.document.write('<html>' + document.head.outerHTML + document.body.outerHTML.replace(' cellspacing="0" sty' + 'le="', ' cellspacing="0" sty' + 'le="margin-top:-150px;z-index:23;') + '</html>');

woois.document.getElementsByTagName('h1')[0].style.display='none';
woois.document.getElementsByTagName('h3')[0].style.display='none';
woois.document.getElementsByTagName('h3')[1].style.display='none';
woois.document.getElementsByTagName('h4')[0].style.display='none';
woois.document.getElementById('spancb').style.display='none';
woois.document.getElementById('dsource').style.display='none';
}
}, 15000);


Only a changed experimental_drag_and_drop.htm Experimental Drag and Drop clientside HTML and Javascript basis was needed to help out our Colouring In web application’s Postcard production ideas.

If this was interesting you may be interested in this too.