Develop Reference

copy a text / image generated in html

I would know if it's possible to copy in html a specific code section
As you see I receive a text and an image (enter image description here), In my console I can see the html code
<div class="row">
<div class="col-md-6">
<img src="https://images.pexels.com/photos/338504/pexels-photo-338504.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Desktop" class="img-fluid">
</div>
<div class="col-md-6">
<p>Welcome to the world of desktops. Whether you’re looking for a powerful gaming PC or an everyday workstation, we have something to suit your needs. Our range of desktops are designed to provide the perfect balance between performance and portability, so you can stay productive wherever you are.</p> ...
</div>
</div>
I used the clipboard js to copy but it does not take in consideration the image and the html code.
Do you have any idea to resolve this and take in consideration just the html code generated ?
$(document).ready(function() {
// Initialize the clipboard
var clipboard = new ClipboardJS("#copyButton");
// Handler for when the copy button is clicked
clipboard.on("success", function(e) {
// Show a tooltip indicating that the text was copied
$(e.trigger).attr("data-original-title", "Copied!").tooltip("show");
e.clearSelection();
});
$("#send").click(function() {
let message = $("#messageGpt").val();
let engine = $("#engine").val();
$.post("' . $url . '", {message: message, engine: engine}, function(data) {
$("#TexArea-output").html(data);
// Show the copy button after the chat message is generated
$("#copyButton").removeClass("d-none");
});
});
});

onsen ui: access ons-dialog's DOM elements from parent page

I've managed to build a reasonable application in my free time looking at the tutorials but I'm stuck at being able to access (or know if its possible to access) the DOM element in an ons-dialog.
I'm building image upload feature for an image captured from camera.
After clicking capture button on a parent page and capturing via the camera (which is working fine until this stage), I want the image to show up in a ons-dialog box where user can put captions, tags, etc before uploading the image.
Here's my code:
On the parent page inside HomepageController where "capture" button is handled:
var uploadImageDialog_var = ""; // global variable in js file outside HomepageController definition
// ...
// access camera, capture pic, go to success function with captured image data:
// ...
function onCaptureSuccess(data) {
ons.createDialog('upload_image_dialog.html', {parentScope: $scope}).then(function(dialog) {
uploadImageDialog_var = dialog;
uploadImageDialog_var.show();
});
var viewport = document.getElementById('viewport');
document.getElementById("test_img").src = "data:image/jpeg;base64," + data; <------ THIS LINE
console.log(document.getElementById('test_img').src);
};
On the html side, "viewport" is a div on the ons-dialog:
<ons-template id="upload_image_dialog.html" var="uploadImageDialog" ng-controller="HomepageController">
<ons-dialog cancelable><!-- animation-options="{duration: 0.2, delay: 1, timing: 'ease-in'}">-->
<div class="list__item list__item center" style="opacity: 0.4; border-bottom: 1px solid #0d96d7" > Tag My Upload </div>
<div id="viewport" class="" style="width: 300px; height:300px">
<img style="" id="test_img" src="" />
</div>
<br/> <br/><br/>
<ons-button class="center" modifier="large" ng-click="uploadPictureOK()">Upload!</ons-button>
</ons-dialog>
</ons-template>
document.getElementById("test_img") in above js looks like is working, and the changes to test_img's src are showing up when I console.out it, but the actual dialog is displayed with old dummy image.
Please let me know if I need to explain / provide better, and excuse me if this is trivial.

I figured it out. I accidentally had a ng-controller definition on both the parent page's and the template when the two were declared separately. That was leading to different accesses to $scope/other variables. I clubbed them up and it is working like a charm. :-)

How do I upload image/s and store in Local Storage (angularjs)

What I want to do…
User clicks ‘upload image’ button
User selects an image from local machine
Image is uploaded to the page
Image is stored in local storage
User can navigate away from view and then return to the view and see the previously uploaded images.
Repeat steps 1 - 5
How I think I can achieve it…
ng-flow plugin to manage user uploads
convert image to base64 and store image as string in local storage
get base64 string and convert it to image for preview.
Why I want to do this…
For phase 1 I need to show my tutor how my application will work, so I just need to imitate the images stored in a database, this is why I'm using local storage - I understand this is bad practice but I also need to show use of local storage.
My tutor encouraged me to use stack overflow and knows I posted this.
Code so far…
My view
<!-- Upload multiple images with the extensions of png,jpg, jpeg & gif -->
<div flow-init="{target: '/upload', singleFile: false}" flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]" flow-files-submitted="$flow.upload()">
<div class="jumbotron">
<div class="container">
<div><span class="btn btn-default btn-selectimage" flow-btn flow-attrs="{accept:'image/*'}" onchange="previewFile()">Select image</span></div>
<br><p>Only PNG,GIF,JPG files allowed.</p>
</div>
</div>
<div>
<div class="thumbnail" ng-hide="$flow.files.length">
<img src="images/no-images-placeholder.jpg" />
</div>
<div class="thumbnail col-md-3" ng-show="$flow.files.length" ng-repeat="image in $flow.files">
<img id="image-handle" class="preview-blob" flow-img="image" /><br>
<img class="preview" ng-src="{{imageStrings[$index]}}"/>
<div class="image_option_controls">
<span class="btn glyphicon glyphicon-trash" ng-show="$flow.files.length" ng-click="image.cancel()"></span>
<span class="btn glyphicon glyphicon-heart pull-right" ng-click="image.like()"></span>
</div>
</div>
</div>
</div>
My Controller - so far...
angular.module ( 'myApp' )
.controller (
'ProtectedCtrl', function ($localStorage, $scope)
{
var myImage = [];
$localStorage.myImage = document.getElementById('image-handle');
console.log($localStorage.myImage);
});
I can select images and preview them on the page, when I inspect the page the image src has been converted to base 64. From this point on I'm stuck on how to get the base 64 string and store it.
Sorry for the rookie post, any tips or pointers would be greatly appreciated.
Thanks in advance!

