Robert James Metcalfe Blog

As of today, further to the recent Animated GIF Creator Client Browsing and Pasting Tutorial, our Inhouse Client Browsing web application, in standalone mode, can accept input via …

• type it in …
• browse it in …
• paste it in as text (at an animated GIF slide textbox, that is) … or, as of today …
• paste it in as graphical content via the inhouse Client Browsing (and now “Pasting”) web application’s iframe element hosted span contenteditable=true onpaste and onblur event savvy new inclusion into the mix
• drop it in …

… (dragging a file from another source, such as the macOS Finder desktop application and) dropping into that same HTML span contenteditable=true onpaste and onblur, and now ondrop, savvy element, using the changed client_browsing.htm client side local file browsing (and pasting) HTML and Javascript inhouse helper …


function dragstart(ev) { // thanks to https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
lastelem=ev.target;
if (('' + ev.target.outerHTML).indexOf('<span ') == 0) { // thanks to https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setData
// Change the source element's background color
// to show that drag has started
ev.currentTarget.classList.add("dragging");
// Clear the drag data cache (for all formats/types)
ev.dataTransfer.clearData();
// Set the drag's format and data.
// Use the event target's id for the data
ev.dataTransfer.setData("text/uri-list", ev.target.id); //"image/png", ev.target.innerHTML);
//ev.dataTransfer.setData(
// "text/uri-list",
// ev.target.ownerDocument.location.href
//);
} else {
ev.dataTransfer.setData("text/plain", '');
}
}

function dragover(ev) { // thanks to https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
//ev.preventDefault();
const fileItems = [...ev.dataTransfer.items].filter(
(item) => item.kind === "file",
);
if (fileItems.length > 0) {
ev.preventDefault();
if (fileItems.some((item) => item.type.startsWith("image/"))) {
ev.dataTransfer.dropEffect = "copy";
} else if (fileItems.some((item) => item.type.startsWith("video/"))) {
ev.dataTransfer.dropEffect = "copy";
} else if (fileItems.some((item) => item.type.startsWith("audio/"))) {
ev.dataTransfer.dropEffect = "copy";
} else if (fileItems.some((item) => item.type.startsWith("text/"))) {
ev.dataTransfer.dropEffect = "copy";
} else if (fileItems.some((item) => item.type.contains("/pdf"))) {
ev.dataTransfer.dropEffect = "copy";
} else {
ev.dataTransfer.dropEffect = "none";
}
}
}

function displayImages(files) {
for (const file of files) {
if (file.type.startsWith("image/")) {
const li = document.createElement("li");
const img = document.createElement("img");
img.src = URL.createObjectURL(file);
img.alt = file.name;
li.appendChild(img);
li.appendChild(document.createTextNode(file.name));
document.getElementById('dsimgis').appendChild(li);
document.getElementById('ssimgis').innerHTML=document.getElementById('ssimgis').innerHTML.replace('Image(s) ',' ') + ' Image(s) ';
document.getElementById('dsimgis').open=true;
document.getElementById('dsimgis').scrollIntoView();


// Set as image source
const imgf = new Image();

imgf.onload = function(){
//document.title=';';
var zcanvas = document.createElement('canvas');
zcanvas.width = imgf.width;
zcanvas.height = imgf.height;
var zctx = zcanvas.getContext('2d');
zctx.drawImage(imgf, 0, 0);
xaltdu=zcanvas.toDataURL("image/jpeg", 0.1);
if (('' + typeof parent.puttwoto) == 'function') {
parent.puttwoto(xaltdu);
}
itype='image/jpeg';
//imgf.src=xaltdu;
if (one_conduit) {
var zxssuffix=0, zxnsuffix='2', waszxssuffix=0;
document.getElementById('divcopyspan').innerHTML='';
document.getElementById('divcopyspan').title=xaltdu;
if (parent.document.getElementById('slideshow' + ('' + zxssuffix).replace(/^0/g,'')).value != '') {
while (parent.document.getElementById('slideshow' + ('' + zxssuffix).replace(/^0/g,'')).value != '') {
waszxssuffix=zxssuffix;
zxssuffix++;
if (zxssuffix == 1) { zxssuffix++; }
zxnsuffix='' + zxssuffix;
}
}
if (('' + typeof parent.maybenomore) == 'function') {
//alert(3526);
if (!parent.maybenomore()) { parent.maybemore(xaltdu, 'slideshow' + waszxssuffix, parent.document.getElementById('slideshow' + ('' + zxssuffix).replace(/^0/g,''))); }
//alert(3536);
setTimeout(function(){
//alert(452);
if (gxssuffix == '-1') {
gxssuffix='0';
gxnsuffix='2';
}
if (('' + parent.document.getElementById('slideshow' + gxssuffix.replace(/^0/g,'')).value) == '' && ('' + parent.document.getElementById('slideshow' + gxnsuffix.replace(/^0/g,'')).value) != '') {
// alert(451);
parent.document.getElementById('slideshow' + gxssuffix.replace(/^0/g,'')).value=xaltdu; //parent.document.getElementById('slideshow' + gxnsuffix.replace(/^0/g,'')).value;
parent.document.getElementById('slideshow' + gxssuffix.replace(/^0/g,'')).value='';
}
while (('' + parent.document.getElementById('slideshow' + gxssuffix.replace(/^0/g,'')).value).replace(/^undefined$/g,'').replace(/^null$/g,'') != '') {
gxssuffix='' + eval(0 + eval('' + gxnsuffix));
gxnsuffix='' + eval(1 + eval('' + gxnsuffix));
}
}, 4000);
} else {
//alert('Xaltdu.length=' + xaltdu.length + ' ' + xaltdu.substring(0,29));
parent.maybemore(xaltdu, 'slideshow' + waszxssuffix, parent.document.getElementById('slideshow' + ('' + zxssuffix).replace(/^0/g,'')));
setTimeout(function(){
if (gxssuffix == '-1') {
gxssuffix='0';
gxnsuffix='2';
}
if (('' + parent.document.getElementById('slideshow' + gxssuffix.replace(/^0/g,'')).value) == '' && ('' + parent.document.getElementById('slideshow' + gxnsuffix.replace(/^0/g,'')).value) != '') {
parent.document.getElementById('slideshow' + gxssuffix.replace(/^0/g,'')).value=xaltdu; //parent.document.getElementById('slideshow' + gxnsuffix.replace(/^0/g,'')).value;
parent.document.getElementById('slideshow' + gxssuffix.replace(/^0/g,'')).value='';
}
while (('' + parent.document.getElementById('slideshow' + gxssuffix.replace(/^0/g,'')).value).replace(/^undefined$/g,'').replace(/^null$/g,'') != '') {
gxssuffix='' + eval(0 + eval('' + gxnsuffix));
gxnsuffix='' + eval(1 + eval('' + gxnsuffix));
}
}, 4000);
}
setTimeout(function(){
if (parent.document.getElementById('cbi')) {
parent.document.getElementById('cbi').scrolling='yes';
parent.document.getElementById('cbi').src=document.URL;
} else {
location.href=document.URL;
}
}, 8000);
}
};
imgf.src=img.src;

} else if (file.type.startsWith("video/")) {
const li = document.createElement("li");
const img = document.createElement("video");
img.src = URL.createObjectURL(file);
img.alt = file.name;
img.controls=true;
li.appendChild(img);
li.appendChild(document.createTextNode(file.name));
document.getElementById('dsimgis').appendChild(li);
document.getElementById('ssimgis').innerHTML=document.getElementById('ssimgis').innerHTML.replace('Video(s) ',' ') + ' Video(s) ';
document.getElementById('dsimgis').open=true;
document.getElementById('dsimgis').scrollIntoView();
} else if (file.type.startsWith("audio/")) {
const li = document.createElement("li");
const img = document.createElement("audio");
img.src = URL.createObjectURL(file);
img.alt = file.name;
img.controls=true;
li.appendChild(img);
li.appendChild(document.createTextNode(file.name));
document.getElementById('dsimgis').appendChild(li);
document.getElementById('ssimgis').innerHTML=document.getElementById('ssimgis').innerHTML.replace('Audio(s) ',' ') + ' Audio(s) ';
document.getElementById('dsimgis').open=true;
document.getElementById('dsimgis').scrollIntoView();
} else if (file.type.startsWith("text/") || ('' + file.type).indexOf('/pdf') != -1) {
var thingo='innerHTML';
const li = document.createElement("li");
var etype='textarea';
if (('' + file.type) == 'text/html') {
etype='iframe';
thingo='srcdoc';
} else if (('' + file.type).indexOf('/pdf') != -1) {
etype='embed';
thingo='data';
}
const img = document.createElement(etype);
img.alt = file.name;
if (('' + file.type) == 'text/html') {
img.srcdoc=URL.createObjectURL(file);
} else if (('' + file.type).indexOf('/pdf') != -1) {
img.type=file.type;
img.src=URL.createObjectURL(file);
} else {
img.innerHTML=URL.createObjectURL(file);
}
li.appendChild(img);
li.appendChild(document.createTextNode(file.name));
document.getElementById('dsimgis').appendChild(li);
document.getElementById('ssimgis').innerHTML=document.getElementById('ssimgis').innerHTML.replace('Text(s) ',' ') + ' Text(s) ';
document.getElementById('dsimgis').open=true;
document.getElementById('dsimgis').scrollIntoView();
}
}
}

function drop(ev) { // thanks to https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
ev.preventDefault();
const files = [...ev.dataTransfer.items]
.map((item) => item.getAsFile())
.filter((file) => file);
displayImages(files);
}


---

Previous relevant Animated GIF Creator Client Browsing and Pasting Tutorial is shown below.

Today’s presentation combines …

