Inserting image into existing OneNote page via REST api not working - onenote

I can insert an image when I create a new page but when I try to add an image into an existing page I end up with an image link but no image displayed.
Image link only
This is the request:
Content-Disposition: form-data; name="Commands"
{
'Target':'body',
'Action' : 'append',
'Content' : '<div data-id=testdiv1><div>Chat message with mike</div></div>'
},
{
'Target':'#testdiv1',
'Action' : 'insert',
'Content' : '<img src="image1"/>'
}
Content-Type: image/png
Content-Disposition: form-data; name="image1"
imagedata....
Hopefully someone can see what I'm doing wrong or point me at a sample (preferably UWP based but willing to look at anything).
Thanks for the help.

The request above has 2 patch actions, first is appending a div to the body and the section action is inserting an image to the div that was just appended.
Can you try the following instead?
Content-Disposition: form-data; name="Commands"
{
'Target':'body',
'Action' : 'append',
'Content' : '<div data-id=testdiv1>
<div>Chat message with mike</div>
<img src="name:image1"/>
</div>'
}
Content-Type: image/png
Content-Disposition: form-data; name="image1"
imagedata....
The two changes are:
add the name: prefix in the img tag src.
you can combine both patch actions into one action.
Also don't forget the usual multipart gotchas like ensuring boundary is provided between each part etc... Our GitHub sample can be useful.

Related

Why is my svg image not found while the url is correct?

I'm using https://identicon-api.herokuapp.com/ to embed identicons in my page. You can choose either SVG or PNG. PNG works just fine, but for performance reasons, I want to use SVG. But when I use SVGs, the image isn't found, and the alt-text is displayed.
Nevertheless, the URL is valid, and when I open the image in a new tab, it's rendered correctly.
<img
v-if="iconsenabled"
style="max-width:1.75em"
:src="'https://identicon-api.herokuapp.com/'+e.author+'/2000?format=svg'"
:alt="e.author+`'s identcon.`"
:title="e.author+`'s identicon. Toggle 'show icons' to see the name instead`"
/>
(BTW, Yes, I'm using Vue, but that doesn't affect anything)
The SVG has an incorrect MIME type set by the server. <img> requires the MIME type to be image/svg+xml, but https://identicon-api.herokuapp.com/ currently sets it to text/html, which causes a loading error:
For reference, here's a sample SVG with the proper MIME type that renders correctly in an <img>:
<img src="https://upload.wikimedia.org/wikipedia/commons/4/42/Sample-image.svg" width="200">
As a workaround, you could fetch the SVG, convert it to a base64 string, and use that as a data URL:
<img :src="'data:image/svg+xml;base64,' + __SVG_BASE64__">
Example:
new Vue({
el: '#app',
data: () => ({
myImgUrl: ''
}),
mounted() {
fetch('https://identicon-api.herokuapp.com/tony19/2000?format=svg')
.then(resp => resp.text())
.then(text => this.myImgUrl = 'data:image/svg+xml;base64,' + btoa(text))
}
})
<script src="https://unpkg.com/vue#2.6.12"></script>
<div id="app">
<img :src="myImgUrl" width="200" height="200">
</div>

How to use Base64 Encoded Image as img tag's source?

now, I am make thumbnail pages using BASE64.
I store Image on server, and call them back as Base64 on client.
I want use these Base 64 encoded Imgs as src.
It it work well
. but, I got an err like that
GET http://localhost:8080/%7B%7Bitem.THUMBNAIL%7D%7D 404
what is problem? and it is proper way to use base64 as src without any convert?
here is my Source
Script
$http.get( "app/dashboard/recentWithInfo").then( function( rtn) {
rtn.data.map( item => {
if( item.THUMBNAIL){
item.THUMBNAIL = "data:image/png;base64," +item.THUMBNAIL.body;
}
})
$scope.items = rtn.data;
});
HTML
<img class="block-thumbnail-img" ng-if="item.THUMBNAIL != null" src="{{item.THUMBNAIL}}">
<h2 ng-if="item.THUMBNAIL == null" style="color:#ccc"> No THUMBNAIL</h2>
Additionally, I use Springboot and AngularJS.
Thanks in advance!
Yes you can use base64 images but make your the images are small and less in no.. below is a basic code where base64 images are called into html pages and rendered
<div>
<p>Taken from wikpedia</p>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>
check the fiddle http://jsfiddle.net/hpP45/

