We Keep Coding

how to save domtoimage to localstorage

i use dom-to-image javascript package for making div element to png file, i want to save this png file to locastorage and displayed the image on next page how to make it?
i tried localStorage.setItem('testCart', blob) , and the result value is [HTML object blob], i know this is wrong, what should i do?
here is mycode
function onSaveDpn() {
domtoimage.toBlob(document.getElementById("custom-cloth"))
.then(function (blob) {
// code to download file as .png
window.saveAs(blob, "sakaw-custom-depan.png");
// code to save into localstorage
localStorage.setItem( what should I write? )
});
}

Edit, I solved my problem with this
https://www.geeksforgeeks.org/how-to-convert-blob-to-base64-encoding-using-javascript/
this is my new code
function onSaveDpn() {
domtoimage
.toBlob(document.getElementById("custom-cloth"))
.then(function (blob) {
// window.saveAs(blob, "sakaw-custom-depan.png");
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function () {
var base64String = reader.result;
localStorage.setItem("scart", base64String);
};
});
}
I hope this can help you guys

Summernote copy image

I haven't found anything about this anywhere. How can I copy a selected image into the clipboard?
I have created a custom js that adds a button to the popover of the image which works fine but I'm stuck here:
$.extend($.summernote.plugins, {
'imageCopy': function (context) {
var self = this;
var ui = $.summernote.ui,
$editable = context.layoutInfo.editable,
options = context.options,
$editor = context.layoutInfo.editor,
lang = options.langInfo,
$note = context.layoutInfo.note;
context.memo('button.imageCopy', function () {
var button = ui.button({
contents: options.imageCopy.icon,
container: false,
tooltip: lang.imageCopy.tooltip,
click: function () {
var img = $($editable.data('target'));
console.log('copy image=' + img);
}
});
return button.render();
});
}
});
So I don't really know how I can get the data from the currently selected image and put it into the clipboard.

Just referred Summernote docs and other stuff. what I understood is it is providing restoreTarget attribute for getting reference of the selected image. You can get the source of the image through that and copy it to clipboard using Clipboard API.
Here is the code that I've tried.

The snippet does not use a button but shows how to make use of the Clipboard API. Simply click on the image.
It will be blocked on iframes. The errormessage refers to https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-permissions-in-cross-origin-iframes which depends on the flags allowed for the snippets here.
Also type "image/jpeg" returns an error while "image/png" works.
img.onclick = ({ target }) => {
fetch(target.src)
.then(function(response) {
return response.blob()
})
.then(function(blob) {
navigator.clipboard.write( [new ClipboardItem({ [blob.type]: blob })]).then(
function () {
console.log("Yay");
},
function (error) {
console.error(error);
}
);
});
};
<img id="img" src="https://i.imgur.com/I6N0hf2.png" style="height: 100px;">

Direct Upload of Image to S3 after Manual Cropping with Cropper.js