• the continuation of our onpaste event integrations like with the recent Client Browsing Safari Image Blob Copy Canvas Paste Tutorial …
• with the same “action item” as yesterday’s Animated GIF Creator URL Media Representation Revisit Tutorial

… that being the inhouse Animated GIF Creator and its interfacings, in turn, to the inhouse Client Browsing (and now “Pasting”) web application, so that as far as slideshow image defining goes you can …

• type it in …
• browse it in …
• paste it in as text (at an animated GIF slide textbox, that is) … or, as of today …
• paste it in as graphical content via the inhouse Client Browsing (and now “Pasting”) web application’s iframe element hosted span contenteditable=true onpaste and onblur event savvy new inclusion into the mix

We reserve the right to tweak, but, feel free to try it out, if you like with …

• the changed client_browsing.htm client side local file browsing (and pasting) HTML and Javascript inhouse helper helping out …
• the changed PHP downloadable (ideally to the, perhaps MAMP, local Apache web server’s Document Root’s PHP subdirectory’s animegif directory) tutorial_to_animated_gif.php inhouse animated GIF creator “public” web application

---

Previous relevant Client Browsing Safari Image Blob Copy Canvas Paste Tutorial is shown below.

Yes, yesterday’s Client Browsing Mimetypes Not Image Copying Tutorial‘s issue …

where, with images, we noticed Safari needs more consideration as it output “blob” URLs within the copied buffer

… ended up, for us, involving HTML⁵ …


canvas


… element as the “go between” …

• from a “blob” (output with image graphical Copy buffers on Safari) …
• to the data URI we are more comfortable working with as your generic image (img element) data representative

… via new …


if (isSafari) { // thanks to https://www.google.com/search?q=safari+returns+image+paste+as+blob+reader.result%3D%27%27&sca_esv=75e6d7a8c6f57b91&rlz=1C5OZZY_en&sxsrf=ANbL-n7aIEShTuNr1B3m9mwDmxo6Y6DyLg%3A1775970178074&ei=gifbaeiUBIj61e8PjM31sQ4&biw=1440&bih=741&ved=0ahUKEwjo3eG8xOeTAxUIffUHHYxmPeYQ4dUDCBE&uact=5&oq=safari+returns+image+paste+as+blob+reader.result%3D%27%27&gs_lp=Egxnd3Mtd2l6LXNlcnAiM3NhZmFyaSByZXR1cm5zIGltYWdlIHBhc3RlIGFzIGJsb2IgcmVhZGVyLnJlc3VsdD0nJzIFECEYoAFIoS5QggdYuSlwAXgAkAEAmAHhAaAB2geqAQUwLjMuMrgBA8gBAPgBAfgBApgCBqAChAjCAg4QABiABBiwAxiGAxiKBcICCBAAGLADGO8FwgIEECMYJ8ICBRAAGO8FmAMAiAYBkAYFkgcFMS4zLjKgB50OsgcFMC4zLjK4B_gHwgcHMC4yLjMuMcgHF4AIAA&sclient=gws-wiz-serp and https://stackoverflow.com/questions/38004917/how-to-render-a-blob-on-a-canvas-element
document.addEventListener('paste', (event) => {
const items = (event.clipboardData || event.originalEvent.clipboardData).items;
for (const item of items) {
if (item.type.indexOf('image') !== -1) {
itype='' + item.type;
const blob = item.getAsFile();
// Create a temporary URL for the blob
const url = URL.createObjectURL(blob);

// Set as image source
const imgf = new Image();

imgf.onload = function(){
//document.title=';';
var zcanvas = document.createElement('canvas');
zcanvas.width = imgf.width;
zcanvas.height = imgf.height;
var zctx = zcanvas.getContext('2d');
zctx.drawImage(imgf, 0, 0);
xaltdu=zcanvas.toDataURL("image/jpeg", 0.1);
itype='image/jpeg';
imgf.src=xaltdu;

// Get JPG as Data URL (quality 0.9)

//document.getElementById('ssimgis').innerHTML='Image';
//document.getElementById('dsimgis').appendChild(imgf);
//document.getElementById('dsimgis').open=true;

//xaltdu=document.getElementById('dsimgis').innerHTML.split(' src="')[1].split('"')[0];
setTimeout(function(){ xaltdu=''; }, 24100); //xaltdu='';
document.getElementById('divcopyspan').innerHTML='';
document.getElementById('divcopyspan').title=xaltdu;
mydivo.innerHTML='⬆️ 🖼️';
othertypes();

}

imgf.src = url;

// Optional: Revoke to free memory
// img.onload = () => URL.revokeObjectURL(url);
}
}
});
}


… in the changed client_browsing.htm client side local file browsing HTML and Javascript inhouse helper.

---

Previous relevant Client Browsing Mimetypes Not Image Copying Tutorial is shown below.

Extending yesterday’s Called Upon Client Browsing Specifically Onpaste Image Copying Tutorial …

• exclusively image (media) functioning copy and paste functionality … today we shore up …
• other mimetypes … starting with …
  1. text
  2. video
  3. audio

  … interfacing functionality

In amongst the text work we saw some categories of input data, as per …

• select all/copy PDF from within a PDF application … paste (into span contenteditable=true element)
• select all/copy pure HTML from within a text editor application … paste (into span contenteditable=true element)
• select all/copy WordPress [] blog posting prefixed HTML from within a text editor application … paste (into span contenteditable=true element)
• select all/copy just plain text from within a text editor application … paste (into span contenteditable=true element)

… via modes of input …

• select all/copy of graphical data … where, with images, we noticed Safari needs more consideration as it output “blob” URLs within the copied buffer …
• select all/copy of just the data URI (eg. Google Image Search of “clipart”->right click->Copy Image Address can output)

… regarding the standalone mode of use of the changed client_browsing.htm client side local file browsing HTML and Javascript inhouse helper.

---

Previous relevant Called Upon Client Browsing Specifically Onpaste Image Copying Tutorial is shown below.

Yesterday’s Called Upon Client Browsing Onpaste Image Copying Tutorial had us adjusting …

• a pre-existing iframe onload event scenario in our changed audio_card.htm Audio Card … and for today we have …
• create a new iframe onload event (via new onload=”checkit(this);” inline HTML onto the iframe HTML coding) scenario in our changed audio_card.htm Image Flipping and Flopping web application

… optional, but potential, use of image copying and pasting via the dual purpose (unchanged from yesterday) local file browsing HTML and Javascript inhouse helper …


var twaconto=null, twacontoiurl=null, twacontojurl=null;

function lookfor() {
var uis=document.getElementById('cbi').src.replace('=','=' + Math.floor(Math.random() * 9));
if (twacontojurl) {
if ((twacontojurl.innerHTML + twacontojurl.title).indexOf('data:') == 0) {
twocontocont='data:' + (twacontojurl.innerHTML + twacontojurl.title).split('data:')[1];
document.getElementById('imgurl').value=twocontocont;
twacontojurl.innerHTML='';
twacontojurl.title='';
document.getElementById('cbi').style.visibility='hidden';
document.getElementById('cbi').src=uis; //'/HTMLCSS/client_browsing.htm?d=' + Math.floor(Math.random() * 19897865) + '&wording=Allimages%20images%2E%20';
document.getElementById('cbi').style.visibility='visible';
}
}
}

function checkit(iois) {
twaconto = (iois.contentWindow || iois.contentDocument);
if (twaconto != null) {
if (twaconto.document) { twaconto = twaconto.document; }
if (twaconto.getElementById('divcopyspan')) {
twacontojurl=twaconto.getElementById('divcopyspan');
}
if (twacontoiurl || twacontojurl) { setInterval(lookfor, 3000); }
}
}


… where the browsing smarts of the inhouse client browser are catered for elsewhere, and so, Javascript global var^iable twacontoiurl is unused.

---

Previous relevant Called Upon Client Browsing Onpaste Image Copying Tutorial is shown below.

As promised at yesterday’s Client Browsing Onpaste Image Copying Tutorial, today, we start looking further than …

• yesterday’s “standalone” incarnation of our now potentially dual purpose “browsing and pasting” inhouse client browsing web application … to, today …
• “called upon” incarnation of our inhouse client browsing web application

… and, as we suspected, today’s first look was pretty salutary in proving “no one paradigm size fits all” with the number of scenarios a “called upon” incarnation of our inhouse client browsing web application can throw up.

Where we think the inhouse client browsing web application for this new “paste” functionality can flourish can be via what we like to call “client pre-emptive iframe” Javascript logic back at the caller, where we extend the code for that HTML iframe’s onload event …


var twaconto=null, twacontoiurl=null, twacontojurl=null;

function lookfor() {
if (twacontojurl) {
if ((twacontojurl.innerHTML + twacontojurl.title).indexOf('data:') == 0) {
twocontocont='data:' + (twacontojurl.innerHTML + twacontojurl.title).split('data:')[1];
document.getElementById('background').value=twocontocont;
twacontojurl.innerHTML='';
twacontojurl.title='';
if (twocontocont.replace('/gif','.gif') == -1 || (twocontocont.indexOf('data:') == 0 || twocontocont.slice(-5).indexOf('.') != -1)) {
setTimeout(reduceimsize, 100);
} else {
console.log('why? ' + twocontocont.substring(0,200));
}
document.getElementById('cbi').style.visibility='hidden';
document.getElementById('cbi').src='/HTMLCSS/client_browsing.htm?d=' + Math.floor(Math.random() * 19897865) + '&wording=Allimages%20images%2E%20';
document.getElementById('cbi').style.visibility='visible';
setTimeout(refocus,1500);
}
}
if (twacontoiurl) {
if (twacontoiurl.innerHTML.indexOf('data:') == 0) {
twocontocont=twacontoiurl.innerHTML;
twacontoiurl.innerHTML='';
document.getElementById('background').value=twocontocont;
if (twocontocont.replace('/gif','.gif') == -1 || (twocontocont.indexOf('data:') == 0 || twocontocont.slice(-5).indexOf('.') != -1)) {
setTimeout(reduceimsize, 100);
} else {
console.log('why? ' + twocontocont.substring(0,200));
}
document.getElementById('cbi').style.visibility='hidden';
document.getElementById('cbi').src='/HTMLCSS/client_browsing.htm?d=' + Math.floor(Math.random() * 19897865) + '&wording=Allimages%20images%2E%20';
document.getElementById('cbi').style.visibility='visible';
setTimeout(refocus,1500);
}
}
}

