I use paste to handle a picture, the picture only 3.6m, but it change 23m after i paste the picture.
document.addEventListener('paste', function (event) {
var items = event.clipboardData && event.clipboardData.items;
var file = null;
if (items && items.length) {
// 检索剪切板items
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image') !== -1) {
file = items[i].getAsFile();
break;
}
}
}
console.error(file.size); // 23m
// 此时file就是剪切板中的图片文件
});
I do not know why?
When i use input to handle it, the picture size is normal.
document.getElementsByTagName('input')[0].addEventListener('change', function(e) {
const file = e.target.files[0];
console.log(file.size); // 3.6m
})
A 3.6m image using paste API becomes 23m. If you use input mode to process or 3.6m, why？
Related
I have a script (with a lot of stolen parts you may recognise) that runs through a selected group of images, copies the image and filename and applies to a template in Photoshop. Everything works just fine, except that Photoshop somehow strips umlauts from my strings, ie, Björn becomes Bjorn.
"Logging" through an alert inside of Photoshop (line #30 below) shows that it has the correct string all the way until it's applied as the textItem.contents.
Code provided below, thanks for any help!
#target photoshop
app.displayDialogs = DialogModes.NO;
var templateRef = app.activeDocument;
var templatePath = templateRef.path;
var photo = app.activeDocument.layers.getByName("Photo"); // keycard_template.psd is the active document
// Check if photo layer is SmartObject;
if (photo.kind != "LayerKind.SMARTOBJECT") {
alert("selected layer is not a smart object")
} else {
// Select Files;
if ($.os.search(/windows/i) != -1) {
var photos = File.openDialog("Select photos", "*.png;*.jpg", true)
} else {
var photos = File.openDialog("Select photos", getPhotos, true)
};
if (photos.length) replaceItems();
}
function replaceItems() {
for (var m = 0; m < photos.length; m++) {
if (photos.length > 0) {
// Extract name
var nameStr = photos[m].name;
var nameNoExt = nameStr.split(".");
var name = nameNoExt[0].replace(/\_/g, " ");
// Replace photo and text in template
photo = replacePhoto(photos[m], photo);
// alert(name);
replaceText(templateRef, 'Name', name);
templateRef.saveAs((new File(templatePath + "/keycards/" + name + ".jpg")), jpgOptions, true);
}
}
}
// OS X file picker
function getPhotos(thePhoto) {
if (thePhoto.name.match(/\.(png|jpg)$/i) != null || thePhoto.constructor.name == "Folder") {
return true
};
};
// JPG output options;
var jpgOptions = new JPEGSaveOptions();
jpgOptions.quality = 12; //enter number or create a variable to set quality
jpgOptions.embedColorProfile = true;
jpgOptions.formatOptions = FormatOptions.STANDARDBASELINE;
// Replace SmartObject Contents
function replacePhoto(newFile, theSO) {
app.activeDocument.activeLayer = theSO;
// =======================================================
var idplacedLayerReplaceContents = stringIDToTypeID("placedLayerReplaceContents");
var desc3 = new ActionDescriptor();
var idnull = charIDToTypeID("null");
desc3.putPath(idnull, new File(newFile));
var idPgNm = charIDToTypeID("PgNm");
desc3.putInteger(idPgNm, 1);
executeAction(idplacedLayerReplaceContents, desc3, DialogModes.NO);
return app.activeDocument.activeLayer
};
// Replace text strings
function replaceText(doc, layerName, newTextString) {
for (var i = 0, max = doc.layers.length; i < max; i++) {
var layerRef = doc.layers[i];
if (layerRef.typename === "ArtLayer") {
if (layerRef.name === layerName && layerRef.kind === LayerKind.TEXT) {
layerRef.textItem.contents = decodeURI(newTextString);
}
} else {
replaceText(layerRef, layerName, newTextString);
}
}
}
Had the same problem and tried everything I had in my developer toolbox... for around 3 hours ! without any success and then I found a little hack !
It seems that photoshop is uri encoding the name of the file but don't do it in a way that allow us to do a decodeURI() and get back those special characters.
For exemple instead of "%C3%A9" that should be "é" we get "e%CC%81". So what i do is a replace on the file name to the right UTF-8 code and then a decodeURI. Exemple :
var fileName = file.name
var result = fileName.replace(/e%CC%81/g, '%C3%A9') // allow é in file name
var myTextLayer.contents = decodeURI(result);
Then you can successfully get special chars and in my case accent from filename in your text layer.
You can do a replace for each characters you need for me it was :
'e%CC%81': '%C3%A9', //é
'o%CC%82': '%C3%B4', //ô
'e%CC%80': '%C3%A8', //è
'u%CC%80': '%C3%B9', //ù
'a%CC%80': '%C3%A0', //à
'e%CC%82': '%C3%AA' //ê
I took UTF-8 code from this HTML URL Encoding reference : https://www.w3schools.com/tags/ref_urlencode.asp
Hope it will help somebody one day because nothing existed online on this bug.
I have created an upload function that puts the uploaded data in an zip file (with jszip) which works perfectly fine. But when i try to add the content of the files that are uploaded to the jszip folder they are just empty.
Through printing out the array that I want to add the console I saw that for some reason there is no data in the array when it is used in the for loop.
var files = filesToRead;
var fragmente_name = [];
for (var i = 0, f; f = files[i]; i++) {
fragmente_name.push(f.name);
}
console.log(fragmente_inhalt);
for(var i = 0; i < fragmente_name.length; i++) {
console.log(fragmente_inhalt[i]);
if(element == "ambeth_script_upload") {
script_attachments.file(fragmente_name[i], fragmente_inhalt[i]);
} else if(element == "folder_upload") {
watcher_folder.file(fragmente_name[i], fragmente_inhalt[i]);
}
}
I'm working on a React application and would like to setState to photo sources before uploading. I'm trying to do it with this function here:
const getImagesHandler = () => {
let fileinput = document.getElementById("file-input");
let files = fileinput.files;
let photos = [];
let i = 0;
for(i=0; i<files.length;i++){
photos.push(files[i].SOURCE??);
}
this.setState({Photos: photos)
}
const getImagesHandler = () => {
let photos = [];
var fi = document.getElementById('file-input'); // GET THE FILE INPUT.
// VALIDATE OR CHECK IF ANY FILE IS SELECTED.
if (fi.files.length > 0) {
// RUN A LOOP TO CHECK EACH SELECTED FILE.
for (var i = 0; i <= fi.files.length - 1; i++) {
console.log(fi.files.item(i));
photos.push(fi.files.item(i));
}
}
this.setState({ Photos: photos})
I want to upload list of images from a folder and stored them as bytestream in database. I want to give angularjs the folder containing the images instead of selecting multiple files . The part of the code responsible is given below.
$scope.uploadMultipleQuestions = function(e) {
var questionList = []
var difficultyLevel = vm.question.difficultyLevel;
var theFiles = e.files;
for (var i = 0; i < theFiles.length; i++) {
var ques = {};
ques.questionString = theFiles[i].name;
DataUtils.toBase64(theFiles[i], function(base64Data) {
$scope.$apply(function() {
ques.questionImage = base64Data;
});
[![enter image description here][1]][1]
});
ques.questionImageContentType = theFiles[i].type;
ques.questionString = theFiles[i].webkitRelativePath.split("/")[1];
questionList.push(ques);
Question.uploadMultipleQuestions(questionList);
}
for (var i = 0; i < questionList.length; i++) {
console.log(questionList[i]);
}
//Question.uploadMultipleQuestions(questionList);
}
But the problem is I am getting the following details in my log.(Screenshot attached below)
As you can see only the last object contains image data whereas none of the others have any image content.
Let me know why this problem is coming and how to solve the same.
It take a while to convert image to base64, so you have to upload your image after ques.questionImage is filled.
var uploadMultipleQuestions = function(files, i, output) {
if (files.length == i) {
for(var j=0;j<output.length;j++)
console.log(output[j]);
return Question.uploadMultipleQuestions(output);
}
DataUtils.toBase64(files[i], function(base64Data) {
output.push({
questionString: files[i].name,
questionImageContentType: files[i].type,
questionString: files[i].webkitRelativePath.split("/")[1],
questionImage: base64Data
});
uploadMultipleQuestions(files, i+1, output);
});
}
$scope.uploadMultipleQuestions =function(e){
var theFiles = e.files;
uploadMultipleQuestions(theFiles, 0, []);
}
Working on the Custom File upload application. I have 2 major issues:
The following given below code is not Opening the File Dialogue Box for Mozilla and IE.
In Chrome its working, but when I select File on First Click, it never adds file to the body. But in second click it adds the file which was Browse in First Click to the body.
Any help for the above issues will be appreciated.
function perform1Click(node) {
alert("INIT");
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, false);
node.dispatchEvent(evt);
alert(3)
getFile(evt);
}
function getFile(event) {
var files = event.target.files;
var totalSize = 0;
if (totalSize > 1024*10) {
alert('Total size exceed 1 Mb.');
return;
}
//alert(files)
//alert(files.length);
for (var i = 0, f; f = files[i]; i++) {
displayFileList(f.name, f.size);
totalSize = totalSize+f.size;
}
}
function displayFileList(name, size) {
if (name != '') {
var top_plugin = document.getElementById('top_plugin');
// create tag
var ptag = document.createElement("p");
// create div
var divBox = document.createElement("div");
divBox.setAttribute('class', 'divBox');
// create input[type='checkbox']
var inputCheckBox = document.createElement("input");
inputCheckBox.setAttribute('type', 'checkbox');
inputCheckBox.setAttribute('id', 'checkboxClass')
// add checkbox to div.
divBox.appendChild(inputCheckBox);
// create text node for divBox and add it to divBox.
var txtNode = document.createTextNode(name);
divBox.appendChild(txtNode)
var sizeDivBox = document.createElement("p");
sizeDivBox.setAttribute('style', 'clear:both; display: inline-block;');
var txtSizeNode = document.createTextNode(size);
sizeDivBox.appendChild(txtSizeNode);
divBox.appendChild(sizeDivBox);
// add divBox to ptag.
ptag.appendChild(divBox);
//ptag.appendChild(divTxt);
// add ptag to top_plugin div.
top_plugin.appendChild(ptag);
}
// if file value is not null, make it blank.
if (name != '')
{
name = '';
}
}
I got the solution for the same problems. Please find below the new code.
function uploadDFiles() {
var file = document.getElementById('_file');
file.click();
try {
file.addEventListener("change", getFileName);
}
catch (e) {
file.attachEvent("onclick", getFileNameOnIE);
alert("Error:: "+e.description);
}
}
function getFileName(event) {
var files = event.target.files;
for (var i = 0, f; f = files[i]; i++) {
var fileName = f.name;
var fileSize = f.size;
var fSize = bytesToSize(fileSize, 2);
displayFileList(fileName, fSize);
}
}
But now I have new problem. This code is not working in IE.For IE i am using attachEvent method and its not working. Please find below the code:
function getFileNameOnIE(event) {
alert(event.type);
var files = event.target;
alert(files.length);
for (var i = 0, f; f = files[i]; i++) {
displayFileList(f.name, f.size);
}
}
Can someone provide me the solution for the same now?
--
Tks
Bharat