This is my first post, so be gentle! I'm a Rails beginner and clueless with JavaScript/JQuery...
I have a Rails project which requires that the user be able to select a file and be presented with a preview image, which they can then crop as they wish before uploading the cropped image asynchronously.
I have successfully implemented direct upload to S3 using the JQuery FileUpload plugin (following this tutorial) and I am able to present the user with a preview image which they can crop using Cropper.js. However I need help with the last step of uploading the cropped image.
Here is the JS I have so far for handling the image crop/upload to S3:
$(document).ready(function() {
$('.directUpload').find("input:file").each(function(i, elem) {
var fileInput = $(elem);
var form = $(fileInput.parents('form:first'));
var submitButton = form.find('input[type="submit"]');
var progressBar = $("<div class='bar'></div>");
var barContainer = $("<div class='progress'></div>").append(progressBar);
fileInput.after(barContainer);
fileInput.fileupload({
fileInput: fileInput,
url: form.data('url'), //read AWS config via form attributes
type: 'POST',
autoUpload: false, // prevent upload start on file selection
formData: form.data('form-data'),
paramName: 'file',
dataType: 'XML',
replaceFileInput: false,
The code above initializes JQuery FileUpload and passes my S3 configuration data.
Next I use the JQuery FileUpload's 'add' callback to display a preview image/cropbox, and to upload the image to S3 when the user clicks an 'Upload' button:
add: function (e, data) {
if (data.files && data.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#preview_image').attr('src', e.target.result); // insert preview image
$('#preview_image').cropper() // initialize cropper on preview image
};
reader.readAsDataURL(data.files[0]);
};
$('#upload_image').on('click', function(){
$('#preview_image').cropper('getCroppedCanvas').toBlob(function (blob){
var croppedFile = new File([blob], 'cropped_file.png')
// How do I now get my cropped file data to upload instead of original file?
})
data.submit();
});
},
It is the last part, above, where I am now stuck - I've created a file from the cropped area, but have been unable to find a way to upload it instead of the original image.
The remaining code deals mainly with displaying upload progress and building an image URL that I can save to my database for image retrieval.
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
progressBar.css('width', progress + '%')
},
start: function (e) {
submitButton.prop('disabled', true); //disable submit button while image is loading
progressBar.
css('background', 'green').
css('display', 'block').
css('width', '0%').
text("Loading...");
},
done: function(e, data) {
submitButton.prop('disabled', false);
progressBar.text("Uploading done");
// extract key from S3 XML response and generate URL for image
var key = $(data.jqXHR.responseXML).find("Key").text();
var url = '//' + form.data('host') + '/' + key;
// create hidden field containing image URL, which can then be stored in model
var input = $("<input />", { type:'hidden', name: 'image_url[]', value: url })
form.append(input);
},
fail: function(e, data) {
submitButton.prop('disabled', false);
progressBar.
css("background", "red").
text("Failed");
}
});

This worked for me
var croppedFile = new File([blob], 'cropped_file.png');
data.files[0] = croppedFile;
data.originalFiles[0] = data.files[0];
or just
data.files[0] = new File([blob], 'cropped_file.png');
data.originalFiles[0] = data.files[0];
and then
data.submit()

How to process an image in url to upload on the server in cordova

I am having a problem with this code. i wanna process the cordova android image url ( ie. stored in localStorage ) to upload in my web server.
function processImages(list, i){
var images = list[i].images;
images && images.forEach(function(image, j){
window.resolveLocalFileSystemURI(image, function(entry) {
var reader = new FileReader();
reader.onloadend = function(evt) {
list[i].images[j] = evt.target.result;
}
reader.onerror = function(evt) {
alert("error");
}
entry.file(function(f) {
//alert("Image is added");
reader.readAsDataURL(f);
}, function(e) {
alert('Image process error : '+e);
});
});
});
}
This code runs good if i am enabling #alert("Image is added"); this alert.
without this alert the app is shutting down by giving error unfortunately appname has stopped.
Its also not working for n number of images of size more than 2mb.
Note : consider async call and image size is more than 2mb each minimum 10 image per record.
Please help me !!!
Thanks

pass input file to background script

I want to pass the input file from content page to extension background script, and then load it with FileReader() in the extension background script.
So in the web page I have a <input type="file"> and from onchange event I pass the file from content script to background page like this:
var myfile = document.getElementById('fileid').files[0];
chrome.runtime.sendMessage({myevent: "start", inputfile: myfile}, function(response) {});
in the background script I have this:
chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
if(message.myevent==="start")
{
var reader = new FileReader();
reader.onload = function(e) {
// file is loaded
}
reader.readAsArrayBuffer(message.inputfile);
}
});
but FileReader not load it, I'm not sure if this is correct way , but all i need is to pass the input file element to background script and load it with FileReader to send it with HTTP POST from background script. Please tell me what is wrong or how to do it correctly. It will help a lot if I see a sample code, because I'm new to chrome extension development, and not so experienced.

All messages send through the Chrome extension messaging API MUST be JSON-serializable.
If you want to get the contents of a file at the background page, you'd better create a (temporary) URL for the File object, pass this URL to the background page and use XMLHttpRequest to grab its contents:
// Create URL
var url = URL.createObjectURL(myfile);
// Pass URL to background page (ommited for brevity) and load it..
var x = new XMLHttpRequest();
x.onload = function() {
var result = x.response;
// TODO: Use [object ArrayBuffer]
};
x.open('GET', url); // <-- blob:-url created in content script
x.responseType = 'arraybuffer';
x.send();
Though why do you want to send the file to the background page? Content scripts can also send cross-origin requests.

This works for chrome. You could find the whole production code here.
https://github.com/Leslie-Wong-H/BoostPic/tree/7513b3b8d67fc6f57718dc8b9ff1d5646ad03c75/BoostPic_Chrome/js
main.js:
// Crossbrowser support for URL
const URLObj = window.URL || webkitURL;
// Creates a DOMString containing a URL representing the object given in the parameter
// namely the original Blob
const blobUrl = URLObj.createObjectURL(imageBlob);
console.log(blobUrl);
chrome.runtime.sendMessage(blobUrl, (res) => {
imgUrl = res;
console.log(imgUrl);
clearInterval(refreshIntervalId);
// To prevent that it happens to halt at " Image uploading ..."
setTimeout(() => {
var imgUrlText = document.querySelector(imgUrlTextBoxId);
imgUrlText.value = imgUrl;
}, 1000);
// double check to clear interval to prevent infinite error loop of LoadingStateOne
// Hope it works.
setTimeout(() => {
clearInterval(refreshIntervalId);
}, 500);
console.log("Stop uploading state message");
background.js:
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.startsWith("blob")) {
console.log("RECEIVED");
getBase64Url(request).then((res) => {
console.log("Arrived here");
// Acquired from https://stackoverflow.com/questions/18650168/convert-blob-to-base64/18650249#
const reader = new FileReader();
reader.readAsDataURL(res);
reader.onloadend = function () {
const base64data = reader.result;
console.log(base64data);