How to get the image which is clicked in rich text?

There is a real-time communication tool written in QML, and the message is transmitted in html format.
simple code:
Rectangle{
width:300
height: 300
Rectangle{ // simple bubble
anchors.centerIn: parent
width: parent.width-100
height: parent.height-100
color:"#f0f0f0"
radius: 10
TextEdit { //simple message show
anchors.fill: parent
readOnly: true
selectByMouse: true
clip: true
text: "<!DOCTYPE html>
<html>
<head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/></head>
<body style=\"font-family:Geneva,Helvetica,Arial,sans-serif; font-size: 12px;\">
this is an image:
<img alt=\"\" src=\"file:/local/image.png\" />
</body>
</html>
"
textFormat: Text.RichText
}
}
}
And my question is how to get a clicked image from a BubbleChatWidget?
like:
click action
Similar question:here
When I reference Telegram (web), I found that Telegram messages would not have words and pictures together. link
You migth parse the text beforehand, and wrap each image in a link <a ...>...</a>.
This will give you the possibility to use the linkActivated(link)-signal to register the click.
See the documentation:
http://doc.qt.io/qt-5/qml-qtquick-textedit.html#linkActivated-signal
http://doc.qt.io/qt-5/qml-qtquick-text.html#linkActivated-signal

How to customize tumblr 404 URL not found page

It seems Tumblr does not provide a div tag to customize the look and feel of the 'url not found' page.
Is there any way other way to customize the 404 (URL NOT FOUND) Page?
Edit: this method only works on tumblogs that don't have pages.
Ask, Submit, and other pages created in the Customize section will be detected as "not found" with this code.
Description
Tumblr uses the normal {block:Posts} loop for static pages but without assigning any variables like {PostID}. If we use a class like post{PostID}, on 404 pages all static pages we'll see a .post element, whereas on posts the elements will be something like .post125678
Example
{block:Posts}
<div class="post{PostID}">
{block:Photo}all your blocks here{/block:Photo}
</div>
{/block:Posts}
Using javascript:
var is404 = document.getElementsByClass('post').length;
Using CSS:
.post {
/*this is a 404 page, customize it*/
}
Cool javascript-less example
{block:Posts}
<div class="post{PostID}">
{block:Photo}all your blocks here{/block:Photo}
</div>
{/block:Posts}
<div class="fill-me"></div>
In CSS:
.post { /*Hide Tumblr's 404 message*/
display: none;
}
.post + .fill-me:before { /*use your message and style*/
content: 'This page was not found!';
font-size: 2em;
}
Edit: Possible fixes
To fix this method, we should find a {tag} that is only shown on pages but not on 404 pages.
{ShortURL}, if it weren't buggy, could be used since in theory 404 pages shouldn't have a ShortURL.
I also tried {Permalink} but it behaves like {PostID} in this case.
Sadly there isn't an official way to do this.
However, if your using javascript / jQuery, you could sniff for the following text:
The URL you requested could not be found
Example jQuery code:
$(document).ready(function() {
$("p:contains(The URL you requested could not be found.)").html('YOUR TEXT HERE');
});
I would be more incline to add a class to the parent / body element so you can style the whole page differently.
Hope that helps.
This worked for me
<script type="text/javascript">
/* Works for me */
var text_posts = document.getElementsByClassName("regular");
var text_404 = "The URL you requested could not be found.";
var title_404 = "Not Found";
if(text_posts.length == 1){
var bodyNode = text_posts[0].lastChild;
if(bodyNode.previousSibling.textContent == text_404) {
// titleNode.innerHTML = "<a href='/'>Not Found</a>";
var blog_loc = "http://" + document.domain + "/";
var query = window.location.href.slice(blog_loc.length);
var tokens = query.toLowerCase().split('/');
var keyword = tokens.join(" ");
var bodyContent = "Looks like you came from an old bookmark, or just looking for a page that doesn't exist. Were you looking for <span class='tg'><a href='/search/"+ escape(keyword) +"'>"+keyword+"</a></span>";
bodyNode.previousSibling.innerHTML = bodyContent;
}
}
</script>
I was research this problem too, and I found a answer.
If you gotta to 404 Error page, that post is no have any PostID,
so you can just check {PostID} is null or not to check it is 404 page.