function checkit(iois) {
twaconto = (iois.contentWindow || iois.contentDocument);
if (twaconto != null) {
if (twaconto.document) { twaconto = twaconto.document; }
twacontoiurl=document.getElementById('result');
if (twaconto.getElementById('divcopyspan')) {
twacontojurl=twaconto.getElementById('divcopyspan');
}
if (twacontoiurl) { setInterval(lookfor, 3000); }
}
}


… featuring in our changed audio_card.htm Audio Card example call of the changed client_browsing.htm client side local file browsing HTML and Javascript inhouse helper.

---

Previous relevant Client Browsing Onpaste Image Copying Tutorial is shown below.

Don’t mean to sound like a broken record, but the sentiments of …

The recent onpaste event work has other places of “interventional interest”, for us, on top of the day before yesterday’s One Image Website Onpaste Uploading Device Copying Tutorial.

… continue today (building on yesterday’s Universal Clipboard Onpaste Canvas Annotations Tutorial), adding onpaste Image copying and Pasting logic into …

• today, our inhouse client browsing web application, in standalone mode … and then …
• tomorrow and on, our inhouse client browsing web application, being called upon

… so that, as far as Image data goes, this inhouse client browsing web application is dual purpose, the user able to …

1. click a button to go file browsing for that (Image) file … or, for example …
2. • mobile device
   • take a photograph via mobile device Camera app … and it being iOS iPhone …
   • via Photos app hover over relevant image and tap Copy option … and it being iOS iPhone with a MacBook Air of the same network nearby …
   • be in a web browser starting up our inhouse client browsing (and, now, image copy pasting) web application … with one new HTML span contenteditable=true onpaste and onblur savvy …
     
<span title=""Image copy paste here." onclick="csclick=0; setTimeout(csc,20000); event.stopPropagation();" onblur="youruplit(this,1);" onpaste="youruplit(this,0);" contenteditable="true" id="imgcopycheck" style="border:2px dotted red;width:50px;height:25px;display:inline-block;">&#x2B06;&#xFE0F; &#x1F5BC;&#xFE0F;</span>

     … element …
   • click on that new span element …
   • Edit->Paste (or command-V) … accesses the great Apple Universal Clipboard functionality …
     
var yehbutisob=false, xcelem=null, xccontext=null, xcimg=null, within=false, mydivo=null, origh=-1, origw=-1, altdu='', dlm='"', copyspans='', gij=0;
var zcontent=[], zfilename='', zoptions=null, csclick=-1;

function iftoolarge(zimg,zw,zh) {
var zcanvas = document.createElement('canvas');
zcanvas.width = zw;
zcanvas.height = zh;
var zctx = zcanvas.getContext('2d');

zctx.drawImage(zimg, 0, 0);

// Get JPG as Data URL (quality 0.9)
altdu=zcanvas.toDataURL("image/jpeg", 0.1);

setTimeout(function(){
if (document.getElementById('divcopyspan') && document.getElementById('gb')) {
//document.getElementById('divcopyspan').style.background='url(' + document.getElementById('divcopyspan').title + ')';
//document.getElementById('divcopyspan').style.backgroundRepeat='no-repeat';
//document.getElementById('divcopyspan').innerHTML='  <br>  ';
//document.getElementById('divcopyspan').style.display='block';
document.getElementById('gb').src=document.getElementById('divcopyspan').title;
document.body.style.cursor='pointer';
}
}, 12000);

setTimeout(function(){ xcimg.src=altdu; }, 2000);
return false;
}

function csc() {
csclick=-2;
}

function youruplit(divo, isonblurnotonpaste) {
var isimg=false;
var divoinnerHTML=divo.innerHTML.replace('data:video/','data:image/').replace('data:audio/','data:image/');
if (csclick == -2) {
csclick=0;
setTimeout(function(){ csclick=-1; }, 4000);
} else {
csclick=-1;
}
dlm='"';
if (isonblurnotonpaste != 0) {
yehbutisob=true;
}
if (divoinnerHTML.indexOf('data:image/') != -1 && divoinnerHTML.indexOf('"data:image/') == -1 && divoinnerHTML.indexOf("'data:image/") == -1) {
mydivo=divo;
if (divo.innerHTML.indexOf('data:image/') != -1 && divo.innerHTML.indexOf('"data:image/') == -1 && divo.innerHTML.indexOf("'data:image/") == -1) {
xcimg=new Image;
isimg=true;
} else if (divo.innerHTML.indexOf('data:video/') != -1 && divo.innerHTML.indexOf('"data:video/') == -1 && divo.innerHTML.indexOf("'data:video/") == -1) {
xcimg=new Video;
} else if (divo.innerHTML.indexOf('data:audio/') != -1 && divo.innerHTML.indexOf('"data:audio/') == -1 && divo.innerHTML.indexOf("'data:audio/") == -1) {
xcimg=new Audio;
}
//console.log('cancontw,canconth=' + cancontw + ',' + canconth + ' cancont=' + cancont);
xcimg.onload = function(){
if (altdu == ' ') {
return iftoolarge(xcimg,xcimg.width,xcimg.height);
} else if (altdu == '') {
if (('' + mydivo.title).indexOf(' Paste') != -1) {
parent.document.getElementById('divcopyspan').innerHTML=xcimg.src; //'data:image/' + mydivo.innerHTML.split('data:image/')[1].split(dlm)[0];
} else {
document.getElementById('divcopyspan').innerHTML=xcimg.src; //'data:image/' + mydivo.innerHTML.split('data:image/')[1].split(dlm)[0];
}
mydivo.innerHTML='&#x2B06;&#xFE0F; &#x1F5BC;&#xFE0F;';
simulatenewfile(document.getElementById('divcopyspan').innerHTML);
setTimeout(function(){ altdu=''; }, 4000);
} else {
if (('' + divo.title).indexOf(' Paste') != -1) {
parent.document.getElementById('divcopyspan').innerHTML=altdu;
} else {
document.getElementById('divcopyspan').innerHTML=altdu;
}
mydivo.innerHTML='&#x2B06;&#xFE0F; &#x1F5BC;&#xFE0F;';
simulatenewfile(document.getElementById('divcopyspan').innerHTML);
setTimeout(function(){ altdu=''; }, 4000);
}
};
if (!isimg) {
altdu='';
xcimg.src=divo.innerHTML.split('/')[0] + '/' + divo.innerHTML.split(divo.innerHTML.split('/')[0] + '/')[1].split(' ')[0].split("'")[0].split('"')[0].split('>')[0].split('&')[0].split('&#')[0].split(' ')[0].split('<')[0];
} else if (eval('' + ('data:image/' + divo.innerHTML.split('data:image/')[1].split(' ')[0].split("'")[0].split('"')[0].split('>')[0].split('&')[0].split('&#')[0].split(' ')[0].split('<')[0]).length) > 9000000) {
altdu=' ';
xcimg.src='data:image/' + divo.innerHTML.split('data:image/')[1].split(' ')[0].split("'")[0].split('"')[0].split('>')[0].split('&')[0].split('&#')[0].split(' ')[0].split('<')[0];
} else {
altdu='';
xcimg.src='data:image/' + divo.innerHTML.split('data:image/')[1].split(' ')[0].split("'")[0].split('"')[0].split('>')[0].split('&')[0].split('&#')[0].split(' ')[0].split('<')[0];
}

} else if (divoinnerHTML.indexOf('"data:image/') != -1 || divoinnerHTML.indexOf("'data:image/") != -1) {
mydivo=divo;
dlm=divo.innerHTML.split('data:' + divo.innerHTML.split('data:')[1].split('/')[0] + '/')[0].slice(-1);
//alert('dlm=' + dlm + ' ' + divo.innerHTML.substring(0,100));
if (divo.innerHTML.indexOf('data:image/') != -1) {
xcimg=new Image;
isimg=true;
} else if (divo.innerHTML.indexOf('data:video/') != -1) {
xcimg=new Video;
} else if (divo.innerHTML.indexOf('data:audio/') != -1) {
xcimg=new Audio;
}
//console.log('cancontw,canconth=' + cancontw + ',' + canconth + ' cancont=' + cancont);
xcimg.onload = function(){
if (altdu == ' ') {
return iftoolarge(xcimg,xcimg.width,xcimg.height);
} else if (altdu == '') {
if (('' + mydivo.title).indexOf(' Paste') != -1) {
parent.document.getElementById('divcopyspan').innerHTML=xcimg.src; //'data:image/' + mydivo.innerHTML.split('data:image/')[1].split(dlm)[0];
} else {
document.getElementById('divcopyspan').innerHTML=xcimg.src; //'data:image/' + mydivo.innerHTML.split('data:image/')[1].split(dlm)[0];
}
mydivo.innerHTML='&#x2B06;&#xFE0F; &#x1F5BC;&#xFE0F;';
simulatenewfile(document.getElementById('divcopyspan').innerHTML);
setTimeout(function(){ altdu=''; }, 4000);
} else {
if (('' + divo.title).indexOf(' Paste') != -1) {
parent.document.getElementById('divcopyspan').innerHTML=altdu;
} else {
document.getElementById('divcopyspan').innerHTML=altdu;
}
mydivo.innerHTML='&#x2B06;&#xFE0F; &#x1F5BC;&#xFE0F;';
simulatenewfile(document.getElementById('divcopyspan').innerHTML);
setTimeout(function(){ altdu=''; }, 4000);
}
};
if (!isimg) {
altdu='';
xcimg.src=divo.innerHTML.split('/')[0] + '/' + divo.innerHTML.split(divo.innerHTML.split('/')[0] + '/')[1].split(' ')[0].split("'")[0].split('"')[0].split('>')[0].split('&')[0].split('&#')[0].split(' ')[0].split('<')[0];
} else if (eval('' + divo.innerHTML.length) > 9000000 && isimg) {
altdu=' ';
xcimg.src='data:image/' + divo.innerHTML.split('data:image/')[1].split(dlm)[0];
} else {
altdu='';
xcimg.src='data:image/' + divo.innerHTML.split('data:image/')[1].split(dlm)[0];
}

} else if (eval('' + divo.innerHTML.length) < 30 && isonblurnotonpaste == 0) {

yehbutisob=false;
mydivo=divo;
setTimeout(function(){
if (!yehbutisob) {
if (('' + mydivo.title).indexOf(' Paste') != -1) {
//mydivo.innerHTML='&#x2B06;&#xFE0F; &#x1F5BC;&#xFE0F;';
parent.document.getElementById('outthere').focus();
//top.document.title+=('33');
} else {
//mydivo.innerHTML='&#x2B06;&#xFE0F; &#x1F5BC;&#xFE0F;';
document.getElementById('outthere').focus();
//top.document.title=('333');
}
yehbutisob=true;
}
}, 8000);
} else {
setTimeout(function(){ within=false; }, 56000);
}

}

     … and then we optionally tab out …
   • in standalone mode, see a representation of that image displayed …