I recently read an article for the very same purpose and one way to do this for an image, is to load into a canvas element. Then, with a canvas, you can read out the current visual representation in a canvas as a Data URL. Following is the code snippet
// Get a reference to the image element
var elephant = document.getElementById("elephant");
// Take action when the image has loaded
elephant.addEventListener("load", function () {
var imgCanvas = document.createElement("canvas"),
imgContext = imgCanvas.getContext("2d");
// Make sure canvas is as big as the picture
imgCanvas.width = elephant.width;
imgCanvas.height = elephant.height;
// Draw image into canvas element
imgContext.drawImage(elephant, 0, 0, elephant.width, elephant.height);
// Get canvas contents as a data URL
var imgAsDataURL = imgCanvas.toDataURL("image/png");
// Save image into localStorage
try {
localStorage.setItem("elephant", imgAsDataURL);
}
catch (e) {
console.log("Storage failed: " + e);
}
}, false);
DataURL is a base64 string as localstorage cannot store images directly and It is not that common to store images in localstorage. I maybe wrong though. However, here is a link that is gonna link help you further https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/

Flippant in RoR project

I am newbie in front-end web development.
I am using flippant.js for flipping the dialogue.
<div id="overlay-box" class="overlayBox">
<a class="closeBtn" onClick="closePop()">X</a>
<button id="flipCard">Flip</button>
<div class="content" ></div>
</div>
<script type="text/javascript">
var front = document.getElementById("overlay-box")
var back_content = "
<div class = 'overlayBox' style='top: 50.5px; left: 338px; display: block;'>
<h2>Hello</h2>
<a class = 'closeBtn' onClick = 'closePop()'>Y</a>
<button id = 'closeCard'>Back</button>
<div class = 'content'></div>
</div>"
var back
document.getElementById("flipCard").addEventListener('click',function(e){
back = flippant.flip(front, back_content,'card')
document.getElementById("closeCard").addEventListener('click',function(e){
back = back.close();
})
})
But the flippant plug-in asks for back_content rather than full HTML file.
I want to override that but facing a problem.
I tried to change the flippant.js file where it was taking content and converting that into HTML whereas the front document was not converted.
I am able to use it but then I will have to write my all HTML code in back_content variable which is ugly design.
I also tried to give HTML document directly by $(HTML_file).html but still no success.
The other problem is when I am giving all the HTML in the variable then it is not calling the js classes and all styling code also
Please suggest how to use flippant plug-in.
Thanks in advance
For flippant.js code refer to its github page https://github.com/mintchaos/flippant.js/blob/master/flippant.js

HTML Service Assign URL to Image

I have 4 images that all have hyperlinks associated with them. I'm trying to pull the image link and the hyperlink from a Google Spreadsheet to be displayed in the web app.
The hyperlinks are pulling over just fine but I get an error when I try to pull the link for the image. I've hunted online and all solutions don't seem to work for me. How can I pull a link from the Google Spreadsheet and set it as the source for the image?
This is the error I receive: Cannot set property 'src' of null
Here's a chunk of my code:
<div align="center">
<div class="contener_slideshow">
<div class="contener_slide">
<div class="slid_1"><img id="oneS" src=""></div>
<div class="slid_2"><img id="twoS" src=""></div>
<div class="slid_3"><img id="threeS" src=""></div>
<div class="slid_4"><img id="fourS" src=""></div>
</div>
</div>
</div>
<script>
function onSuccess(data){
var oneS = document.getElementById('link1');
oneS.innerHTML = data[1][2];
try{
document.getElementById("oneS").src = data[1][1];
}catch(error){
alert(error);
}
}
google.script.run.withSuccessHandler(onSuccess)
.getData();

The innerHTML in data[1][2] must be wrong. Use a console.log() statement to find out what the value of data[1][2] is:
<script>
function onSuccess(data){
console.log('data: ' + data);
console.log('data[1][2]: ' + data[1][2]);
var oneS = document.getElementById('link1');
oneS.innerHTML = data[1][2];
Open the browser's console, run the code and see what has printed to the log.
This Line:
oneS.innerHTML = data[1][2];
Deletes all the original HTML out of the <a> tag with the id link1, and replaces it with whatever data[1][2] returns. So if data[1][2] is empty, then there is no <img> tag anymore with the oneS id. So, when you try to get it, it's null. Therefore the error msg:
Cannot set property 'src' of null
I'm assuming that data[1][2] is just the link, not the link inside of the HTML. What you are assigning for HTML can't just be URL address. What you are assigning needs to be:
<img id="oneS" src="the URL Here">
Hard coded it would look like this:
oneS.innerHTML = <img id="oneS" src="the URL Here">;
If what you are getting out of the spreadsheet is just the URL, you can use a text formula to create the HTML
var htmlToInject = "<img id='oneS' src='" + data[1][1] + "'>";
document.getElementById("oneS").src = htmlToInject;