Image tags returned by KCfinder are incomplete on CKeditor

Image tags returned by KCfinder are incomplete on CKeditor and not displayed/saved correctly. Note that i am using an inline CKEditor and KCFinder for image upload.
Here are the integration codes:
ckeditor/config.js
config.filebrowserBrowseUrl = base_url+'/js/kcfinder/browse.php?type=files';
config.filebrowserImageBrowseUrl = base_url+'/js/kcfinder/browse.php?type=images';
config.filebrowserFlashBrowseUrl = base_url+'/js/kcfinder/browse.php?type=flash';
config.filebrowserUploadUrl = base_url+'/js/kcfinder/upload.php?type=files';
config.filebrowserImageUploadUrl = base_url+'/js/kcfinder/upload.php?type=images';
config.filebrowserFlashUploadUrl = base_url+'/js/kcfinder/upload.php?type=flash';
On page HTML
<div id="page_body" contenteditable="true" class="full">...</div>
On page JS
<script type="text/javascript">
CKEDITOR.disableAutoInline = true;
var editor = CKEDITOR.inline( 'page_body', {
on: {
focus: function(event){
var data = event.editor.getData();
alert(data);
},
blur: function( event ) {
var data = event.editor.getData();
var page_id = <?php echo $this->uri->segment(3) ?>;
var page_link =$("#page_link").val();
$.ajax({
type: 'POST',
url: '<?php echo site_url('admin/dashboard/ajaxChangePageData') ?>',
data: { page_id: page_id, page_body: data,page_link:page_link },
beforeSend:function(){},
success:function(data){},
error:function(){ alert("Error"); }
});
}
}
} );
</script>
Strange is that i can browse the server/upload without any error with KCFinder i can even select an image from the server and the image is shown successfully in the content. but the code width height info are not present after a reload. I figured that the html created for the image was incomplete
in source mode i see-
<img alt="" src="/gchalk/content/images/333(1).jpg" 300px; height: 224px;" />
The situation just gets worse if for the second time i make some changes to the div say add some text. The image is lost and its treated as text, the above piece of code is shown as
in source mode-
<img alt="" data-cke-saved-src="/gchalk/content/images/333(1).jpg" src="/gchalk/content/images/333(1).jpg" 300px;="" height:="" 224px;"="">
and it appears on browser/editor as -
<img alt="" data-cke-saved-src="/gchalk/content/images/333(1).jpg" src="/gchalk/content/images/333(1).jpg" 300px;="" height:="" 224px;"="">
I am tearing my hair for a day and cant find a way around. Please help me out to figure how to solve it.
Oh, and for the record the text is saved in MySQL as "TEXT" through the ajax post i am pretty sure its not a problem but still just saying!
I notice the image tag gets messed up in the default ckeditor(not inline) too.
Things that could effect the output of your code :
1- Magic Quotes when using PDO. if they are ON, turn them OFF in you php.ini! they are deprecated. Why am I telling you this? will because in your source mode you had 300px; height: 224px;" when you stored it and displayed it you had 300px;="" height:="" 224px;"=""
2- your CKeditor package. Try to download and reupload your Ckeditor (Update it to the last version if possible)
other than that, I do not see anything wrong with the code you have provided. Good luck!