… in the changed client_browsing.htm client side local file browsing HTML and Javascript inhouse helper.

---

Previous relevant Universal Clipboard Onpaste Canvas Annotations Tutorial is shown below.

The recent onpaste event work has other places of “interventional interest”, for us, on top of the day before yesterday’s One Image Website Onpaste Uploading Device Copying Tutorial.

How about using it to have …

• mobile device
• take a photograph via mobile device Camera app … and it being iOS iPhone …
• via Photos app hover over relevant image and tap Copy option … and it being iOS iPhone with a MacBook Air of the same network nearby …
• be in a web browser starting up our inhouse canvas annotation helper web application … with two new HTML span contenteditable=true onpaste and onblur savvy …
  
<span title="Image copy Paste here to populate canvas fitting in." onclick="event.stopPropagation();" onblur="myuplit(this,1);" onpaste="myuplit(this,0);" contenteditable="true" id="imgcopycheck" style="border:2px dotted red;width:50px;height:25px;display:inline-block;">&#x2B06;&#xFE0F; &#x1F5BC;&#xFE0F;</span> <span title="Image copy Paste here to populate canvas resizing." onclick="event.stopPropagation();" onblur="myuplit(this,1);" onpaste="myuplit(this,0);" contenteditable="true" id="imgcopychecken" style="border:2px dotted red;width:50px;height:25px;display:inline-block;">&#x2B06;&#xFE0F; &#x1F4C8;</span>

  … elements …
• click on the one of interest regarding image sizing …
• Edit->Paste (or command-V) … accesses the great Apple Universal Clipboard functionality …
  
var yehbutisob=false, xcelem=null, xccontext=null, xcimg=null, within=false, mydivo=null, origh=-1, origw=-1, altdu='';

function iftoolarge(zimg,zw,zh) {
var zcanvas = document.createElement('canvas');
zcanvas.width = zw;
zcanvas.height = zh;
var zctx = zcanvas.getContext('2d');

zctx.drawImage(zimg, 0, 0);

// Get JPG as Data URL (quality 0.9)
altdu=zcanvas.toDataURL("image/jpeg", 0.1);

setTimeout(function(){ xcimg.src=altdu; altdu=''; }, 2000);
return false;
}

function myuplit(divo, isonblurnotonpaste) {
if (isonblurnotonpaste != 0) {
yehbutisob=true;
}
if (divo.innerHTML.indexOf('data:image/') == 0) {
mydivo=divo;
if (('' + divo.title).indexOf(' Paste') != -1) {
xcelem=parent.document.getElementById('topcanvas');
} else {
xcelem=document.getElementById('topcanvas');
}
xccontext = xcelem.getContext("2d");
xcimg=new Image;
//console.log('cancontw,canconth=' + cancontw + ',' + canconth + ' cancont=' + cancont);
xcimg.onload = function(){
if (altdu == ' ') {
return iftoolarge(xcimg,xcimg.width,xcimg.height);
} else {
if (mydivo.id.indexOf('en') != -1) {
if (origw < 0) {
origw=eval('' + xcelem.width);
origh=eval('' + xcelem.height);
}
xcelem.width=xcimg.width;
xcelem.height=xcimg.height;
xccontext.drawImage(xcimg,0,0);
} else {
if (origw > 0) {
xcelem.width=origw;
xcelem.height=origh;
} else {
xcelem.width=xcelem.width;
xcelem.height=xcelem.height;
}
//setTimeout(function(){
//top.document.title=('1;' + yehbutisob);
xccontext.drawImage(xcimg,0,0,xcimg.width,xcimg.height,0,0,xcelem.width,xcelem.height);
}
if (mydivo.id.indexOf('en') != -1) {
mydivo.innerHTML='&#x2B06;&#xFE0F; &#x1F4C8;';
} else {
mydivo.innerHTML='&#x2B06;&#xFE0F; &#x1F5BC;&#xFE0F;';
}
//}, 6000);
//alert(1);
}
};
if (eval('' + divo.innerHTML.length) > 9000000) {
altdu=' ';
} else {
altdu='';
}
xcimg.src=divo.innerHTML;

} else if (divo.innerHTML.indexOf('"data:image/') != -1) {
mydivo=divo;
if (('' + divo.title).indexOf(' Paste') != -1) {
xcelem=parent.document.getElementById('topcanvas');
} else {
xcelem=document.getElementById('topcanvas');
}
xccontext = xcelem.getContext("2d");
xcimg=new Image;
//console.log('cancontw,canconth=' + cancontw + ',' + canconth + ' cancont=' + cancont);
xcimg.onload = function(){
if (altdu == ' ') {
return iftoolarge(xcimg,xcimg.width,xcimg.height);
} else {
if (mydivo.id.indexOf('en') != -1) {
if (origw < 0) {
origw=eval('' + xcelem.width);
origh=eval('' + xcelem.height);
}
xcelem.width=xcimg.width;
xcelem.height=xcimg.height;
xccontext.drawImage(xcimg,0,0);
} else {
if (origw > 0) {
xcelem.width=origw;
xcelem.height=origh;
} else {
xcelem.width=xcelem.width;
xcelem.height=xcelem.height;
}
//setTimeout(function(){
//top.document.title=('2;' + yehbutisob);
xccontext.drawImage(xcimg,0,0,xcimg.width,xcimg.height,0,0,xcelem.width,xcelem.height);
}
if (mydivo.id.indexOf('en') != -1) {
mydivo.innerHTML='&#x2B06;&#xFE0F; &#x1F4C8;';
} else {
mydivo.innerHTML='&#x2B06;&#xFE0F; &#x1F5BC;&#xFE0F;';
}
//}, 6000);
//alert(2);
}
};
if (eval('' + divo.innerHTML.length) > 9000000) {
altdu=' ';
} else {
altdu='';
}
xcimg.src='data:image/' + divo.innerHTML.split('data:image/')[1].split('"')[0];

} else if (eval('' + divo.innerHTML.length) < 30 && isonblurnotonpaste == 0) {

yehbutisob=false;
mydivo=divo;
setTimeout(function(){
if (!yehbutisob) {
if (('' + mydivo.title).indexOf(' Paste') != -1) {
if (mydivo.id.indexOf('en') != -1) {
mydivo.innerHTML='&#x2B06;&#xFE0F; &#x1F4C8;';
} else {
mydivo.innerHTML='&#x2B06;&#xFE0F; &#x1F5BC;&#xFE0F;';
}
parent.document.getElementById('jsemail').focus();
//top.document.title+=('33');
} else {
if (mydivo.id.indexOf('en') != -1) {
mydivo.innerHTML='&#x2B06;&#xFE0F; &#x1F4C8;';
} else {
mydivo.innerHTML='&#x2B06;&#xFE0F; &#x1F5BC;&#xFE0F;';
}
document.getElementById('jsemail').focus();
//top.document.title+=('333');
}
yehbutisob=true;
}
}, 8000);
} else {
setTimeout(function(){ within=false; }, 56000);
}

}

function checkoncp() {
if (parent.document.getElementById('mydbut') && parent.document.getElementById('target') && !parent.document.getElementById('imgcopycheck')) {
parent.document.getElementById('target').innerHTML+="<span title=\"Image copy Paste here to populate canvas fitting in.\" onclick=\"event.stopPropagation();\" onblur=\"myuplit(this,1);\" onpaste=\"myuplit(this,0);\" contenteditable=true id=\"imgcopycheck\" style=\"border:2px dotted red;width:50px;height:25px;display:inline-block;\">&#x2B06;&#xFE0F; &#x1F5BC;&#xFE0F;</span> <span title=\"Image copy Paste here to populate canvas resizing.\" onclick=\"event.stopPropagation();\" onblur=\"myuplit(this,1);\" onpaste=\"myuplit(this,0);\" contenteditable=true id=\"imgcopychecken\" style=\"border:2px dotted red;width:50px;height:25px;display:inline-block;\">&#x2B06;&#xFE0F; &#x1F4C8;</span>";
} else if (document.getElementById('mydbut') && document.getElementById('target') && !document.getElementById('imgcopycheck')) {
document.getElementById('target').innerHTML+="<span title=\"Image Copy paste here to populate canvas fitting in.\" onclick=\"event.stopPropagation();\" onblur=\"myuplit(this,1);\" onpaste=\"myuplit(this,0);\" contenteditable=true id=\"imgcopycheck\" style=\"border:2px dotted red;width:50px;height:25px;display:inline-block;\">&#x2B06;&#xFE0F; &#x1F5BC;&#xFE0F;</span> <span title=\"Image Copy paste here to populate canvas resizing.\" onclick=\"event.stopPropagation();\" onblur=\"myuplit(this,1);\" onpaste=\"myuplit(this,0);\" contenteditable=true id=\"imgcopychecken\" style=\"border:2px dotted red;width:50px;height:25px;display:inline-block;\">&#x2B06;&#xFE0F; &#x1F4C8;</span>";
} else {
setTimeout(checkoncp, 5000);
}
}

setTimeout(checkoncp, 5000);

  … and then we optionally tab out …
• see canvas be given content that is that image (ie. digital photograph) … ready for …
• optional annotation functionality there

… to flesh out what you might be trying to achieve, and facilitated by our changed web_share_api_test.js external Javascript?

---

Previous relevant One Image Website Onpaste Uploading Device Copying Tutorial is shown below.

Further to yesterday’s One Image Website Onpaste Uploading Hashtagging Tutorial you may be wondering about our original gambit statement wondering if regarding …

take a new relevant photograph (on an iPhone, for instance) … and then easily …

… upload? Aren’t we worried about the iPhone device end of …

1. getting the image off the Camera app …
2. and then referencing in the Photos app …
3. via a long hover and choosing the Copy option

… will just fall upon deaf ears as far as our MacBook Air web browser use of the “One Image Website” webpage goes?

Well, read this “if an iPhone is connected to a MacBook Air can the copy buffer of the iPhone be transferred to the copy buffer of the MacBook Air?” ask …

Yes, if an iPhone is connected to a MacBook Air—or even just nearby—the copy buffer (clipboard) of the iPhone can be transferred to the copy buffer of the MacBook Air. Apple calls this feature Universal Clipboard.

It allows you to copy text, images, photos, and videos on your iPhone and instantly paste them onto your Mac (or vice versa).

Cute, huh?! If on the same network, and close, the iPhone and MacBook Air do not even need an Apple White Lead connection, necessarily, though we noticed it sped up the process!

Given the “smarts” at this end, today, we turned to …


var myxhr=null, formis=null, iclen=0, icsuffix='', extnew='.png', yehbutisob=true;
var ipuvalid=true, ipis='', lhend='', lhdata='', fourthousand=(document.URL.indexOf('diris=') != -1 ? 10000 : 4000), gencount=0, upcount=(document.URL.indexOf('data=%') != -1 ? eval('' + decodeURIComponent(document.URL.split('data=')[1].split('&')[0].split('#')[0]).split(',').length) : 0);
var fetchcmd="./index.php?diris=images&prefixis=DSC_0&startsuffix=279&endsuffix=364", within=false;

// Thanks to https://www.google.com/search?q=javascript+convert+png+to+jpg&rlz=1C5OZZY_en&oq=javascript+convert+png+to+jpg&gs_lcrp=EgZjaHJvbWUyCggAEEUYFhgeGDkyCAgBEAAYFhgeMggIAhAAGBYYHjINCAMQABiGAxiABBiKBTIHCAQQABjvBdIBCTEyNzIxajBqN6gCALACAA&sourceid=chrome&ie=UTF-8
const convertPngToJpg = (pngDataUrl) => {
const img = new Image();
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');

// Optional: Fill white background (JPEGs don't support transparency)
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.drawImage(img, 0, 0);

// Get JPG as Data URL (quality 0.9)
const jpgDataUrl = canvas.toDataURL("image/jpeg", 0.1);
extnew='.jpg';
icsuffix=(' 0' + jpgDataUrl.length);
formis.append('newdurl', jpgDataUrl);
myxhr.open('POST', './index.php'); //, true);
myxhr.onreadystatechange=mstateChanged;
myxhr.send(formis);
console.log(jpgDataUrl);
};
img.src = pngDataUrl;
};


… as a solution to massive image png copy buffers coming off the camera being fed into an HTML⁵ canvas and out as a reduced size jpeg image to allow PHP $_POST methodologies used for the uploading process not be overwhelmed, as per the adjusted Ajax code …


function mstateChanged() {
var ioff=1, thisoff=1;
var vsoff=0, getridof='YouLlneverFinDtHis';
//document.title=document.title.substring(0,1) + ' readyState=' + myxhr.readyState + ' and status=' + myxhr.status + ' ' + iclen;
if (myxhr.readyState == 4) {
if (myxhr.status == 200) {
//alert(iclen);
setTimeout(function(){
if (document.URL.indexOf('#') != -1 && lhdata == '' && document.URL.indexOf('data=%') != -1) {
lhdata=(('' + location.search + decodeURIComponent(('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'').replace(/^\#/g,''))).split('data=')[1] ? decodeURIComponent(('' + location.search + decodeURIComponent(('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'').replace(/^\#/g,'')))).split('data=')[eval(-1 + decodeURIComponent(('' + location.search + decodeURIComponent(('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'').replace(/^\#/g,'')))).split('data=').length)].split('&')[0].split('#')[0] : '');
var coms=lhdata.split(',');
vsoff=eval('' + fetchcmd.split('endsuffix=')[1].split('&')[0].split('#')[0]);
getridof=fetchcmd.split('diris=')[1].split('&')[0].split('#')[0] + '/' + fetchcmd.split('prefixis=')[1].split('&')[0].split('#')[0];
for (var iuyt=0; iuyt<coms.length; iuyt++) {
//alert(coms[iuyt] + ' ... ' + getridof + ' ... ' + coms[iuyt].replace('[','').replace(']','').replace('"','').replace('"','').replace(getridof,''));
thisoff=eval(eval(coms[iuyt].replace('[','').replace(']','').replace('"','').replace('"','').replace(getridof,'').split('.')[0]) - vsoff + 1);
if (thisoff > ioff) { ioff=thisoff; }
}
}
if (document.URL.indexOf('#') == -1) {
if (lhdata == '' && fetchcmd.indexOf('endsuffix=') != -1) {
lhdata='["' + fetchcmd.split('diris=')[1].split('&')[0].split('#')[0] + '/' + fetchcmd.split('prefixis=')[1].split('&')[0].split('#')[0] + eval(1 + eval('' + fetchcmd.split('endsuffix=')[1].split('&')[0].split('#')[0])) + extnew + '"]';
lhend='#' + encodeURIComponent(eval(1 + number_of_image) + '.' + fetchcmd.split('endsuffix=')[1].split('&')[0].split('#')[0]) + '&diris=' + fetchcmd.split('diris=')[1] + '&data=' + encodeURIComponent(lhdata);
if (document.URL.indexOf(lhend.substring(1)) == -1) {
if (6 == 6) {
location.href=(document.URL.indexOf('?') != -1 ? document.URL.split('#')[0] + '&endbit=' + reduced(lhend).substring(1) + lhend : document.URL.split('#')[0] + '?endbit=' + reduced(lhend).substring(1) + lhend);
} else {
location.hash=lhend;
}
}
}
} else if (lhdata.indexOf('[') != -1) {
lhdata=lhdata.replace('[', '["' + fetchcmd.split('diris=')[1].split('&')[0].split('#')[0] + '/' + fetchcmd.split('prefixis=')[1].split('&')[0].split('#')[0] + eval(ioff + eval('' + fetchcmd.split('endsuffix=')[1].split('&')[0].split('#')[0])) + extnew + '",');
lhend='#' + encodeURIComponent(eval(1 + number_of_image) + '.' + fetchcmd.split('endsuffix=')[1].split('&')[0].split('#')[0]) + '&diris=' + fetchcmd.split('diris=')[1] + '&data=' + encodeURIComponent(lhdata);
if (document.URL.indexOf(lhend.substring(1)) == -1) {
if (6 == 6) {
location.href=(document.URL.indexOf('?') != -1 ? document.URL.split('&')[0].replace('data=','daWASta=').replace('?diris=','?dirWASis=').replace('?endbit=','?endWASbit=') + '&endbit=' + reduced(lhend).substring(1) + lhend : document.URL.split('#')[0].replace('data=','daWASta=') + '?endbit=' + reduced(lhend).substring(1) + lhend);
} else {
location.hash=lhend;
}
}
}
within=false;
}, 26000);
}
}
}

function uplitc(icontis) {
if (icontis.indexOf('data:image/') == 0) {
//document.title='A';
myxhr = new XMLHttpRequest();
formis = new FormData();
formis.append('diris', fetchcmd.split('diris=')[1].split('&')[0].split('#')[0]);
formis.append('prefixis', fetchcmd.split('prefixis=')[1].split('&')[0].split('#')[0]);
formis.append('startsuffix', fetchcmd.split('startsuffix=')[1].split('&')[0].split('#')[0]);
formis.append('endsuffix', fetchcmd.split('endsuffix=')[1].split('&')[0].split('#')[0]);
iclen=eval('' + icontis.length);
extnew='.' + icontis.split('data:image/')[1].split(',')[0].split(';')[0].replace('jpeg','jpg');
if (iclen > 9000000) {
convertPngToJpg(icontis);
} else {
formis.append('newdurl', icontis);
myxhr.open('POST', './index.php'); //, true);
myxhr.send(formis);
}
}
}

function uplit(divo, isonblurnotonpaste) {
var icontis='';
if (isonblurnotonpaste != 0) {
yehbutisob=true;
}
if (divo.innerHTML.indexOf('data:image/') == 0) {
icontis=divo.innerHTML;
divo.innerHTML='';
divo.title=icontis;
//document.title='B';
myxhr = new XMLHttpRequest();
formis = new FormData();
formis.append('diris', fetchcmd.split('diris=')[1].split('&')[0].split('#')[0]);
formis.append('prefixis', fetchcmd.split('prefixis=')[1].split('&')[0].split('#')[0]);
formis.append('startsuffix', fetchcmd.split('startsuffix=')[1].split('&')[0].split('#')[0]);
formis.append('endsuffix', fetchcmd.split('endsuffix=')[1].split('&')[0].split('#')[0]);
iclen=eval('' + icontis.length);
extnew='.' + icontis.split('data:image/')[1].split(',')[0].split(';')[0].replace('jpeg','jpg');
if (iclen > 9000000) {
convertPngToJpg(icontis);
} else {
formis.append('newdurl', icontis);
myxhr.open('POST', './index.php'); //, true);
myxhr.onreadystatechange=mstateChanged;
myxhr.send(formis);
}
//alert(78);
//setTimeout(function(){ within=false; }, 6000);
} else if (divo.innerHTML.indexOf('"data:image/') != -1) {
icontis='data:image/' + divo.innerHTML.split('data:image/')[1].split('"')[0];
divo.innerHTML='';
divo.title=icontis;
//document.title='C';
myxhr = new XMLHttpRequest();
formis = new FormData();
formis.append('diris', fetchcmd.split('diris=')[1].split('&')[0].split('#')[0]);
formis.append('prefixis', fetchcmd.split('prefixis=')[1].split('&')[0].split('#')[0]);
formis.append('startsuffix', fetchcmd.split('startsuffix=')[1].split('&')[0].split('#')[0]);
formis.append('endsuffix', fetchcmd.split('endsuffix=')[1].split('&')[0].split('#')[0]);
iclen=eval('' + icontis.length);
extnew='.' + icontis.split('data:image/')[1].split(',')[0].split(';')[0].replace('jpeg','jpg');
if (iclen > 9000000) {
convertPngToJpg(icontis);
} else {
formis.append('newdurl', icontis);
myxhr.open('POST', './index.php'); //, true);
myxhr.onreadystatechange=mstateChanged;
myxhr.send(formis);
}
//alert(278);
//setTimeout(function(){ within=false; }, 6000);
} else if (eval('' + divo.innerHTML.length) < 30 && isonblurnotonpaste == 0) {
yehbutisob=false;
setTimeout(function(){
if (!yehbutisob) {
document.getElementById('offscreen').focus();
yehbutisob=true;
}
}, 8000);
} else {
setTimeout(function(){ within=false; }, 56000);
}
}


… helped out by changed onrightclick.js external Javascript.

---

Previous relevant One Image Website Onpaste Uploading Hashtagging Tutorial is shown below.

You guessed it! Yesterday’s One Image Website Onpaste Uploading Tutorial‘s work was working just within the realms of those “first webpages” occurring within the “One Image Website” project paradigm, but that we needed to pass onto subsequent webpages this “new image uploaded” list as ….

• hashtagged data … but also …
• argumented data (ie. ? and & arguments) for those “first webpages” occurring within the “One Image Website” project paradigm …

… the reason being that document.referrer cannot be used to glean hashtagged data. Luckily in this project that second requirement above, which asks for a true document reload, is not the end of the woooorrrrllllddd, as we know it, and means we can get help from the external Javascript we use in these projects, as per …

• yesterday’s changed onrightclick.js as a precursor to …
• today’s changed onrightclick.js external Javascript …

… featuring a new Javascript function the subsequent webpages can call just after any …


image_list = new Array();


… that being …


initthearr(image_list);


… as per …


var prefx='';


function reduced(documentreferrer) {
if (('' + documentreferrer).indexOf('data=') != -1) {
if (('' + documentreferrer).indexOf('diris=') != -1) {
if (prefx == '' && ('' + documentreferrer).indexOf('prefixis=') != -1) {
prefx=decodeURIComponent(('' + documentreferrer).split('diris=')[1].split('&')[0].split('#')[0]) + '/' + decodeURIComponent(('' + documentreferrer).split('prefixis=')[1].split('&')[0].split('#')[0]);
}
}
}
if (prefx != '') {
if (documentreferrer.indexOf(encodeURIComponent(prefx)) != -1) {
while (documentreferrer.indexOf(encodeURIComponent(prefx)) != -1) {
documentreferrer=documentreferrer.replace(encodeURIComponent(prefx),'');
}
}
}
return documentreferrer;
}

function initthearr(inarr) {
var fort=false, jsonstr='', datas=[], inm=0;
if (('' + location.hash).indexOf('data=') != -1) {
if (('' + location.hash).indexOf('diris=') != -1) {
if (prefx == '' && ('' + location.hash).indexOf('prefixis=') != -1) {
prefx=decodeURIComponent(('' + location.hash).split('diris=')[1].split('&')[0].split('#')[0]) + '/' + decodeURIComponent(('' + location.hash).split('prefixis=')[1].split('&')[0].split('#')[0]);
}
}
jsonstr=decodeURIComponent(('' + location.hash).split('data=')[1].split('&')[0].split('#')[0]);
datas=jsonstr.split(',');
for (inm=0; inm<datas.length; inm++) {
inarr[image_index++] = new imageItem(prefx + datas[inm].replace((prefx == '' ? 'yOuLlneverfindThIs' : prefx),'').replace('[','').replace(']','').replace('"','').replace('"',''));
console.log('ADDed ' + datas[inm].replace((prefx == '' ? 'yOuLlneverfindThIs' : prefx),'').replace('[','').replace(']','').replace('"','').replace('"',''));
fort=true;
}
} else if (('' + document.referrer).indexOf('data=') != -1) {
if (('' + document.referrer).indexOf('diris=') != -1) {
if (prefx == '' && ('' + document.referrer).indexOf('prefixis=') != -1) {
prefx=decodeURIComponent(('' + document.referrer).split('diris=')[1].split('&')[0].split('#')[0]) + '/' + decodeURIComponent(('' + document.referrer).split('prefixis=')[1].split('&')[0].split('#')[0]);
}
}
jsonstr=decodeURIComponent(('' + document.referrer).split('data=')[1].split('&')[0].split('#')[0]);
//alert(jsonstr);
datas=jsonstr.split(',');
for (inm=0; inm<datas.length; inm++) {
inarr[image_index++] = new imageItem(prefx + datas[inm].replace((prefx == '' ? 'yOuLlneverfindThIs' : prefx),'').replace('[','').replace(']','').replace('"','').replace('"',''));
console.log('AddEd ' + prefx + datas[inm].replace((prefx == '' ? 'yOuLlneverfindThIs' : prefx),'').replace('[','').replace(']','').replace('"','').replace('"',''));
fort=true;
}
}
return fort;
}


… in order to avoid any Asynchronous concerns in these subsequent webpages. The ordering of external Javascript loading …


<script type=text/javascript src='/onrightclick.js?rand=86475'></script>


… is sensitive here, and for the most part, is moved to above the “inline Javascript” loading within the head webpage element, to help make all this idea function, all the way back from changes to inline Javascript parts to the initialization code of (our Guinea Pig) “first webpage” occurring within the “One Image Website” project paradigm …


var image_index = 0;
var number_of_image = 0;
var myxhr=null, formis=null;
var ipuvalid=true, ipis='', lhend='', lhdata='';
var fetchcmd="./index.php?diris=images&prefixis=DSC_0&startsuffix=279&endsuffix=364";

// Thanks to https://stackoverflow.com/questions/74997800/how-to-code-a-synchronous-wrapper-for-jquery-ajax-functions
(async () => {

const resip = await fetch("./index.php?getmeip=" + Math.floor(Math.random() * 198978675), {/* options here */});
const dataip = await resip.json();

for (var inmip=0; inmip<dataip.length; inmip++) {
if (inmip == eval(-1 + dataip.length)) {
ipis='' + dataip[inmip];
if (inmip != 0) {
ipuvalid=false;
setTimeout(nag, 200);
}
}
}

})();

image_list = new Array();

//if (initthearr(image_list)) {
// lhend=lhend;
//
//} else
if (1 == 1) {
// Thanks to https://stackoverflow.com/questions/74997800/how-to-code-a-synchronous-wrapper-for-jquery-ajax-functions
(async () => {

const res = await fetch(fetchcmd, {/* options here */});
const data = await res.json();

for (var inm=0; inm<data.length; inm++) {
lhend='# ';
if (lhdata == '') {
lhdata='["' + data[inm] + '"]';
} else {
lhdata=lhdata.replace(']', ',"' + data[inm] + '"]');
}
image_list[image_index++] = new imageItem(data[inm]);
console.log('Added ' + data[inm]);
}

console.log(data);
console.log("Some code after that uses data");

setTimeout(function(){
if (lhend == '# ') {
//lhend='#' + encodeURIComponent(number_of_image + '.364') + '&fetch=' + encodeURIComponent(fetchcmd) + '&data=' + encodeURIComponent(lhdata);
lhend='#' + encodeURIComponent(number_of_image + '.364') + '&diris=' + fetchcmd.split('diris=')[1] + '&data=' + encodeURIComponent(lhdata);
if (document.URL.indexOf(lhend.substring(1)) == -1) {
if (6 == 6) {
location.href=(document.URL.indexOf('?') != -1 ? document.URL.split('#')[0] + '&endbit=' + reduced(lhend).substring(1) + lhend : document.URL.split('#')[0] + '?endbit=' + reduced(lhend).substring(1) + lhend);
} else {
location.hash=lhend;
}
}
console.warn(image_list[0]);
//lhend=' ';
}
}, 2000);

})();
}

setTimeout(function(){
image_list[image_index++] = new imageItem('images/DSC_0279.jpg');
image_list[image_index++] = new imageItem('images/DSC_0280.jpg');
image_list[image_index++] = new imageItem('images/DSC_0281.jpg');
image_list[image_index++] = new imageItem('images/DSC_0282.jpg');
image_list[image_index++] = new imageItem('images/DSC_0283.jpg');
image_list[image_index++] = new imageItem('images/DSC_0284.jpg');
image_list[image_index++] = new imageItem('images/DSC_0285.jpg');
image_list[image_index++] = new imageItem('images/DSC_0286.jpg');
image_list[image_index++] = new imageItem('images/DSC_0287.jpg');
image_list[image_index++] = new imageItem('images/DSC_0288.jpg');
image_list[image_index++] = new imageItem('images/DSC_0289.jpg');
image_list[image_index++] = new imageItem('images/DSC_0290.jpg');
image_list[image_index++] = new imageItem('images/DSC_0291.jpg');
image_list[image_index++] = new imageItem('images/DSC_0292.jpg');
image_list[image_index++] = new imageItem('images/DSC_0293.jpg');
image_list[image_index++] = new imageItem('images/DSC_0294.jpg');
image_list[image_index++] = new imageItem('images/DSC_0295.jpg');
image_list[image_index++] = new imageItem('images/DSC_0296.jpg');
image_list[image_index++] = new imageItem('images/DSC_0297.jpg');
image_list[image_index++] = new imageItem('images/DSC_0298.jpg');
image_list[image_index++] = new imageItem('images/DSC_0299.jpg');
image_list[image_index++] = new imageItem('images/DSC_0300.jpg');
image_list[image_index++] = new imageItem('images/DSC_0301.jpg');
image_list[image_index++] = new imageItem('images/DSC_0302.jpg');
image_list[image_index++] = new imageItem('images/DSC_0303.jpg');
image_list[image_index++] = new imageItem('images/DSC_0304.jpg');
image_list[image_index++] = new imageItem('images/DSC_0305.jpg');
image_list[image_index++] = new imageItem('images/DSC_0306.jpg');
image_list[image_index++] = new imageItem('images/DSC_0307.jpg');
image_list[image_index++] = new imageItem('images/DSC_0308.jpg');
image_list[image_index++] = new imageItem('images/DSC_0309.jpg');
image_list[image_index++] = new imageItem('images/DSC_0310.jpg');
image_list[image_index++] = new imageItem('images/DSC_0311.jpg');
image_list[image_index++] = new imageItem('images/DSC_0312.jpg');
image_list[image_index++] = new imageItem('images/DSC_0313.jpg');
image_list[image_index++] = new imageItem('images/DSC_0314.jpg');
image_list[image_index++] = new imageItem('images/DSC_0315.jpg');
image_list[image_index++] = new imageItem('images/DSC_0316.jpg');
image_list[image_index++] = new imageItem('images/DSC_0317.jpg');
image_list[image_index++] = new imageItem('images/DSC_0318.jpg');
image_list[image_index++] = new imageItem('images/DSC_0319.jpg');
image_list[image_index++] = new imageItem('images/DSC_0320.jpg');
image_list[image_index++] = new imageItem('images/DSC_0321.jpg');
image_list[image_index++] = new imageItem('images/DSC_0322.jpg');
image_list[image_index++] = new imageItem('images/DSC_0323.jpg');
image_list[image_index++] = new imageItem('images/DSC_0324.jpg');
image_list[image_index++] = new imageItem('images/DSC_0325.jpg');
image_list[image_index++] = new imageItem('images/DSC_0326.jpg');
image_list[image_index++] = new imageItem('images/DSC_0327.jpg');
image_list[image_index++] = new imageItem('images/DSC_0328.jpg');
image_list[image_index++] = new imageItem('images/DSC_0329.jpg');
image_list[image_index++] = new imageItem('images/DSC_0330.jpg');
image_list[image_index++] = new imageItem('images/DSC_0331.jpg');
image_list[image_index++] = new imageItem('images/DSC_0332.jpg');
image_list[image_index++] = new imageItem('images/DSC_0333.jpg');
image_list[image_index++] = new imageItem('images/DSC_0334.jpg');
image_list[image_index++] = new imageItem('images/DSC_0335.jpg');
image_list[image_index++] = new imageItem('images/DSC_0336.jpg');
image_list[image_index++] = new imageItem('images/DSC_0337.jpg');
image_list[image_index++] = new imageItem('images/DSC_0338.jpg');
image_list[image_index++] = new imageItem('images/DSC_0339.jpg');
image_list[image_index++] = new imageItem('images/DSC_0340.jpg');
image_list[image_index++] = new imageItem('images/DSC_0341.jpg');
image_list[image_index++] = new imageItem('images/DSC_0342.jpg');
image_list[image_index++] = new imageItem('images/DSC_0343.jpg');
image_list[image_index++] = new imageItem('images/DSC_0344.jpg');
image_list[image_index++] = new imageItem('images/DSC_0345.jpg');
image_list[image_index++] = new imageItem('images/DSC_0346.jpg');
image_list[image_index++] = new imageItem('images/DSC_0347.jpg');
image_list[image_index++] = new imageItem('images/DSC_0348.jpg');
image_list[image_index++] = new imageItem('images/DSC_0349.jpg');
image_list[image_index++] = new imageItem('images/DSC_0350.jpg');
image_list[image_index++] = new imageItem('images/DSC_0351.jpg');
image_list[image_index++] = new imageItem('images/DSC_0352.jpg');
image_list[image_index++] = new imageItem('images/DSC_0353.jpg');
image_list[image_index++] = new imageItem('images/DSC_0354.jpg');
image_list[image_index++] = new imageItem('images/DSC_0355.jpg');
image_list[image_index++] = new imageItem('images/DSC_0356.jpg');
image_list[image_index++] = new imageItem('images/DSC_0357.jpg');
image_list[image_index++] = new imageItem('images/DSC_0358.jpg');
image_list[image_index++] = new imageItem('images/DSC_0359.jpg');
image_list[image_index++] = new imageItem('images/DSC_0360.jpg');
image_list[image_index++] = new imageItem('images/DSC_0361.jpg');
image_list[image_index++] = new imageItem('images/DSC_0362.jpg');
image_list[image_index++] = new imageItem('images/DSC_0363.jpg');
image_list[image_index++] = new imageItem('images/DSC_0364.jpg');

//alert('yay ' + lhend);

number_of_image = image_list.length;
if ((lhend + ' ').substring(0,1) == '#') {
setTimeout(function(){
number_of_image = image_list.length;
}, 2000);
}
if (lhend == '#') { lhend='#' + encodeURIComponent(number_of_image + '.364') + '&fetch=' + encodeURIComponent(fetchcmd) + '&data=' + encodeURIComponent(lhdata); alert(lhend); location.hash=lhend; lhend=''; }
}, 1000);


To most, it is still “undercover” trying out our “still at the Guinea Pig upload functionality thinking stage” Street Art “One Image Website” project.

---

Previous relevant One Image Website Onpaste Uploading Tutorial is shown below.

The onpaste event referencing work of the recent Using Document Writeln Onpaste Tutorial set us to thinking about the unwieldy nature of our “One Image Website” series of photographic projects ability to, on the fly, these days …

• take a new relevant photograph (on an iPhone, for instance) … and then easily …
• get some functionality on the “One Image Websites” (our Guinea Pig, here, being our Street Art project) to accept either …
  1. graphical image Copy into buffer via some Edit->Select All, Edit->Copy (eg. within an Image Editor desktop application) (combination) option Edit->Paste^d into a new HTML span contenteditable=true onpaste and onblur savvy events “uploading” helper … or …
  2. right click at first webpage (of one of these “One Image Website” projects) to get to a prompt window that can accept a data URI the likes of which Google Image Search (say, of “clipart”)->right click->Copy Image Address could glean for you as a representation of an image

Where’s the security and moderation here? Any upload operation needs to worry about that, huh?! Well, we limit it via IP address at this stage, in our Guinea Pig start to proceedings, and will monitor over time.

Let’s start, codewise with the pretty well self contained PHP block of code that is new for this work …


<?php

$oklist=['0::1', '1.156.90.221'];

function server_remote_addr() {
global $ris;
$rma = $_SERVER['REMOTE_ADDR'];
if ($rma != "") {
$qris = $rma;
} else if ($rma == "") {
$rma = $qris;
}
$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
// you can add different browsers with the same way ..
if(preg_match('/(chromium)[ \/]([\w.]+)/', $ua))
$rma = '000000'.$rma;
elseif(preg_match('/(chrome)[ \/]([\w.]+)/', $ua))
$rma = '00000'.$rma;
elseif(preg_match('/(safari)[ \/]([\w.]+)/', $ua))
$rma = '0000'.$rma;
elseif(preg_match('/(opera)[ \/]([\w.]+)/', $ua))
$rma = '000'.$rma;
elseif(preg_match('/(msie)[ \/]([\w.]+)/', $ua))
$rma = '00'.$rma;
elseif(preg_match('/(mozilla)[ \/]([\w.]+)/', $ua))
$rma = '0'.$rma;
//echo "<p>".$ua.$rma."</p>";
return $rma;
}

if (isset($_GET['getmeip'])) {
$okipwise=false;
$visip=server_remote_addr();
for ($inb=0; $inb<sizeof($oklist); $inb++) {
if (strpos($visip . '!', $oklist[$inb] . '!') !== false) {
$okipwise=true;
}
}
if ($okipwise) {
echo '["' . server_remote_addr() . '"]';
} else {
echo '["","' . server_remote_addr() . '"]';
}
exit;
} else if (isset($_GET['diris']) && isset($_GET['prefixis']) && isset($_GET['startsuffix']) && isset($_GET['endsuffix'])) {
$arrbit='';
if ($_GET['prefixis'] != '' && $_GET['diris'] != '' && $_GET['startsuffix'] != '' && $_GET['endsuffix'] != '') {
foreach(glob(str_replace('+',' ',urldecode($_GET['diris'])) . DIRECTORY_SEPARATOR . str_replace('+',' ',urldecode($_GET['prefixis'])) . '*.*g*') as $filename) {
if (strpos($filename, str_replace('+',' ',urldecode($_GET['diris'])) . DIRECTORY_SEPARATOR . str_replace('+',' ',urldecode($_GET['prefixis']))) !== false) {
$restfnamebit=explode('.', explode(str_replace('+',' ',urldecode($_GET['diris'])) . DIRECTORY_SEPARATOR . str_replace('+',' ',urldecode($_GET['prefixis'])), $filename)[1])[0];
if ($restfnamebit < str_replace('+',' ',urldecode($_GET['startsuffix'])) || $restfnamebit > str_replace('+',' ',urldecode($_GET['endsuffix']))) {
if ($arrbit == '') {
$arrbit='["' . $filename . '"]';
} else {
$arrbit=str_replace(']', ',"' . $filename . '"]', $arrbit);
}
}
}
}
if ($arrbit == '') {
echo "[]";
} else {
echo $arrbit;
}
exit;
}
echo "[]";
exit;
} else if (isset($_POST['newdurl']) && isset($_POST['diris']) && isset($_POST['prefixis']) && isset($_POST['startsuffix']) && isset($_POST['endsuffix'])) {
if (strpos(str_replace(' ','+',urldecode($_POST['newdurl'])), 'data:image/') !== false && $_POST['prefixis'] != '' && $_POST['diris'] != '' && $_POST['startsuffix'] != '' && $_POST['endsuffix'] != '') {
$okipwise=false;
$visip=server_remote_addr();
for ($inb=0; $inb<sizeof($oklist); $inb++) {
if (strpos($visip . '!', $oklist[$inb] . '!') !== false) {
$okipwise=true;
}
}
if ($okipwise) {
$proposedext='.' . str_replace('jpeg','jpg',explode(';',explode(',',explode('data:image/', str_replace(' ','+',urldecode($_POST['newdurl'])))[1])[0])[0]);
if (strpos($proposedext, 'g') !== false) {
$fidea=str_replace('+',' ',urldecode($_POST['endsuffix']));
$isthere=true;
$fnameproposed='';
while ($isthere) {
$isthere=false;
foreach(glob(str_replace('+',' ',urldecode($_POST['diris'])) . DIRECTORY_SEPARATOR . str_replace('+',' ',urldecode($_POST['prefixis'])) . $fidea . '.*g*') as $filename) {
$isthere=true;
}
if (!$isthere) {
$fnameproposed=str_replace('+',' ',urldecode($_POST['diris'])) . DIRECTORY_SEPARATOR . str_replace('+',' ',urldecode($_POST['prefixis'])) . $fidea . $proposedext;
} else {
$fidea++;
}
}
if ($fnameproposed != '') {
file_put_contents($fnameproposed, base64_decode(explode(";base64,", str_replace(' ','+',urldecode($_POST['newdurl'])))[1]));
}
}
}
}
exit;
}
?>


… and then there is some new “fetch” and Ajax rich HTML and Javascript as per …

New Global Variables and Asynchronous section Javascript …
var myxhr=null, formis=null; var ipuvalid=true, ipis=''; image_list = new Array(); // Thanks to https://stackoverflow.com/questions/74997800/how-to-code-a-synchronous-wrapper-for-jquery-ajax-functions (async () => { const resip = await fetch("./index.php?getmeip=" + Math.floor(Math.random() * 198978675), {/* options here */}); const dataip = await resip.json(); for (var inmip=0; inmip<dataip.length; inmip++) { if (inmip == eval(-1 + dataip.length)) { ipis='' + dataip[inmip]; if (inmip != 0) { ipuvalid=false; setTimeout(nag, 200); } } } })(); // Thanks to https://stackoverflow.com/questions/74997800/how-to-code-a-synchronous-wrapper-for-jquery-ajax-functions (async () => { const res = await fetch("./index.php?diris=images&prefixis=DSC_0&startsuffix=279&endsuffix=364", {/* options here */}); const data = await res.json(); for (var inm=0; inm<data.length; inm++) { image_list[image_index++] = new imageItem(data[inm]); console.log('Added ' + data[inm]); } console.log(data); console.log("Some code after that uses data"); })(); image_list[image_index++] = new imageItem('images/DSC_0279.jpg'); image_list[image_index++] = new imageItem('images/DSC_0280.jpg'); // more usual code follows
New Javascript functions …
function nag() { if (document.getElementById('imgcopycheck')) { document.getElementById('imgcopycheck').title+=' Sorry, we cannot authorize uploads here.'; document.getElementById('imgcopycheck').disabled=true; document.getElementById('imgcopycheck').style.visibility='hidden'; } else { setTimeout(nag, 200); } } function getipvalid() { return ipuvalid; } function uplitc(icontis) { if (icontis.indexOf('data:image/') == 0) { myxhr = new XMLHttpRequest(); formis = new FormData(); formis.append('diris', 'images'); formis.append('prefixis', 'DSC_0'); formis.append('startsuffix', '279'); formis.append('endsuffix', '364'); formis.append('newdurl', icontis); myxhr.open('POST', './index.php'); //, true); myxhr.send(formis); } } function uplit(divo) { var icontis=''; if (divo.innerHTML.indexOf('data:image/') == 0) { icontis=divo.innerHTML; divo.innerHTML=''; divo.title=icontis; myxhr = new XMLHttpRequest(); formis = new FormData(); formis.append('diris', 'images'); formis.append('prefixis', 'DSC_0'); formis.append('startsuffix', '279'); formis.append('endsuffix', '364'); formis.append('newdurl', icontis); myxhr.open('POST', './index.php'); //, true); myxhr.send(formis); } else if (divo.innerHTML.indexOf('"data:image/') != -1) { icontis='data:image/' + divo.innerHTML.split('data:image/')[1].split('"')[0]; divo.innerHTML=''; divo.title=icontis; myxhr = new XMLHttpRequest(); formis = new FormData(); formis.append('diris', 'images'); formis.append('prefixis', 'DSC_0'); formis.append('startsuffix', '279'); formis.append('endsuffix', '364'); formis.append('newdurl', icontis); myxhr.open('POST', './index.php'); //, true); myxhr.send(formis); } }
New HTML span element …
<a id="thedivlink" style="display:block;" title="Click for Temple of Groovy provided by http://www.freesoundtrackmusic.com" alt="Street Art - RJM Programming ... you might see this while loading ... click here now to just play music (Temple of Groovy provided by http://www.freesoundtrackmusic.com) with less variety of imagery ... else please wait for full functionality ..." onclick="javascript: window.open('index-ssmhalf.html','Street Art - Soul Tracker Mechanism (via http://www.freesoundtrackmusic.com) - RJM Programming - http://www.rjmprogramming.com.au (Copyright © 2011 rjmprogramming.com.au all rights reserved.)');" alt="Street Art - RJM Programming ... you might see this while loading ... click here now to just play music (Temple of Groovy provided by http://www.freesoundtrackmusic.com) with less variety of imagery ... else please wait for full functionality ..." title="Click for Temple of Groovy provided by http://www.freesoundtrackmusic.com" href="sound/Temple_of_Groovy-freesoundtrackmusic.mp3" >Street Art - RJM Programming ... you might see this while loading ... click here now to just play music (Temple of Groovy provided by http://www.freesoundtrackmusic.com) with less variety of imagery ... else please wait for full functionality ...</a>&nbsp;<span title="Image copy paste here to upload that way." onclick="event.stopPropagation();" onblur="uplit(this);" onpaste="uplit(this);" contenteditable=true id="imgcopycheck" style="border:2px dotted red;width:50px;height:25px;display:inline-block;">&#x2B06;&#xFE0F; &#x1F5BC;&#xFE0F;</span>

… that is “undercover” to most trying out our Street Art “One Image Website” project.

---

Previous relevant Using Document Writeln Onpaste Tutorial is shown below.

Regarding yesterday’s Using Document Writeln Primer Tutorial you might wonder …

Why involve either/both textarea and div (contenteditable=true) elements as “containers” of content?

Well, with yesterday’s starting onblur (just) event gambit, it’s a very pertinent question, but, today, we introduce onpaste event work, and involving this event with the div element can have it distinguishing itself, able to accept graphical (eg. image) content. For example, the user can have their cursor placed into the div element and have been in an image editor having Edit->Select All^ed and Edit->Copy^ed graphical content, then that can be Edit->Paste^d into the div as graphical content.

As you might imagine, this opens a Pandora’s Box of possibilities regarding image sizing, but we apply inline CSS styling …


style='object-fit:contain;width:100%;height:100%;'


… to the img data URI^ed element within the div element that happens when graphical content is pasted into it, so that the graphical data is unlikely to spill too far outside the div bounds, assuming only one image is pasted, that is.

So feel free to try a changed using_writeln.html first draft Using (Document) Writeln web application for you to try yourself.

---

Previous relevant Using Document Writeln Primer Tutorial is shown below.

The other day we stumbled on some advice leading us to use …


document.writeln([html-content]);


… rather than our usual “go to” …


document.write([html-content]);


And so we wrote a “proof of concept” using_writeln.html first draft Using (Document) Writeln web application for you to try yourself.

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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